/* Accessibility (Phase 2 M3a): a single consistent, visible keyboard-focus ring for
   every focusable element. :focus-visible only paints on keyboard focus, so mouse
   clicks keep the existing (ringless) look. This replaces the old global
   `button:focus { outline: none; }` reset, which hid keyboard focus app-wide (WCAG
   2.4.7). Per-component `:focus { outline: none }` resets are removed in the sweep. */
:focus-visible {
    outline: 3px solid var(--bia-focus, #4a3fb0);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Default font-size + margin for <h1>. Browsers shipped a deprecation
   warning when <h1> sits inside <section>/<article> without an explicit
   font-size: removed by setting a default here. Per-template rules below
   still win because they declare a more specific selector. */
h1 { font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; }

/* HSA banner: shown only for US users. The bia-region-us class is set
   synchronously in head.html before body renders, so the banner is in
   its final state on first paint and does not cause CLS. The legacy
   #hsaBanner id is kept so c_toggleHSABanner() in common.js is a
   harmless no-op for already-styled banners. */
.hsaBannerEl { display: none; }
html.bia-region-us[lang="en"] .hsaBannerEl { display: block; }

.title {
	display:inline;
  font-size: clamp(25px, 3vw, 32px);
}

.welcomeTitle {
  text-align: center;
  font-size: 2rem;
  text-align: center;
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 600;
  border-radius: 8px;
}

.onboarding { 

            display: flex; flex-direction: column; align-items: center; justify-content: center; 
            transition: opacity 0.5s ease; padding-top: 20px;padding-left:8px;padding-right:8px; text-align: center;
        }
        .onboarding { display: flex; }
.onboard-card { max-width: 500px; width: 100%; animation: fadeIn 0.5s ease; }
.step-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; color: #3a3a3a; }
.step-desc { font-size: 14px; color:#6c5fc0;  margin-bottom: 20px; line-height: 1.4; } 
.social-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;}
.stat-card { background: white; padding: 18px; border-radius: 16px; text-align: center; border: 1px solid #eee; line-height: 1}
.stat-val { display: block; font-size: 24px; font-weight: 800; color: #6c5fc0; padding-bottom: 4px;}
.stat-label { font-size: 16px; color: #3a3a3a; line-height: 20px; }
.terms-row {
        display: flex;
        align-items: flex-start; /* Aligns checkbox with the first line of text */
        gap: 10px;
        margin-top: 12px;
        text-align: left;
    }

    .terms-row .rememberMeCheckbox {
        margin-top: 3px; /* Fine-tune to match the text's cap-height */
    }

    .terms-label {
        font-weight: 500;
  font-size: 14px;
        text-align:left;
    }
:root {
    --text-main: #1f2937;
    --text-muted: #4b4b4b; /* Darkened for better readability */
    --col-purple: #6c5fc0; /* Unified purple across buttons/accents; darkened from #7a6ad8 to pass WCAG AA (~5:1) as text/UI, matching the proven button purple. */
    --radius-pill: 999px;

    /* Accessibility (Phase 2 M7): semantic tokens whose DEFAULTS already pass WCAG AA
       on white. High-contrast mode (data-a11y-contrast="high") swaps these to >=7:1.
       Migrate the audited low-contrast hardcoded brand colors onto these tokens
       per-surface. */
    --bia-fg: var(--text-main, #1f2937);
    --bia-muted: #595959;       /* >=4.5:1 on white; the audited-gray replacement */
    --bia-accent: #6c5fc0;      /* the proven ~5:1 purple; the brand-purple replacement */
    --bia-teal: #0f766e;        /* ~4.8:1 dark teal: use for teal TEXT and borders (on white) */
    --bia-teal-surface: #45c4a2;/* friendly light teal: use as a BACKGROUND paired with dark text (>=5.5:1) */
    --bia-link: #5b4fb8;
    --bia-border: #767676;      /* 3:1 for UI component borders */
    --bia-focus: #4a3fb0;
    --bia-on-accent: #ffffff;   /* white text only on accents that support it */
    --bia-font-family: inherit; /* readable-font mode overrides this */
}

/* 1. Layout & Scroll Containers */
.loginOverlay {
    background: white;
    padding: 30px 24px;
    border-radius: 28px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    max-height: 95vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.loginOverlay::-webkit-scrollbar { display: none; }

/* 2. Inputs & Form Elements */
.auth-input-group { 
    width: 100%; 
    margin-bottom: 16px; 
    text-align: left; 
}

.auth-input { 
    width: 100%; 
    height: 58px; 
    padding: 12px 20px; 
    border-radius: 18px; 
    border: 1px solid #e5e7eb; 
    background: #fff; 
    font-size: 16px; 
    box-sizing: border-box; 
    transition: 0.2s; 
}

.auth-input:focus { 
    outline: none; 
    border: 2px solid var(--col-purple) !important; 
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(122, 106, 216, 0.1); 
}

/* 3. Buttons & Primary Actions */
.social-btn { 
    width: 100%; 
    height: 54px; 
    border-radius: 18px; 
    border: 1px solid #e5e7eb; 
    background: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px; 
    font-weight: 600; 
    cursor: pointer; 
    margin-bottom: 12px; 
    transition: 0.2s; 
    color:black;
}

.social-btn:hover { background: #f9fafb; }

.loginSubmitButton {
    width: 100%;
    min-height: 54px;
    padding: 12px 32px;
    border-radius: var(--radius-pill);
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background: var(--col-purple);
    color: white;
    margin-top: 4px !important;
    box-shadow: 0 4px 10px rgba(122, 106, 216, 0.2);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.loginSubmitButton:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(122, 106, 216, 0.2);
}
.social-icon-row {
    display: flex;
    justify-content: center;
    gap: 12px; /* Space between buttons */
    margin: 0px;
}

.social-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;  /* Small circular/square footprint */
    height: 48px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 8px; /* Use 50% for circles */
    background: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.social-btn-icon:hover {
    background: #f5f5f5;
}

.social-btn-icon img {
    width: 24px; /* Adjust logo size inside button */
    height: auto;
    display: block;
}

/* 4. Checkboxes & Option Rows */
.option-row {
    display: flex;
    align-items: center; 
    gap: 10px;
    margin-bottom: 8px; 
    min-height: 20px;
}

.rememberMeCheckbox {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--col-purple);
    cursor: pointer;
    flex-shrink: 0;
}

.rememberMeLabel {
    margin: 0 !important;
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    /* WCAG 2.5.8 target size: the label is the large clickable target paired with
       the small native checkbox; keep it >= 24px tall so the touch target meets 24px. */
    min-height: 24px;
}

/* 5. Spacing Utilities */
.auth-footer-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 8px;
}

#acceptTermsContainer {
    margin-top: 12px;
    padding: 0 10px;
}

#acceptTermsContainer div {
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
}

/* 6. Typography & Status */
.loginTitle {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 8px;
    color: var(--text-main);
}

.purpleLink {
    color: var(--col-purple);
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.purpleLink:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.divider { 
    display: flex; 
    align-items: center; 
    margin: 24px 0; 
    color: #3a3a3a; 
    font-size: 12px;
    letter-spacing: 0.05em; 
}

.divider::before, .divider::after { 
    content: ""; 
    flex: 1; 
    height: 1px; 
    background: #6c5fc0; 
    margin: 0 12px; 
}

.loginStatusMessage {
    color: #b01e1e;
    font-size: 14px;
    margin-bottom: 10px;
}

/* 7. Animations */
@keyframes fadeIn2 {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#email-signup-form {
    animation: fadeIn2 0.3s ease forwards;
}


.btn-link {
    border: none;
    background: none;
    cursor: pointer;
    color: #0000EE;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
}

.whiteBackground {
  background:white;
}

#footer-spacer {
  height: 0;
}

.mainBanner {
  background:#e3deff;
  text-align: center;
  padding:16px;
}

.nav-notification {
  width: 8px;
  height: 8px;
  margin-right:-8px;
  margin-top:-8px;
  display: inline-block;
  background: #b01e1e;
  border-radius: 50%;
  vertical-align: top;
}

.overlayMessage {
	padding-bottom:8px;
}

.menu-notification {
  width: 16px;
  height: 16px;
  margin-right:-18px;
  margin-left:2px;
  margin-top:-12px;
  display: inline-block;
  background: #b01e1e;
  border-radius: 50%;
  vertical-align: top;
}

.page-notification {
  width: 12px;
  height: 12px;
  margin-right:-12px;
  margin-top:-12px;
  display: inline-block;
  background: #b01e1e;
  border-radius: 50%;
  vertical-align: top;
}

.verticalDropdownContainer {
  position: relative;
  display: inline-block;
}

.verticalDropdownMenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 8px 0;
  z-index: 1000;
  
  display: none;
}

.verticalDropdownMenu a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  text-align: right;
  cursor: pointer;
}

.verticalDropdownMenu a:hover {
  background-color: #f4f2ff;
  color: #5a4fcf;
}

.verticalDropdownMenu.small {
	max-height:240px;overflow-y:scroll;
}

.verticalDropdownContainer:hover .verticalDropdownMenu {
  display: block !important;
}

/* Rich condition selector dropdown */
.conditionDropdownMenu {
  min-width: 300px;
  padding: 8px 0 4px;
  left: 50%;
  transform: translateX(-50%);
}

.conditionGroup {
  padding: 4px 0;
  border-bottom: 1px solid #f0eeff;
}

.conditionGroup:last-child {
  border-bottom: none;
}

.conditionGroupLabel {
  padding: 6px 14px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #6c5fc0;
}

.conditionDropdownMenu .conditionOption {
  display: flex;
  flex-direction: column;
  padding: 7px 14px;
  text-align: left;
  color: #333;
  cursor: pointer;
}

.conditionDropdownMenu .conditionOption:hover {
  background-color: #f4f2ff;
  color: #5a4fcf;
}

.conditionOption .conditionName {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.conditionOption .conditionSub {
  font-size: 11px;
  color: #888;
  line-height: 1.3;
  margin-top: 1px;
}

.conditionDropdownMenu .conditionOption:hover .conditionSub {
  color: #7a6fd0;
}

/* Mobile: full-width, scrollable */
.conditionDropdownMenu.small {
  position: static;
  transform: none;
  min-width: unset;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: none;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-top: 4px;
}

.welcomeTitle2 {
  text-align: center;
  font-size: 5rem;
  text-align: left;
  display: inline-block;
  margin-bottom: 8px;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.25;
  color:#2e2e2e;
}

.appNavVerticalPad {
  height:42px
}

.welcomeTitle3 {
  font-size: 1.5rem;
    line-height: 2.5rem;
    margin: 1rem 0 2rem;
    display: inline-block;
}

.checkboxContainer {
  white-space: nowrap;
}

.smallScrollingContainer {

}

.featureThreeBlock {
  display:inline-block;width:30%;vertical-align:top;
  background:white;
  padding:8px;
  height:100%;
  text-align:left;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-height: 500px;
}
.featureThreeBlock.middle {
  margin-left: 16px;
  margin-right: 16px;
}

.drag-area {
      width: 100%;
      max-width: 400px;
      height: 200px;
      border: 2px dashed #007BFF;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #007BFF;
      cursor: pointer;
      margin: 50px auto;
    }
    .drag-area.hover {
      background-color: #f0f0f0;
    }
    .hidden-input {
      display: none;
    }
    .upload-status {
      text-align: center;
      margin-top: 20px;
    }

/* ── Custom Exposure Builder ── */
.ceHeader { margin-bottom: 20px; }
.ceSubtitle { color: #666; font-size: 0.92em; margin: 4px 0 0 0; }
.ceSection {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.ceOptionsSection { padding: 14px 20px; }
.ceSectionHeader {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.ceSectionNum {
  background: #6c5fc0;
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.88em;
  margin-top: 2px;
}
.ceTypeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}
.ceTypeCard {
  background: #f5f3ff;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.ceTypeCard:hover { background: #e3deff; border-color: #6c5fc0; }
.ceTypeIcon { font-size: 1.6em; margin-bottom: 5px; }
.ceTypeLabel { font-weight: 600; font-size: 0.82em; color: #333; margin-bottom: 3px; }
.ceTypeDesc { font-size: 0.74em; color: #595959; line-height: 1.3; }
.ceSourceChoiceGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.ceSourceChoice {
  background: #f5f3ff;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  font-size: 0.86em;
  font-weight: 600;
  color: #333;
  user-select: none;
}
.ceSourceChoice:hover { background: #e3deff; border-color: #6c5fc0; }
.ceSourceChoiceIcon { font-size: 1.8em; margin-bottom: 6px; }
.ceContentList { margin-bottom: 12px; }
.ceContentItem {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.ceContentItemNum {
  background: #6c5fc0;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78em;
  font-weight: bold;
}
.ceContentItemBody { flex: 1; min-width: 0; }
.ceContentItemType {
  font-size: 0.72em;
  color: #6c5fc0;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.ceContentItemPreview {
  font-size: 0.88em;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ceContentItemActions { display: flex; gap: 5px; }
.ceIconBtn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid #e0e0e0;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  color: #555;
  user-select: none;
}
.ceIconBtn:hover { background: #f5f3ff; border-color: #6c5fc0; color: #6c5fc0; }
.ceIconBtn.ceDelete { color: #b01e1e; border-color: #ffe0e1; }
.ceIconBtn.ceDelete:hover { background: #fff5f5; border-color: #b01e1e; }
.ceEmptyState {
  text-align: center;
  padding: 18px 16px;
  color: #6a6a6a;
  font-size: 0.88em;
  border: 2px dashed #e8e8e8;
  border-radius: 10px;
  margin-bottom: 12px;
}
.ceAddLabel { font-weight: 600; font-size: 0.88em; color: #555; margin: 0 0 10px 0; }
.ceInputPanel {
  background: #f5f3ff;
  border-radius: 12px;
  padding: 16px;
  margin-top: 4px;
}
.ceInputActions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ceInputError { color: #b01e1e; font-size: 0.9em; margin: 8px 0 0 0; }
.cePromptGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cePromptCard {
  background: white;
  border: 2px solid #e3deff;
  border-radius: 12px;
  padding: 14px 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.cePromptCard:hover { border-color: #6c5fc0; background: #f5f3ff; }
.ceLabel {
  display: block;
  font-weight: 600;
  font-size: 0.9em;
  margin-bottom: 6px;
  color: #333;
}
.ceExpandOption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.ceExpandOption label { cursor: pointer; }
.ceExpandTitle { display: block; font-weight: 600; font-size: 0.9em; color: #333; }
.ceExpandDesc { display: block; font-size: 0.82em; color: #777; margin-top: 2px; line-height: 1.4; }

/* ── Mode / Game pickers ── */
.ceModeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.ceGameGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
.ceModeBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f3ff;
  border: 1px solid #e5e1f5;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.86em;
  color: #333;
}
.ceModeBannerLabel { color: #555; }
.ceModeBannerLabel b { color: #6c5fc0; }
.ceRandomPoolBanner {
  background: #f5f3ff;
  border: 1px solid #e5e1f5;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 0.84em;
  color: #555;
  line-height: 1.4;
}
.ceGamePreviewCard {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f5f3ff;
  border: 1px solid #e5e1f5;
  border-radius: 12px;
  padding: 18px 16px;
  margin-bottom: 8px;
}
.ceGamePreviewIcon {
  line-height: 1;
  flex-shrink: 0;
  color: var(--col-purple);
}
.ceGamePreviewIcon svg {
  width: 34px;
  height: 34px;
}
.ceGamePreviewBody { flex: 1; }
.ceGamePreviewTitle { font-weight: 600; font-size: 1em; color: #333; margin-bottom: 4px; }
.ceGamePreviewDesc { font-size: 0.86em; color: #777; line-height: 1.4; }
.ceGenerateWrap { padding: 4px 0 8px 0; }
.ceError { color: #b01e1e; font-size: 0.9em; margin: 8px 0 0 0; }

/* ── Wizard stepper ── */
.ceWizardStepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin: 0 0 18px 0;
  padding: 6px 4px 2px 4px;
}
.ceWizStep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 64px;
  user-select: none;
}
.ceWizStep.clickable { cursor: pointer; }
.ceWizDot {
  background: #e5e1f5;
  color: #6c5fc0;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9em;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ceWizStep.active .ceWizDot {
  background: #6c5fc0;
  color: white;
  border-color: #6c5fc0;
  box-shadow: 0 0 0 4px rgba(119,106,200,0.15);
}
.ceWizStep.done .ceWizDot {
  background: var(--bia-teal-surface);
  color: var(--bia-fg);
  border-color: var(--bia-teal);
}
.ceWizLabel {
  font-size: 0.72em;
  color: #595959;
  text-align: center;
  line-height: 1.2;
  max-width: 90px;
}
.ceWizStep.active .ceWizLabel { color: #333; font-weight: 600; }
.ceWizStep.done .ceWizLabel { color: #237355; font-weight: 600; }
.ceWizConnector {
  flex: 1 1 auto;
  height: 2px;
  background: #e5e1f5;
  margin-top: 15px;
  border-radius: 2px;
  transition: background 0.3s;
}
.ceWizConnector.done { background: var(--bia-teal-surface); }

/* ── Wizard navigation ── */
.ceWizardNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 4px 0;
}
.ceWizardNav .standardButton { min-width: 100px; }
.ceWizBack {
  background: white !important;
  color: #6c5fc0 !important;
  border: 2px solid #d9d2f0 !important;
}
.ceWizBack:hover {
  background: #f5f3ff !important;
  border-color: #6c5fc0 !important;
}

/* ── Expand visual preview ── */
.cePreviewWrap {
  background: #faf9ff;
  border: 1px dashed #d9d2f0;
  border-radius: 12px;
  padding: 14px;
  margin-top: 4px;
}
.cePreviewHeading {
  font-size: 0.82em;
  font-weight: 700;
  color: #6c5fc0;
  text-transform: none;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.cePreviewContainer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 6px 2px 10px 2px;
}
.cePreviewStep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  transition: opacity 0.55s ease, transform 0.55s ease, max-width 0.55s ease, margin 0.55s ease;
  transition-delay: calc(var(--ce-step-index) * 40ms);
  max-width: 72px;
  opacity: 1;
  transform: scale(1);
}
.cePreviewThumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: white;
  border: 1px solid #e3deff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  box-sizing: border-box;
}
.cePreviewImg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.cePreviewImg.size-small { transform: scale(0.4); }
.cePreviewImg.size-medium { transform: scale(0.7); }
.cePreviewImg.greyscale { filter: grayscale(1); }
.cePreviewImg.greyscaleblurry5 { filter: grayscale(1) blur(4px); }
.cePreviewImg.greyscaleblurry2 { filter: grayscale(1) blur(2px); }
.cePreviewImg.greyscaleblurry1 { filter: grayscale(1) blur(1px); }
.cePreviewImg.blurry5 { filter: blur(4px); }
.cePreviewImg.blurry2 { filter: blur(2px); }
.cePreviewImg.blurry1 { filter: blur(1px); }
.cePreviewStepLabel {
  font-size: 0.7em;
  color: #6c5fc0;
  font-weight: 600;
}
.cePreviewFinal .cePreviewThumb {
  border-color: #6c5fc0;
  box-shadow: 0 0 0 2px rgba(119,106,200,0.12);
}
.cePreviewConnector {
  flex: 0 0 10px;
  height: 2px;
  background: #d9d2f0;
  border-radius: 2px;
  transition: opacity 0.45s ease, max-width 0.45s ease;
  transition-delay: calc(var(--ce-step-index) * 40ms);
  max-width: 12px;
  opacity: 1;
}
.cePreviewCaption {
  font-size: 0.85em;
  color: #555;
  margin: 8px 0 0 0;
  line-height: 1.4;
  min-height: 1.2em;
}

/* ── Collapsed preview: all intermediate steps animate away ── */
.cePreviewContainer.cePreviewCollapsed .cePreviewStep:not(.cePreviewFinal) {
  opacity: 0;
  transform: scale(0.3);
  max-width: 0;
  margin: 0;
  pointer-events: none;
}
.cePreviewContainer.cePreviewCollapsed .cePreviewConnector {
  opacity: 0;
  max-width: 0;
}
.cePreviewContainer.cePreviewCollapsed .cePreviewFinal {
  transform: scale(1.15);
}
.cePreviewContainer.cePreviewCollapsed .cePreviewFinal .cePreviewThumb {
  width: 88px;
  height: 88px;
}

@media (max-width: 400px) {
  .ceTypeGrid { grid-template-columns: repeat(2, 1fr); }
  .cePromptGrid { grid-template-columns: 1fr; }
  .ceWizLabel { display: none; }
  .ceWizStep { min-width: 32px; }
}

.horizontalGoalContainer {
  white-space: nowrap;
  overflow-x: scroll;

}

.carousel-container {
  width: 80%;
  margin: 0 auto;
  position: relative;

}

.carousel {
  display: block;
  white-space: nowrap; /* Ensures horizontal scrolling */
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hide scrollbar on Firefox */
  -ms-overflow-style: none; /* Hide scrollbar on IE and Edge */
  
}

.carousel::-webkit-scrollbar {
  display: none; /* Hide scrollbar on Chrome, Safari, and Opera */
}

.carousel-card {
  display: inline-block; /* Ensures horizontal arrangement without Flex */
  scroll-snap-align: center;
  vertical-align: top;
  width: 100%;
  padding: 20px;
  padding-left: 40px;
  padding-right: 40px;
  height:180px;
  margin-right: 32px;
  margin-bottom: 8px;
  background-color:white;
  border-radius: 8px;
  text-align: center;
  border:1px solid #d9e1e4;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.08);
  white-space: normal; /* Allows text wrapping inside the card */
}

.carousel-dots {
  text-align: center;
  margin-top: 8px;
  margin-bottom: 16px;
}

.carousel-container.small {
    width:450px;
  }
  .carouselButton.small {
    display: none;
  }
  .carousel-card.small {
    height:250px;
    padding:20px;
  }
  .userQuote.small {
  font-size: 1rem;
}
  .appReview.small {
  font-size: 0.9rem;
  text-align: left;
}
.statQuote.small {
  padding-top: 60px;
}
.carouselQuote.small {
  padding-top: 8px;
  height:90%;
}

.simpleExpand {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.simpleExpand.open {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.square-loading {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-color: #6c5fc0;
}

.square-loading {
  animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}


@keyframes loadingG {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(120px, 0) rotate(360deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  cursor: pointer;
  background-color: #a7a7a7;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #3a3a3a;
}

carouselButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 50%;
}

carouselButton:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

carouselButton.prev {
  left: -40px;
}

carouselButton.next {
  right: -40px;
}

.multiSelect {
    position: relative;
    width: 100%;
    max-width: 420px;
    font-family: system-ui, sans-serif;
  }

  .multiSelectInput {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 36px 8px 10px;
    min-height: 42px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    cursor: pointer;
    background: #fff;
  }

  .multiSelectPlaceholder {
    color: #888;
  }

  .multiSelectArrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .multiSelectDropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    z-index: 1000;
  }

  .multiSelectDropdownItem {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }

  .multiSelectDropdownItem:hover {
    background: #f5f5f5;
  }

  .checkmark {
    font-size: 14px;
    color: #16a34a;
  }

.cookieBanner {

  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  background-color: #f9f9f9;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 9999;
}

table.cookieTable {
  border: 3px solid #000000;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.cookieTable td, table.cookieTable th {
  border: 1px solid #000000;
  padding: 5px 4px;
}
table.cookieTable td {
  font-size: 13px;
}
table.cookieTable th {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: left;
}

.cookieOption {
  border: 2px solid #ccc;
  padding: 15px;
  margin-bottom: 10px;
  width:45%;
  min-height:100px;
  max-width: 400px;
  cursor: pointer;
  vertical-align: top;
  display: inline-block;
}
.cookieOption.left {
  margin-right: 8px;
}

.cookieOption.selected {
  border-color: #007BFF;
  background: #e3e7fb;
}

.cookieOption p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

.cookieBanner button {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #007BFF;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.cookieBanner button:hover {
  background-color: #0056b3;
}

  .country-select {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 320px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .country-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid #d0d7de;
    outline: none;
    background: #fff;
    cursor: text;
  }

  .country-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
  }

  .country-input:disabled {
    background:#e9f1f9;
  }

  .country-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
  }

  .country-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 15px;
  }

  .country-option:hover {
    background: #f3f4f6;
  }

  .country-option.hidden {
    display: none;
  }

.navTitle {
  display: inline-block;
}

.timestampToLocal {
  display:none;
}

.statDone {
    font-weight: 600;
    font-size: 40px;
    line-height: 125%;
}
.statTotal {
    font-weight: 600;
    font-size: 40px;
    line-height: 125%;
    color:#767676;
}

.betaTag {
  padding:8px;
  margin:8px;
  font-weight: 600;
  background: #6c5fc0;
  color:white;
  border-radius: 8px;
  font-size: 1.3rem;
}

.multiSelectTag {
  padding:6px;
  margin:0px;
  background:linear-gradient(239.92deg, rgba(227, 222, 255, 0.8) -0.64%, rgba(227, 249, 243, 0.8) 98.73%);
  border-radius: 8px;
}

.appDownloadBadge {
  width: 200px;
  height:66.8px;
  margin:8px;
}

.appDownloadBadge.footer {
  /* Let width derive from natural aspect so the Android badge does not
     get visually squished and Lighthouse's image-aspect-ratio audit is
     happy. iOS computes to ~126x42 (no visible change), Android to
     ~142x42 (16px wider, undistorted). */
  height:42px;
  width: auto;
  margin:2px;
  border-radius: 4px;
}

.goalsContainer {
  text-align: center;
  width:100%;
}

.goalContainer {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  width:100%;
  max-width: 350px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  display: inline-block;
  margin-bottom: 16px;
}

.goalTitleRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.goalActivity {
  display:inline-block;
}

.goalTitle {
  font-weight: 600;
  font-size: 18px;
  color: #3A3A3A;
}

.goalImg img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

.goalProgessRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 8px;
}

.goalRowTitle {
  font-weight: 600;
  font-size: 14px;
  max-width:80%;
  text-align: left;
  color: #3A3A3A;
}

.goalRowValue {
    white-space: nowrap;
  display: flex;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #3A3A3A;
  margin-left: 6px;
}

.goalValue {
  font-weight: 600;
  display: flex;
  align-items: center;
}

.statusNumber.complete {
    color:var(--bia-teal);
    background: none;
}
.statusNumber.improve {
    color:#b01e1e;
}
.statusNumber.progress {
    color:#ffd393;
}

.greyText {
  font-weight: 500;
  color: #595959;
}

.scrollDot {
  height: 10px;
  width: 10px;
  margin-bottom: 2.5px;
  background:#a6a6a6;
  border-radius: 50%;
  margin-right: 3px;
  margin-left: 3px;
  display: inline-block;
}

.scrollDot.complete {
    background: var(--bia-teal-surface);
}

.scrollDot.improve {
    background: #b01e1e;
}

.scrollDot.progress {
    background: #ffd393;
}

.scrollDot.skipped {
    background: var(--bia-teal-surface);
}

.scrollDot.locked {
    background: #6c5fc0;
}

.scrollDot.active {

}

.navBannerX {
  float:right;padding:8px;margin-top:-8px;border-radius:16px;
  cursor: pointer;
}

.floatingCard {
  position: relative;
  width:220px;
  margin-top: -100px;
  height:100px;
  background: white;
  border-radius: 16px;
  box-shadow: 8px 8px 2px rgba(0,0,0, 0.3);
}


.quoteNavContainer {
  z-index: 1000;
  position: relative;
  top:70px;
}
.quoteContainerLeft {
  margin-left: 8px;
  float:left;
  text-align: left;
  cursor: pointer;
  margin: 8px;
  border-radius: 8px;
}
.quoteContainerRight {
  text-align: right;
  float:right;
  margin-right: 8px;
  cursor: pointer;
  margin: 8px;
}

.userQuote {
  font-size: 1.3rem;
}
.statQuote {
  font-size: 1.8rem;
  background-image: linear-gradient(to right bottom, #ffe3e4, #ffe1e7, #fddfec, #f8ddf2, #f1ddf8, #e7e1fd, #dde5ff, #d5e8ff, #d2eefd, #d4f2fa, #daf6f6, #e3f9f3);
}

.bioContainer {
  margin-bottom: 8px;
}

.bioPortrait {
  display: inline-block;
  vertical-align: middle;
  margin-right: 16px;
}
.directoryGrid {
	display: flex;
  flex-wrap: wrap;
  gap: 0px;
  justify-content:center;
}
.directoryProfileContainer {
  border:1px solid #6c5fc0;
  border-radius: 16px;
  background: white;
  margin:8px;
  padding:12px;
  padding-top:16px;
  display: inline-block;
  max-width:330px;
  flex: 1 1 330px;
}
.directoryProfileName {
  text-align: center;
  font-size: 24px;
  display: block;
  font-weight: 600;
}
.directoryProfileTitle {
  display: block;
  text-align: center;
  font-weight: 600;
}
.directoryVerifiedBadge {
  float:right;
  margin-left:-16.7px;
  margin-top:-12px;
  margin-bottom: 2px;
}
.directoryProfileContact {
  text-align: center;
}
.directoryProfileTag {
    padding: 8px;
    margin-top:3.75px;

    background-color: #e3f9f3;
    border-radius: 25px;
    display: inline-block;
}
.directoryProfileTag.purple {
  background-color: #e3deff;
}
.directoryProfileTag.grey {
  background-color: #e0e0e0;
}
.directoryProfileTag.darkPurple {
  background-color: #6c5fc0;
  color:white;
}
.directoryProfileTag.darkGreen {
  background-color: #26ab5c;
  color:white;
}
.directoryProfileTag.darkYellow {
    background-color: #ffbb7e;
    color:white;
}


.bioText {
  display: inline-block;
  width:80%;
  vertical-align: middle;
}

.passwordRequirementsContainer {
  margin-bottom:8px;
}

.providerWhatIfContainer {
  background:white;
  border-radius: 16px;
  margin:8px;
  padding: 8px;
}
.providerWhatIf {
  font-weight: 600;
}

.simpleCard {
  background: #ffffff;
  border-radius: 16px;
  width:211px;
  text-align: center;
  height:112px;
  margin:8px;
  padding: 16px;
  font-size: 1.2rem;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  vertical-align: top;
  cursor: pointer;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.simpleCard.wide {
  height:211px;
  font-size: 1.2rem;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
}
.simpleCardImg {
  height:80px;
  margin-bottom:16px;
}

.simpleCardText {
  display: inline-block;
  white-space: wrap;
}
.simpleCard:hover {
  background: #e5dffb;
}

.progressButtonInner {
  height: 100%;
  background-color: #6c5fc0;
  width: 0;
  position: absolute;
  padding: 0;
  border: none;
  top: 0%;
  left: 0%;
  border-radius: 10px;
}

.passwordRequirement {

}

.passwordRequirement.pass {
  color:var(--bia-teal);
}
.passwordRequirement.fail {
  color:#b01e1e;
}

.progressButtonText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar {
  width:100%;
  background:none;
  padding-top:8px;
  padding-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.smallNavList {
  width: 85%;
  padding:0px;
  border-radius: 16px;
  margin-bottom: 0px;
}

.smallNavWrapper {
  background:none;
  text-align: center;
  padding-bottom: 8px;
  border-radius: 16px;
  width: 100%;
  overflow:hidden;
  max-height:0px;
  transition: none;
}

.smallNavWrapper.open {
  /* headroom so the expanded mobile menu doesn't clip when a user applies text-spacing (WCAG 1.4.12) */
  max-height: 900px;
  background: white;
  transition: max-height 0.5s ease-in;
}

.imgVertCenter {
position: relative;
top: 50%;
transform: translateY(-50%); 
}

.floatingLoadingContainer {
    position:absolute;
    bottom:50%;
    left:50%;
    margin-top:-24px;
    transform:translate(-50%, -50%);
    color: white;
    z-index: 1000;
    width: 120px;
}

.loadingContainer {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: white;
    z-index: 1000;
    width: 120px;
}

.navRightWrapper {
  float: right;
  background: none;
  margin-left: auto !important;
  display: inline-block;
  padding:10px 0px 0px 0px;
  text-align: center;
  border-radius: 16px;
}

.smallNavExpander {
  float: right;
  border:2px solid #3A3A3A;
  padding:4px;
  margin-top: 8px;
  width:50px;
  height:40px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}

/* Both icons are in the DOM (preloaded); show the collapsed (hamburger) icon by
   default and the expanded (close) icon only while the small nav is open. Avoids
   reassigning an <img> src, which aborted in-flight loads and caused false asset errors. */
.smallNavExpander .smallNavIconClose {
  display: none;
}
.smallNavExpander.navExpanded .smallNavIconOpen {
  display: none;
}
.smallNavExpander.navExpanded .smallNavIconClose {
  display: inline;
}

.navRightList {
  vertical-align: middle;
  margin-top:8px;
  margin-bottom:8px;
  margin-left: 0px;
  margin-right: 0px;
  padding:0px;
}

table.researchTable {
  border-radius: 4px;
}

table.researchTable th {
  background: #e3deff;
  padding:4px;
}

table.researchTable td {
  padding:4px;
  border-right:1px solid white;
}

table.researchTable tr:nth-child(even) {
  background: #e3deff;
}

table.researchTable tr:nth-child(odd) {
  background: white;
}

.tableTag {
  background:#6c5fc0;
  border-radius: 8px;
  padding:2px;
  margin:2px;
  white-space: nowrap;
  color:white;
  display: inline-block;

}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}
.container.wide {
  padding-right: 0px;
  padding-left: 0px;
}

.exerciseNavContainer {
  width:100%;
  margin-bottom:8px;
  min-height: 64px;
}
.exerciseNavContainer.wide {
  padding-left: 15px;
  padding-right: 15px;
}

.breathingContainer {
  margin-top: 16px;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 200px;
  height: 200px; 
}

.breathingCircle {  
  width: 50px;
  height: 50px;
  background-color:#6c5fc0;
  border-radius: 50%;
  animation: breathingCircleAnimation 9s infinite;
  transition: background-color 5s linear;
}

.breathingPhrase1 {
  color:#6c5fc0;
  animation: breathingPhrase1Animation 9s infinite;
  margin-right: 16px;
}

.breathingPhrase2 {
  color:#6c5fc0;
  animation: breathingPhrase2Animation 9s infinite;
}

@keyframes breathingPhrase2Animation {
  0% {
    font-size:32px;
  }
  28% {
    font-size:16px;
  }
  47% {
    font-size:16px;
  }
  53% {
    font-size:16px;
  }
  80% {
    font-size:32px;
  }
  100% {
    font-size:32px;
  }
}

@keyframes breathingPhrase1Animation {
  0% {
    font-size:16px;
  }
  28% {
    font-size:32px;
  }
  47% {
    font-size:32px;
  }
  53% {
    font-size:32px;
  }
  80% {
    font-size:16px;
  }
  100% {
    font-size:16px;
  }
}

@keyframes breathingCircleAnimation {
  0% {
    width: 50px;
    height: 50px;
    background-color:#6c5fc0;
  }
  28% {
    width: 200px;
    height: 200px;
    background-color:#b3a6e2;
  }
  47% {
    width: 200px;
    height: 200px;
    background-color:#b3a6e2;
  }
  53% {
    width: 200px;
    height: 200px;
    background-color:#b3a6e2;
  }
  80% {
    width: 50px;
    height: 50px;
    background-color:#6c5fc0;
  }
  100% {
    width: 50px;
    height: 50px;
    background-color:#6c5fc0;
  }
}

.footer_logo {
  display:inline;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.toggleContainer {
  padding:8px;
  border-radius: 16px;
  display: inline-block;
}
.toggleOption {
  padding:8px;
  margin-right: 4px;
  padding-left:16px;
  padding-right:16px;
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
  background: white;
}


.toggleOption:hover {
  background: #574bb0;
  color:white;
}
.toggleOption.selected {
  background: #6c5fc0;
  color:white;
}

.navBanner {
  width:100%;
  text-align: center;
  margin-top:16px;
  margin-bottom:16px;
  padding: 16px;
  background:#fff4e3;
  border-radius: 16px;
}
.navBanner.green {
    background:#e3f9f3;
}
.navBanner.red {
    background:#ffe3e4;
}
.navBanner.purple {
  background:#e3deff;
}
.navBanner.blank {
  padding:0px;
  background:none;
}
.navBanner.gradient {
  background: linear-gradient(160deg, #d4ccff, #d5f6ed);border-radius:32px;padding:16px;
}
.navBanner.hug {
  margin-top: 0px;
  margin-bottom:8px;
  padding:8px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.therapy-blue {
  color:#6c5fc0;
}

.therapy-black {
  color:#211A1E;
}

.calm_background {
  background-color: #F8F8F8;
}

.vertical-pad-small {
	height:50px;
}

.vertical-pad-large {
	height:200px;
}

div.mantraContainer {
  width:100%;
  background:white;
  border-radius: 16px;
  font-size: 2rem;
  padding:16px;
  color:black;
  margin-bottom: 16px;
}

div.blogPostDescription {
  width:100%;
  background:white;
  border-radius: 16px;
  padding:16px;
  color:black;
  margin-bottom: 16px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

div.blogPostDescription:hover {
  background: #e3deff;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

 .pin-container {
            
            padding-top: 16px;
        }

        .pin-input {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 24px;
            border: 2px solid #ccc;
            border-radius: 5px;
            outline: none;
            transition: border-color 0.3s;
        }

        .pin-input:focus {
            border-color: #007BFF;
        }

textarea.inputTextArea {
  width:95%;
  max-width:600px;
  height:100px;
  margin-top:5px;
  border-radius: 8px;
  border: none;
  padding: 10px;
  margin-right:8px;
  resize:both;
  outline: none;
  border: 1px solid var(--bia-accent);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

}

textarea.inputTextArea.small {
  width:300px;
  height:80px;
}

textarea.inputTextArea:focus {
  border:1px solid #6c5fc0;
  outline-color: #6c5fc0;
}

textarea.inputTextArea:disabled {
  background: #C4C0BE;
}

a.blank {
  color:inherit;
  text-decoration-skip-ink:none;
  text-decoration: none;
}

.nav-link {
  color: blue;
  padding-bottom:0px;
  text-align: right;
}

input.limited-width {
    max-width: 555px;
}

textarea.limited-width {
    max-width: 555px;
}

button.limited-width {
    max-width: 200px;
}

p.limited-width {
    max-width: 555px;
}

p.notes {
    padding:5px;
    background-color: #f7f7f9;
}

div.inline-profile {
    padding:10px;
    background-color: #f7f7f9;
}

div.inline-resource {
    padding:10px;
    background-color: #f7f7f9;
}
div.inline-treatment {
    padding:10px;
    background-color: #f7f7f9;
}
div.inline-exercise {
    padding:10px;
    background-color: #f7f7f9;
}

h1.inline {
    display: inline-block;
}
button.inline {
    display: inline-block;
}

h1.editable {

}
p.editable {

}
div.editable {

}
input.editable {

}
div.notes {
    padding:5px;
    background-color: #f7f7f9;
}
div.limited-width {
    max-width: 555px;
}
div.tag {
    padding: 5px;
    margin: 5px;
    background-color: #e3deff;
    border-radius: 25px;
    display: inline-block;
}

.tagFilter {
    padding: 5px;
    margin: 1px;
    border: 1px solid var(--bia-accent);
    color:#3A3A3A;
    background:white;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
}
.tagFilter:hover {
	color:white;
  background: #574bb0;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #757575
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.greenText {
    color:var(--bia-teal);
    font-weight: 600px;
}

div.activity {
  border: 1px solid black;
  border-radius: 5px;
  padding:5px;
  margin:5px;
  display: inline-block;
  min-width: 200px;
  min-height: 200px;
}

div.exerciseContainer {
  width:100%;
  height:80%;
}

div.exerciseComponent {
  overflow: auto; /* Required to expand around the floating internal divs - https://stackoverflow.com/questions/4604005/how-to-make-a-div-grow-in-height-while-having-floats-inside */
  width:98%;
  padding:5px;
  margin: 5px;
}
div.exerciseComponent:hover {

}

div.exerciseComponentEdit {
  float:right;
}

div.exerciseComponentContent {
  float:left;
  width:100%;
}

a.delete-link {
  color:red;
}

a.noStyle {
  text-decoration: none; /* no underline */
  color:inherit;
}

a.black {
  color:#3A3A3A;
}


/* TABLE */
.simpleTable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.simpleTable td, .simpleTable th {
  border: 1px solid #ddd;
  padding: 8px;
}

.simpleTable tr:nth-child(even){background-color: #e3deff;}
.simpleTable tr:nth-child(odd){background-color: white;}

.simpleTable tr:hover {background-color: #d4ccff;}

.simpleTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #6c5fc0;
  color: white;
}

/* END TABLE */

body {
  width: 100%; height: 100%;
  background: #f7f6fe;
  color: #3A3A3A;
  font-family: 'Inter Tight';
  overflow-x: hidden;
  max-width: 100%;
  min-height: 100vh;
}
/* WCAG 1.4.10 reflow: a data table that is too wide for a 320px viewport is allowed to
   scroll horizontally WITHIN its own box (tables are exempt) instead of pushing the whole
   page sideways. Bootstrap's .table-responsive is auto only when its CSS is in play; assert
   it here so consumer (non-Tabler) pages get the scroll wrapper too. */
.table-responsive { overflow-x: auto; }

p.rotatingGoal {
  display:inline-block;
  font-weight: bold;
}

.footer-row {
  padding-top: 4px;
  padding-bottom:4px;
  margin-bottom: 2px;
}

.footer-content {
  color:white;
  /* Opacity 0.85 was dropping contrast under 4.5:1 on the purple footer.
     Full opacity passes AA. Hover state stays at 1 for parity. */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.footer-content.dark {
  color:#3A3A3A;
}

.footer-content:hover {
  color:white;
  opacity: 1;
}

.footer-content.dark:hover {
  color:black;
  opacity: 1;
}

.navWrapper {
  padding: 8px 8px 8px 40px;
  background: #FFFFFF;
  border-radius: 16px;
  align-items: center;
}

.navSeperator {
  color: #4e4e4e;
}

.navLink {
  padding:10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #4e4e4e;
}

/* Span variants of navLink/smallNavLink behave as buttons (data-action
   triggers overlays, not navigation). Anchors get cursor: pointer
   automatically; spans need it explicit. */
span.navLink, span.smallNavLink { cursor: pointer; }

.smallNavLink {
  padding:10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #4e4e4e;
  display: block;
}

.smallNavLink:hover {
  color:#6c5fc0;
}

.navActive {
  color: #3A3A3A;
}

.navLink:hover {
  color:#6c5fc0;
}

.navLogin {
  background: none;
  border-radius: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right:20px;
  padding-left:20px;
  color:#6c5fc0;
  border: 1px solid #6c5fc0;
}

.navGetStarted {
  background: #6c5fc0;
  border-radius: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right:20px;
  padding-left:20px;
  color:#FFFFFF;
}

.navGetStarted:hover {
  color:#FFFFFF;
  background-color: #6657c1;
}

.navLogout {
  background: #4E4E4E;
  border-radius: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right:20px;
  padding-left:20px;
  color:#FFFFFF;
}

.navLogout:hover {
  color:#FFFFFF;
  background:#574bb0;
}

.animatedCheckOuter {
  text-align: left;
  display: inline-block;
}

.animatedCheckContainer {
  vertical-align: middle;
}

.animatedCheckCaption {
  padding-left: 16px;
  padding-right: 8px;
  vertical-align: middle;
  height: 56px;
  line-height: 1.2;
  font-weight: 400;
  font-size: 1.3rem;
}

.checkWrapper {
  width:100%;
  display: inline-block;
  margin-bottom: 8px;
}


.a_checkmark_circle {
  stroke-dasharray: 166; 
  stroke-dashoffset: 166; 
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #e3deff;
  fill: none;
}
.a_checkmark_circle.one.animated {
  animation-delay:2s;
  animation: stroke 1.5s cubic-bezier(0.65, 0, 0.45, 1) 0.0s forwards;
}
.a_checkmark_circle.two.animated {
  animation-delay:3s;
  animation: stroke 1.5s cubic-bezier(0.65, 0, 0.45, 1) 1.0s forwards;
}
.a_checkmark_circle.three.animated {
  animation-delay:4s;
  animation: stroke 1.5s cubic-bezier(0.65, 0, 0.45, 1) 2.0s forwards;
}

.a_checkmark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: var(--bia-accent);
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #e3deff;
}
.a_checkmark.one.animated {
  animation-delay:2s;
  animation: fill .4s ease-in-out 1.5s forwards, scale .3s ease-in-out 1.5s both
}
.a_checkmark.two.animated {
  animation-delay:3s;
  animation: fill .4s ease-in-out 2.5s forwards, scale .3s ease-in-out 2.5s both
}
.a_checkmark.three.animated {
  animation-delay:4s;
  animation: fill .4s ease-in-out 3.5s forwards, scale .3s ease-in-out 3.5s both
}

.a_checkmark_check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.a_checkmark_check.one.animated {
  animation-delay:2s;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 1.5s forwards;
}
.a_checkmark_check.two.animated {
  animation-delay:3s;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 2.5s forwards;
}
.a_checkmark_check.three.animated {
  animation-delay:4s;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 3.5s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 80px #e3deff;
  }
}

.smallTitle {
    font-weight: 400;
    font-size: 18px;
}

.pillText {
    border-radius: 8px;
    padding:2px;
    padding-left: 4px;
    padding-right: 4px;
    font-weight: 600;
}

.currencySelect span {
  font-size: 18px;
  color:#3A3A3A;
  font-weight: 500;
  line-height: 36px;
}
.currencySelect.selected span {
  
}

.currencySelect {
    border:1px solid #e3deff;
    width: 56px;
    height: 36px;
    border-radius: 10px;
    color:#3A3A3A;
    background: none;
    font-weight: 500;
    font-size: 0;
    font-style:normal;
    
    cursor: pointer;
    margin:4px;
    display: inline-block;
}

.currencySelect.selected {
  border:1px solid var(--bia-accent);
  background: #e3deff;
  color:white;
}

.currencySelect.disabled {
    background-color: #4e4e4e;
}

.currencySelect.disabled:hover {
    background-color: #4e4e4e;
}

.currencySelect:disabled {
    background-color: #4e4e4e;
}

.currencySelect:disabled:hover {
    background-color: #4e4e4e;
}

.currencySelect:hover {
    background-color: #e3deff;
    color:white;
}

.currencySelect:focus {
    background-color: #e3deff;
}

.sessionProgressBarWrapper {
    text-align: center;
    margin-bottom: 16px;
}
.sessionProgressBarContainer {
    display: inline-block;
    width:80%;
    height:30px;
    background:white;
    border-radius: 8px;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.25), 2px 2px rgba(255, 255, 255, 0.08);
}
.sessionProgressBar {
    background: linear-gradient(239.92deg, var(--bia-teal) -0.64%, var(--bia-accent) 98.73%);
    border-radius: 8px;
    height:100%;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #3A3A3A;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}


/* Social-link icons: 20x20 visible icon centered in a 32x32 clickable
   anchor (24x24 WCAG AA min + comfortable margin). Parent <div> is
   flex-laid-out via :has() so spacing is one source of truth (gap)
   rather than competing margins on the img and padding on the anchor. */
.mediumSocial,
.smallSocial {
    width: 20px;
    margin: 0;
    display: block;
}
.smallSocial.first, .smallSocial.last { margin: 0; }
/* Inline Tabler brand SVGs recolour via currentColor (matches the footer icons);
   raster/colour imgs that still use this class simply ignore `color`. */
.mediumSocial {
    color: var(--bia-muted);
    transition: color 0.18s ease;
}

div:has(> a > .smallSocial),
div:has(> a > .mediumSocial) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
a:has(> .smallSocial),
a:has(> .mediumSocial) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    line-height: 0;
}
a:has(> .mediumSocial):hover .mediumSocial,
a:has(> .mediumSocial):focus-visible .mediumSocial {
    color: var(--bia-link);
}
a:has(> .mediumSocial):focus-visible {
    outline: 2px solid var(--bia-focus);
    outline-offset: 2px;
    border-radius: 8px;
}


.navLanguageOption {
    color:#6c5fc0;
    cursor: pointer;
    border:1px solid var(--bia-accent);
    border-radius: 4px;
    padding: 2px;
    height:26px;
}
.navLanguageOption:hover {
    color:#6c5fc0;
    background:#e3deff;
}

.pillText.red {
    background-color: #ffe3e4;
}
.pillText.darkRed {
    background-color: #d16163;
}
.pillText.brightRed {
    background-color: #f15d53;
}
.pillText.green {
    background-color: #e3f9f3;
}
.pillText.darkGreen {
    background-color: #26ab5c;
}
.pillText.yellow {
    background-color: #fff4e3;
}
.pillText.darkYellow {
    background-color: #ffbb7e;
}
.pillText.brightYellow {
    background-color: #fed100;
}
.pillText.blue {
    background-color: #33b0f6;
}
.pillText.purple {
    background-color: #e3deff;
}
.pillText.darkPurple {
    background-color: #8a78b6;
}
.pillText.white {
    background-color: white;
}

.completeIntro {
    padding:32px;
    font-weight: 600;
    font-size: 20px;
    border-radius: 16px;
    background: linear-gradient(239.92deg, #E3DEFF -0.64%, #e3f9f3 98.73%);
    width:70%;
}

.examplePillContainer {
    width:100%;
    display:inline-block;
    margin-bottom: 16px;
}

.exampleExercisePill {
    background:white;
    border-radius:16px;
    height:100px;
    width:222px;
    display:inline-block;
    margin:4px;
    white-space: normal;
    vertical-align:top;
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
.exampleExercisePill.noHover:hover {
    background: white;
}

.exampleExercisePill:hover {
    background: #e3f9f3;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
.exampleExercisePillTitle {
    display:inline-block;
    font-weight: 600;
    font-size: 22px;
    margin:4px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.continueWithFacebook {
    width: 300px;
    height:40px;
    background:white;
    border-radius: 40px;
    text-align: center;
    color:#3A3A3A;
    line-height: 38px;
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.1);
}
.continueWithApple {
    width: 300px;
    height:40px;
    background:white;
    border-radius: 40px;
    text-align: center;
    color:#3A3A3A;
    line-height: 38px;
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.1);
}
.continueWithGoogle {
    width: 300px;
    height:40px;
    background:white;
    border-radius: 40px;
    text-align: center;
    color:#3A3A3A;
    line-height: 38px;
    cursor: pointer;
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.1);
}
.continueWithGoogle:hover {
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}
.continueWithApple:hover {
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}
.continueWithFacebook:hover {
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}

.blogHighlight {
    border-radius: 16px;
    background: #e3deff;
    padding:16px;
    text-align: center;
}

.blogTags {
    margin-bottom: 8px;
}

.blogTag {
    display: inline-block;
    background: #e3deff;
    margin-right: 4px;
    padding:4px 8px 4px 8px;
    border-radius: 8px;
}

.blogTag.green {
    background: #e3f9f3;
}
.blogTag.red {
    background: #ffe3e4;
}
.blogTag.orange {
    background:#ffd393;
}

.boldPurple {
    font-weight: 600;
    color:#6c5fc0;
}
.boldGreen {
font-weight: 600;
    color:#237355;
}
.boldRed {
font-weight: 600;
    color:#b01e1e;
}

.todayHeaderContainer {
    font-weight: 600;
    font-size: 20px;
    border-radius: 16px 16px 0px 0px;
    width:100%;
    text-align: center;
    display: inline-block;
}

  .impact-title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    color: #3A3A3A;
  }

  .impact-section {
    background: #f5f2ff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
  }

  .impact-section h5 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #3A3A3A;
  }

  .impact-section img {
    width: 100%;
    max-width: 900px;
    border-radius: 8px;
  }

  .impact-caption {
    font-size: 0.9rem;
    margin-top: 10px;
    color: #3A3A3A;
  }

  .impact-text {
    margin-bottom: 15px;
    background: #f5f2ff;
    border-radius: 12px;
    padding: 25px;
    line-height: 1.6;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
  }

  .impact-text h3 {
    color: #3A3A3A;
    margin-bottom: 15px;
  }

  .impact-text p {
    margin-bottom: 15px;
  }

  .impact-note {
    font-weight: bold;
    color: #3A3A3A;
    text-align: center;
    margin-top: 20px;
  }


.emphasizedText {
    border-radius: 16px;
    background:white;
    display: inline-block;
    padding: 16px;
    margin-bottom: 8px;
    width:100%;
}

.emphasizedText.purple {
    background: #d4ccff;
}
.emphasizedText.darkPurple {
    background: #6c5fc0;
    color:white;
}

.emphasizedText.yellow {
    background: #fff4e3;
}

.emphasizedText.green {
    background: #e3f9f3;
}

.emphasizedText.red {
    background: #ffe3e4;
}

.largeNumber {
    font-size:1.5rem;
    margin: 8px;
    font-weight: 600;
}

.largeNumber.red {
    color:#b01e1e;
}
.largeNumber.green {
    color:var(--bia-teal);
}

.feedbackLabel {
    margin-top: 8px;
    font-weight: 600;
    margin-bottom: 0px;
}

.blockNavTitleSeperator {
    display: inline-block;
}

.selectOneOptionContainer {
  background: white;
  border-radius: 10px;
  padding: 15px 16px;
  margin-top: 16px;
  margin-right: 1px;
  margin-bottom:1px;
  border: 3px solid transparent;
  cursor: pointer;
  border:1px solid #d9e1e4;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.selectOneOptionContainer.dark {
  background: #f1ebe5;
}

.selectOneOptionContainer:hover {
  background:#e5dffb;
}

.selectOneOptionContainer.selected {
  border:3px solid var(--bia-accent);
}

.selectOneOption {
  background: white;
  border-radius: 10px;
  padding: 15px 16px;
  margin-top: 16px;
  border: 3px solid transparent;
  cursor: pointer;
  margin-right:1px;
  margin-bottom:1px;
  border:1px solid #d9e1e4;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.selectOneOption:hover {
  background:#e5dffb;
}
.selectOneOptionText {
  margin: 0px;
  margin-left: 10px;
  font-weight:500;
  font-size: 18px;
  max-width:800px;
  cursor: pointer;
}
.selectOneOption.purple {
  border:1px solid #6c5fc0;
  background: #6c5fc0;
  color:white;
  font-weight: 600;
}
.selectOneOption.purple:hover {
  background:#6657c1;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.blockNavOption {
    display: inline-block;
    background: #FFFFFF;
    border-radius: 8px;
    margin: 4px;
    padding:8px;
    font-size: 1.25rem;
    cursor: pointer;
}
.blockNavOption:hover {
    background: #e3deff;
 }

.glossaryTitle {
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 110%;

/* or 15px */
letter-spacing: 0.04em;
text-transform: capitalize;
}

.welcomeLarge {
    font-weight: bold;
    margin-top: 16px;
    line-height: 1.2;
    margin-left:32px;margin-right:32px;font-size:32px;
}

.welcomeDescription {
    width:70%;
    margin: 0 auto;

    display: block;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 30px;

    font-style: normal;
    font-weight: 400;
    font-size: 18px;
}

.glossaryEntryTitle {
    margin-bottom:8px;
    padding: 16px;
    border-radius: 16px;
}

.glossaryTermContainer {
    display:inline-block;
    width:316px;
    max-width:100%; /* WCAG 1.4.10 reflow: shrink below 316px on narrow screens (keeps 316 on wide) */
    vertical-align: top;
    text-align: left;
}

.glossaryEntry {
    background: #C4C0BE;
    border: 2px solid #C4C0BE;
    margin-bottom:8px;
    padding: 16px;
    border-radius: 16px;
    width: 300px;
    display: inline-block;
    margin-right: 8px;
}

.glossaryEntry.unlocked {
    background: white;
}

.glossaryEntry.unlocked:hover {
    border: 2px solid var(--bia-accent);
    background: white;
}

.glossaryTerm {
    display: inline-block;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    cursor: help;
}

.bounce {
    animation: BounceAnimation 5s linear infinite;
}

@keyframes BounceAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.listCheck {
    margin:8px;
}

.accountSection {
    width:100%;
    background: white;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding:30px;
    margin-bottom:20px;
}

.welcomeImg.bigOnly {
    display: inline-block;
}

.bigTitle {
    font-weight: 500;
    font-size: 5rem;
    margin-bottom: 16px;

    background: #FFC876;
    background: linear-gradient(to top left, var(--bia-accent) 18%, var(--bia-teal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mediumTitle {
    font-weight: 500;
    font-size: 4rem;
    margin-bottom: 16px;
    margin-left:32px;margin-right:32px;

    background: #FFC876;
    background: linear-gradient(to top left, var(--bia-accent) 18%, var(--bia-teal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradientText {
    background: #FFC876;
    background: linear-gradient(to top left, var(--bia-accent) 18%, var(--bia-teal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biaSubtitle {
  background: #FFC876;
background: linear-gradient(to top left, var(--bia-accent) 18%, var(--bia-teal) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.biaTitle {
background: #FFC876;
background: linear-gradient(to top left, var(--bia-accent) 18%, var(--bia-teal) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}
.biaTitle.dark {
background: #3a3a3a;
background: linear-gradient(to top left, #3a3a3a 18%, #3a3a3a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}

.treatMyPhobiaTitle {
background: #FFC876;
background: linear-gradient(to top left, var(--bia-accent) 18%, var(--bia-teal) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}
.treatMyPhobiaTitle.dark {
background: #3a3a3a;
background: linear-gradient(to top left, #3a3a3a 18%, #3a3a3a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}

.gradientCircle {
    display:block;
    background: linear-gradient(239.92deg, rgba(227, 222, 255, 0.8) -0.64%, rgba(227, 249, 243, 0.8) 98.73%);
    filter: blur(35px);
    width: 529px;
    margin-left: -529px;
    margin-bottom: -531px;
    height: 531px;
    border-radius: 50%;
}

.gradientCircle.right {
    display:block;
}

.gradientBackground {
    background: linear-gradient(108.07deg, #E3DEFF -5.2%, #e3f9f3 103.39%);
}

.refSnippet {
    border-radius: 20px;
    padding: 28px 16px 24px;
    text-align: center;
    background: linear-gradient(108.07deg, #E3DEFF -5.2%, #e3f9f3 103.39%);
}
.refSnippet-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 18px 0;
    background: linear-gradient(to top left, var(--bia-accent) 18%, var(--bia-teal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.refSnippet-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    margin: 0 auto;
}
.refSnippet-stat {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 14px 22px;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(120, 105, 200, 0.08);
}
.refSnippet-num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: #6c5fc0;
    letter-spacing: -0.02em;
    min-width: 100px;
    text-align: left;
    flex-shrink: 0;
}
.refSnippet-stat.green .refSnippet-num { color: var(--bia-teal); }
.refSnippet-stat.blue .refSnippet-num { color: #6aaee0; }
.refSnippet-label {
    font-size: 0.95rem;
    color: #5a5a70;
    font-weight: 500;
    text-align: left;
    line-height: 1.25;
}
.refSnippet-highlights {
    margin: 18px auto 0;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 12px 18px 14px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(120, 105, 200, 0.08);
}
.refSnippet-hl-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: #5a5a70;
    margin: 4px 0 6px;
}
.refSnippet-hl {
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px dashed rgba(145, 135, 211, 0.25);
}
.refSnippet-hl:first-of-type { border-top: none; }
.refSnippet-hl-name {
    font-weight: 600;
    color: #2a2a40;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}
.refSnippet-hl-drop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
}
.refSnippet-hl-from { color: #6a6a85; }
.refSnippet-hl-to { color: var(--bia-teal); }
.refSnippet-hl-arrow {
    display: inline-flex;
    color: #6c5fc0;
    margin: 0 2px;
}

.chartSelectorWrapper {
    background: white;
    display: inline-block;
    border-radius: 16px;
    margin-bottom: 16px;
}

.chartSelector {
    margin: 4px;
    border-radius: 12px;
    display: inline-block;
    padding: 16px;
    cursor: pointer;
}
.chartSelector:hover {
    background: #574bb0;
    color:white;
}

.chartSelector.active {
    background:#6c5fc0;
    color: white;
}

.errorMessage {
    color:#b01e1e;
}

.discomfortStart {
    font-weight: 700;
    color:#b01e1e;
}

.discomfortGoal {
    font-weight: 700;
    color:var(--bia-teal);
}
.discomfortTarget {
    font-weight: 700;
    color:#6c5fc0;
}

.summaryListItem {
}

.summarySection {
    background: white;
    border-radius: 16px;
    padding:8px;
    margin-bottom: 8px;
}

.summarySection.clear {
  background: none;
}

.minorText {
    opacity: 0.7;
}

.loginStatusMessage {
    display: block;
    color:#b01e1e;
}

.passwordEye {
    display: block;
    position: relative;
    top:-28px;
    right:-300px;
    margin-top:-16px;
    margin-bottom:-16px;
    margin-right:-22px;
    margin-left:-22px;
    cursor: pointer;
    width:22px;
    height:16px;


    background-repeat: no-repeat;
}
/* WCAG 2.5.8 target size: expand the show/hide-password toggle's clickable area to
   >= 24px (30x24) without moving the eye icon. The ::after is part of the div for
   hit-testing, so clicks on it still fire the div's data-action. */
.passwordEye::after {
    content: "";
    position: absolute;
    top: -4px; right: -4px; bottom: -4px; left: -4px;
}
/* The shared .passwordEye is positioned with a brittle relative right:-300px offset
   tuned to a full-width .textInput. Inside .horizontalFieldContainer (account +
   community profile) the container shrinks to fit, so that offset overshoots and the
   eye lands outside the field. Anchor the eye to the container's right edge instead,
   vertically centred over the 64px input, which stays correct as the input reflows. */
.horizontalFieldContainer { position: relative; }
.horizontalFieldContainer .passwordEye {
    position: absolute;
    top: auto;
    left: auto;
    right: 18px;
    bottom: 29px;
    margin: 0;
}

.loginSubmitButton {
    border:none;
    width: 100%;
    height: 58px;
    background: #6c5fc0;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    margin-top: 8px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.loginSubmitButton:focus {
    background-color: #6c5fc0;
    border:2px solid blue;
}

.loginSubmitButton:hover {
    background-color: #574bb0;
}

.aboutScreenshot {
    max-width: 320px;
    margin:10px;
    border-radius: 16px;
}

.negativeMarginWhenSmall {
    margin-left:0px;
}

.screenshotContainer {
    padding-top: 16px;
    display: inline-block;
    vertical-align: top;
    border-radius: 16px;
    background: #E3DEFF;
    margin-bottom: 16px;
    font-weight: 600;
    margin-left: 2px;
    margin-right: 2px;
}

.redButton {
    border:none;
    background-color:#d32f2f; /* was #b01e1e (white text 2.71:1); #d32f2f passes AA (~5:1) */
    min-width: 200px;
    height: 48px;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    display: inline-block;
    text-align: center;
}
.redButton.small {
  min-width:150px;
}

.redButton:focus {
    background-color: #b71c1c;
}
.redButton:hover {
    background-color: #b71c1c;
}
.greenButton {
    border:none;
    background-color:#76d6ba;
    min-width: 200px;
    height: 48px;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    display: inline-block;
    text-align: center;
}

.greenButton:focus {
    background-color: var(--bia-teal-surface);
}
.greenButton:hover {
    background-color: var(--bia-teal-surface);
}

.seeMore {
  line-height: 120%;
  font-weight: 600;
  font-size: 16px;
  padding-top:8px;
  padding-bottom: 8px;
  color:#3A3A3A;
  cursor: pointer;
}
.seeMore:hover {
   color:#6c5fc0;
}

.exitButtonX {
    padding-top: 22px;
}

.exitButton {
    width: 64px;
    height: 64px;
    background: #3A3A3A;
    border-radius: 16px;
    align-items: center;
    padding: 0px;
    text-align:center;
    vertical-align: middle;
    cursor: pointer;
    z-index: 100;
    position: relative;
    color: #fff;
}

.exerciseToolbox {
    width: 64px;
    height: 64px;
    background: #3A3A3A;
    border-radius: 16px;
    align-items: center;
    padding: 0px;
    text-align:center;
    vertical-align: middle;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

.exitButton:hover {
    background: #574bb0;
}

.exitButtonSm {
    width: 32px;
    height: 32px;
    background: #3A3A3A;
    border-radius: 8px;
    align-items: center;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    z-index: 100;
    position: relative;
    display: inline-block;
    color: #fff;
}
.exitButtonSm .exitButtonX {
    padding-top: 6px;
}
.exitButtonSm:hover {
    background: #574bb0;
}

.cancelButton {
    background:none;
    color:#3A3A3A;
    border:none;
    min-width: 200px;
    height: 48px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    display: inline-block;
}

.cancelButton.small {
  width:150px;
  min-width: 150px;
  margin:4px;
}

.cancelButton:hover {
    background: #4e4e4e;
    color:white;
}

.cancelButton:disabled {
    background:#4e4e4e;
    color:#FFFFFF;
}

.cancelButton:disabled:hover {
    background-color: #4e4e4e;
}

.outlineButton {
  background:white;
    border:none;
    min-width: 200px;
    height: 48px;
    border: 1px solid var(--bia-accent);
    color:#3A3A3A;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    display: inline-block;
}
.outlineButton.small {
  width:150px;
  min-width: 150px;
  margin:4px;
}
.outlineButton.wide {
  max-width:350px;
  width:100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-top:4px;
  margin-bottom:4px;
  height:56px;
  border-radius: 16px;
}
.outlineButton.goal {
  max-width:335px;
  width:100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-top:4px;
  margin-bottom:4px;
  height:56px;
  border-radius: 16px;
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   25% { transform: rotate(0deg); }
   50% { transform: rotate(10deg); }
   75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.wiggle {
  animation: wiggle 2.5s infinite;
}

.purpleGlow {
  box-shadow: rgba(227, 222, 255, 0.8) 0 0 90px 33px;
}

.outlineButton:hover {
    background: #574bb0;
    color:#FFFFFF;
}

.footerButton {
    border:none;
    padding:8px;
    height: 48px;
    background: #6c5fc0;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 32px;
    cursor: pointer;
    display: inline-block;
}
.footerButton:hover {
    background-color: #574bb0;
}

.footerButton:focus {
    background-color: #6c5fc0;
}

.confettiCanvas {
    position: absolute;
    top: 0;
    left: 0;
}

.searchButton {
    border:none;
    height: 64px;
    width: 64px;
    background: #6c5fc0;
    border-radius: 0 10px 10px 0;
    color:#FFFFFF;
    cursor: pointer;
}

.standardButton {
    border: none;
    min-width: 200px;
    min-height: 48px;
    /* Darkened from the old light lavender to #6c5fc0 (--bia-accent) so white
       text passes WCAG AA contrast (was 3.17:1, now ~5.0:1). */
    background: #6c5fc0;
    border-radius: 10px;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style: normal;
    line-height: 1.2;
    cursor: pointer;
    margin: 8px;
    display: inline-block;
    position: relative;
    z-index: 100;
    padding: 12px 20px;
    text-align: center; 
    vertical-align: middle;
    box-sizing: border-box;
}
.standardButton.small {
  width:150px;
  min-width: 150px;
  margin:4px;
}
.standardButton.wide {
  max-width:350px;
  height:56px;
  width:100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-top:4px;
  margin-bottom:4px;
  border-radius: 16px;
}
/* Cancel-flow therapist deflection: these .wide buttons are anchors whose content
   is icon+label (find a therapist) or text only (use Bia with your therapist).
   inline-block does not vertically center content inside the fixed 56px height, so
   flex-center it. Scoped to #therapistConnect to avoid changing global button layout. */
#therapistConnect .standardButton.wide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.standardButton.goal {
  max-width: 335px;
  min-height: 56px;
  width: 100%;
  margin: 4px 0;
  border-radius: 16px;
}
.standardButton.long {
    border:none;
    min-width: 200px;
    height: 48px;
    background: #6c5fc0;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: normal;
    cursor: pointer;
    margin:8px;
    display: inline-block;
    position: relative;
    z-index: 100;
    white-space: normal;
    word-wrap: break-word; 
}

.standardButton.progress {
    position: relative;
}

.standardButton.inline {
    display: inline-block;
    width: 100px
}

.standardButton.disabled {
    background-color: #4e4e4e;
}

.standardButton.disabled:hover {
    background-color: #4e4e4e;
}

.standardButton:disabled {
    background-color: #4e4e4e;
}

.standardButton:disabled:hover {
    background-color: #4e4e4e;
}

.standardButton:hover {
    background-color:#574bb0;
}

.standardButton:focus {
    background-color: #6c5fc0;
}

.journeyWelcome {
    text-align: center;
    padding-top:50px;
    padding-bottom: 0px;
}

.phaseTitle {
    line-height: 1.1;
    padding-top: 50px;
    margin-bottom: 8px;
    display: block;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
}

.complete {
    background:#e3f9f3;
}

.overlayTitle {
    text-align: center;
    font-size: 25px;
    margin-bottom: 16px;
    font-weight: bold;
}

.severityLabel {
  font-weight: 600;
  padding:5px;
  border-radius: 5px;
}
.severityLabel.little {
  background:#e5f8f1;
}
.severityLabel.mild {
  background:#f4f5e9;
}
.severityLabel.moderate {
  background:#fff3e3;
}
.severityLabel.severe {
  background:#ffede3;
}
.severityLabel.extreme {
  background:#ffe6e3;
}

.phaseDescription {
    width:70%;
    margin: 0 auto;

    display: block;
    text-align: center;
    padding-bottom: 30px;

    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
}
.phaseDescription.short {
    padding-bottom: 10px;
}

.exerciseHistory {
    padding-top:4px;
}

.exerciseHistoryLink {
    color: #6c5fc0;
    padding-top: 6px;
}

.exerciseHistoryLink:hover {
    color: #6c5fc0;
}

.exerciseImgContainer {
    width:217px;
    height:123px;
    margin-bottom: 2px;
    margin-top:12px;
}

.activityImgContainer {
    width:123px;
    height:123px;
    margin-bottom: 2px;
    margin-top:12px;
}
.exerciseStatusWrapper {
    border-radius: 10px;
    position: relative;
    width: 52px;
    height: 52px;
    left: 110px;
    bottom:10px;
    margin-left:-52px;
    margin-bottom:-52px;
    margin-top:-8px;
}

.startJourneyPrompt {
    font-weight: 400;
    font-size: 14px;
    color: #3A3A3A;
}

.statusPopup {
  box-shadow: 0px 4px 15px rgba(0,0,0, 0.3);
}

.statusPopup:after {
  content:"";
  position:absolute;
  bottom:-12px; /* value = - border-top-width - border-bottom-width */
  left:187px; /* controls horizontal position */
  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#FFF transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.statusPopup.exerciseStatus-complete:after {
  border-color:#E3F9F3 transparent;
}
.statusPopup.exerciseStatus-progress:after {
  border-color:#FFF4E3 transparent;
}
.statusPopup.exerciseStatus-locked:after {
  border-color:#E5DFFB transparent;
}
.statusPopup.exerciseStatus-skipPossible:after {
  border-color:#E5DFFB transparent;
}
.statusPopup.exerciseStatus-skipped:after {
  border-color:#E3F9F3 transparent;
}
.statusPopup.exerciseStatus-improve:after {
  border-color:#FFE3E4 transparent;
}
.statusPopup.exerciseStatus-scheduled:after {
  border-color:#E5DFFB transparent;
}

.exerciseStatus {
    background: #FFFFFF;
    margin-top:8px;
    margin-right:8px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 10px;
    position: relative;
    margin-left:-44px;
    margin-bottom:-44px;
    left:22px;
    top:8px;
}
.exerciseStatus.complete {
    background: #E3F9F3;
    background-repeat:no-repeat;
    background-position: center center;
}
.exerciseStatus.scheduled {
    background: #E5DFFB;
    background-repeat:no-repeat;
    background-position: center center;
}

.exerciseStatus.skipped {
    background: #E3F9F3;
    background-repeat:no-repeat;
    background-position: center center;
}

.exerciseStatus.locked {
    background: #E5DFFB;
    background-repeat:no-repeat;
    background-position: center center;
}

.exerciseStatus.skipPossible {
    background: #E5DFFB;
    background-repeat:no-repeat;
    background-position: center center;
}

.exerciseStatus.progress {
    background: #FFF4E3;
    background-repeat:no-repeat;
    background-position: center center;
}

.exerciseStatus.improve {
    background: #FFE3E4;
    background-repeat:no-repeat;
    background-position: center center;
}

.activityImg {
    width:116px;
    height:116px;
}
.exerciseImg {
    width:125px;
    height:116px;
}
.exerciseImg.complete {
  background: none;
}
.exerciseImg.locked {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

.exerciseTitle {
    font-weight: 700;
    font-size: 24px;
    padding: 2px;
    padding-bottom: 0px;
}

.exerciseTitle.long {
    font-size: 18px;
    line-height: 23px;
    font-weight: 700;
}

.exerciseTitle.flipped {
    font-size:18px;
    line-height: 23px;
    padding-top:2px;
}

.accountSettingTitle {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 120%;
}

.horizontalFieldContainer {
    display: inline-block;
    margin-top: 15px;
}

.exerciseDescription {
    font-weight: 400;
    font-size: 14px;
    padding: 1px;
    padding-top: 0px;
    margin-left:3px;
    margin-right:3px;
    line-height: 1.3;
}

.exerciseDescription.overflow {
    overflow-y:scroll;
    overflow-x:hidden;
    scrollbar-width:none;
    text-overflow:ellipsis;
}

.exerciseDescription.short {
    padding-top: 8px;
    font-size: 18px;
}

.wrapper {
    width:100%;
    background: white;
    border-radius: 16px;
    padding:30px;
    margin-bottom:20px;
}
.beigeWrapper {
    width:100%;
    background: white;
    border-radius: 16px;
    padding:30px;
    margin-bottom:20px;
}
.resourceContainer {
    width:100%;
    border-radius: 16px;
    background:#ebe8ff;
    padding:0px;
    margin-bottom:20px;
}

.exerciseLockMessage {
    font-weight: 400;
    font-size: 14px;
    padding: 2px;
    margin-left:3px;
    margin-right:3px;
    background: #E5DFFB;
    border-radius: 10px;
    min-height: 48px;
}

.exercisesContainer2 {
    width:90%;
    margin-left: auto;
    margin-right: auto;
}

.welcomeImg.smallOnly {
    display: none;
}
.smallOnly {
  display: none;
}
.smallOnlyInline {
  display: none;
}


.wideOnly {
  display: block;
}
.wideOnlyInline {
  display: inline-block;
}

.contentPreview {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    display: inline-block;
    margin:2px;
    padding:4px;
    background:white;
    border-radius: 8px;
}

.wideVideoContainer {
    display:block;
}
.narrowVideoContainer {
    display:none;
}
.smallScrollingNav {
    display: none;
}

.exerciseSquare {
    vertical-align: top;
    white-space: normal;
    display: inline-block;
    margin:5px;
    width:221px;
    height:221px;
    background: #FFFFFF;
    border-radius: 10.8235px;
    padding: 8px 2px 8px 2px;
}

.exerciseSquare:hover {
  background: #FFFFFF;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.resourceCard {
  cursor: pointer;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 04px8pxrgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 8px;
  max-width: 300px;
  min-width: 300px;
  min-height: 350px;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  white-space: normal;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.resourceCard.locked {
  background:#a7a7a7;
}

.resourceCard:hover {
  transform: translateY(-5px);
  box-shadow: 08px 8px rgba(145, 135, 211, 0.8);
}

.glossaryCard {
  cursor: pointer;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 04px8pxrgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 8px;
  /* WCAG 1.4.10 reflow: stays 300px on desktop but shrinks (accounting for the 16px of
     horizontal margin) so the card + margin never exceeds a 320px viewport. */
  max-width: calc(100% - 16px);
  min-width: min(300px, calc(100% - 16px));
  min-height: 200px;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  white-space: normal;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glossaryCard.locked {
  background:#a7a7a7;
}

.glossaryCard:hover {
  transform: translateY(-5px);
  box-shadow: 08px 8px rgba(145, 135, 211, 0.8);
}

.resourceTitle {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
}

.resourceType {
  font-size: 14px;
  color: #595959;
  margin-bottom: 4px;
}
.resourceImage {
  text-align: center;
}
.resourceImage img {
  border-radius: 4px;
  max-height: 100px;
  width:50%;
  height: auto;
  object-fit: contain;
  margin-bottom: 8px;
}

.welcomeBody {
  
}

.resourceDescription {
  font-size: 16px;
  color: #3d3d3d;
  margin-bottom: 20px;
}


.clickableSpan {
    cursor: pointer;
}

.phaseEnd {
    padding-top:80px;
}
.phaseEnd.small {
    padding-top:10px;
}
.phaseEnd.medium {
    padding-top:30px;
}


.journeyContainer {
    background: linear-gradient(160deg, #d4ccff, #d5f6ed);
    border-radius: 26px;
}

.horizontalScrollContainer {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.horizontalScrollContainer > * {
  flex-shrink: 0;
}
.horizontalScrollContainerInner {
  display: flex;
  gap: 2px;
  margin-inline: auto;
}

.horizontalScrollIndicatorContainer {
    text-align: center;
    height: 15px;
    margin-top: 20px;
}
.horizontalScrollIndicatorContainer.smallOnly {
    display:none;
}


.floatingFooterContainer {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: 0px;
    line-height: 30px;
    z-index:10;
}

.floatingFooterContainerSmall {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: 8px;
    line-height: 30px;
    z-index:10;
}

.floatingFooterWide {
    width:100%;
    margin: auto;
    min-height: 64px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    margin-bottom: 20px;
    text-align: center;
}

.floatingFooterSmall {
    margin-bottom: 30px;
    width:100%;
}

.smallFloatingFooterContent {
    background: rgba(255, 255, 255, 0);
    border-radius: 16px;
    padding-top:10px;
    padding-bottom:10px;
    overflow:hidden;
    max-height:0px;
    transition: none;
}

.smallFloatingFooterContent.open {
    background: rgba(255, 255, 255, 1);
    max-height:600px;
    transition: max-height 0.25s ease-in;
}

.smallFloatingFooterClose {
    background: #6c5fc0;
    border-radius: 16px;
    text-align: center;
    color:#FFFFFF;
    padding:10px;
    margin-top:8px;
    height: 56px;
    cursor: pointer;
}

.smallFloatingFooterClose:hover {
    background-color: #574bb0;
}

.floatingFooterSmallIcon {
    display:inline-block;
    margin-right: 10%;
}

.floatingFooterSmallExpandIcon {
    display:inline-block;
    position: absolute;
    top: 40px;
    right: 15px;
}

.floatingFooterSmallLabel {
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    display:inline-block;
    width:100%;
    font-weight: 600;
    font-size: 16px;
    padding-top:15px;
    padding-bottom:10px;
    padding-left:20px;
    line-height: 120%;
    height: 56px;
}

.carouselQuote {
  padding-top: 8px;
  height:80%;
}
.carouselQuoteInner {
display: flex;
align-items: center;
justify-content: center;
height:100%;
}

.smallFooterPhaseTitle {
    color: #3A3A3A;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    padding:8px;
    margin-bottom:-1px;
    margin-top:-1px;
    cursor: pointer;
}

.smallFooterPhaseTitle:hover {
    color: #6c5fc0;
}

.smallFooterPhaseTitle.active {
    background-color: #E5DFFB;
    color: #6c5fc0;
}

.smallFooterPhaseTitle.last {
    margin-bottom:-10px;
    border-radius: 0px 0px 16px 16px;
}

.smallFooterPhaseTitle.firstShowing {
    margin-top:-10px;
    border-radius: 16px 16px 0px 0px;
}

.footerPhaseTitle {
    vertical-align: middle;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    padding:5px;
    margin-top: 13px;
    color:#3A3A3A;
    /*transition: background-color 1s, color 1s;*/
    border-radius: 10px;
}

.footerPhaseTitle:hover {
    color: #6c5fc0;
    transition: none;
}

.footerPhaseTitle.active {
    background-color: #6c5fc0;
    border-radius: 10px;
    color:#FFFFFF;
} 

.footerPhaseTitleSeperator {
    vertical-align: middle;
    font-size: 16px;
    display: inline-block;
    margin-top: 13px;
    color: #4e4e4e;
}

.footerTitle {
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 500;
}

.footerTitle.dark {
  color: #3A3A3A;
}

.footerLink {
    color: #FFFFFF;
    opacity: 0.7;
}

.footerLink.dark {
  color: #3A3A3A;
}

/* --- Bia footer (redesign) ---------------------------------------------
   Soft lavender panel, flat top edge (no rounded corners). All text/accents
   run through the --bia-* tokens so they pass WCAG AA on the panel and
   auto-swap in high-contrast mode. Note: the panel is darker than white, so
   the mid purple (--bia-accent, ~4.3:1 here) is NOT used for text; the accent
   role is played by --bia-link (~5.4:1 on the lighter #E3ECF3 gradient stop).
   No text-transform:uppercase (house rule) and no font override (inherits the
   site font). Two layouts share one link source via Jinja macros: .biaFooterWide
   (>=769px, columns) and .biaFooterNarrow (<=768px, accordions). */
.biaFooter {
    background: linear-gradient(160deg, #EAE4F7 0%, #E3ECF3 100%);
    padding: 52px 32px 30px;
    color: var(--bia-fg);
    margin-top: 40px;
}
/* Bare variant (provider/signed-in footer): no lavender panel, inherits the
   page background; a top rule keeps it separated from the page content. */
.biaFooterBare {
    background: none;
    border-top: 1px solid rgba(108, 92, 231, 0.18);
}
.biaFooterInner {
    max-width: 1080px;
    margin: 0 auto;
}
.biaFooterLang {
    text-align: right;
    min-height: 26px;
    margin-bottom: 20px;
}
.biaFooter .navLanguageSelect {
    margin-right: 8px;
    height: 26px;
}
.biaFooterNarrow { display: none; }

/* Shared brand block */
.biaFooterWordmark {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    width: fit-content;
    color: var(--bia-link); /* fallback where background-clip is unsupported */
    background: linear-gradient(105deg, #3f9d84, #5b4fb8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.biaFooterTag {
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--bia-fg);
    margin: 12px 0 0;
    font-weight: 500;
    max-width: 34ch;
}

/* Shared link lists */
.biaFooterColTitle {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--bia-link);
    margin: 0 0 10px;
}
.biaFooterList {
    list-style: none;
    margin: 0;
    padding: 0;
}
.biaFooterLink {
    display: inline-block;
    padding: 6px 0;
    font-size: 0.9375rem;
    color: var(--bia-fg);
    text-decoration: none;
    transition: color 0.18s ease;
}
.biaFooterLink:hover {
    color: var(--bia-link);
    text-decoration: underline;
}
.biaFooterLink:focus-visible {
    outline: 2px solid var(--bia-focus);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Shared: outlined "For Therapists" control */
.biaFooterProvider {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 13px;
    border: 1px solid var(--bia-link);
    color: var(--bia-link);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.biaFooterProvider:hover,
.biaFooterProvider:focus-visible {
    background: var(--bia-link);
    color: var(--bia-on-accent);
    border-color: var(--bia-link);
}
.biaFooterProvider:focus-visible {
    outline: 2px solid var(--bia-focus);
    outline-offset: 3px;
}
.biaFooterProvider svg { flex: none; }

/* Shared: white app-store chips (Apple + Google Play design marks) */
.biaStoreChip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    min-height: 52px;
    border-radius: 13px;
    background: #ffffff;
    border: 1px solid rgba(108, 92, 231, 0.18);
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.biaStoreChip:hover { border-color: var(--bia-link); }
.biaStoreChip:focus-visible {
    outline: 2px solid var(--bia-focus);
    outline-offset: 3px;
}
.biaStoreChip svg {
    flex: none;
    width: 24px;
    height: 24px;
}
.biaStoreChipText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}
.biaStoreChipSmall {
    font-size: 0.6875rem;
    color: var(--bia-muted);
    letter-spacing: 0.01em;
}
.biaStoreChipName {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--bia-fg);
}

/* Shared: social row (original brand icons, recoloured to a muted tone so the
   white PNGs read on the light panel) */
.biaFooterSocial {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.biaFooterSocial a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    border-radius: 10px;
}
.biaFooterSocial a:focus-visible {
    outline: 2px solid var(--bia-focus);
    outline-offset: 2px;
}
.biaFooterSocialIcon {
    width: 22px;
    height: 22px;
    display: block;
    color: var(--bia-muted);
    transition: color 0.18s ease;
}
.biaFooterSocial a:hover .biaFooterSocialIcon,
.biaFooterSocial a:focus-visible .biaFooterSocialIcon {
    color: var(--bia-link);
}

/* Shared: copyright + support email */
.biaFooterCopy {
    font-size: 0.84375rem;
    color: var(--bia-muted);
}
.biaFooterSupportEmail {
    color: var(--bia-link);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.biaFooterSupportEmail:hover { text-decoration: underline; }
.biaFooterSupportEmail:focus-visible {
    outline: 2px solid var(--bia-focus);
    outline-offset: 3px;
    border-radius: 6px;
}
.biaFooterBottomInfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}
.biaFooterSupportEmailCenter {
    display: block;
    text-align: center;
    margin-top: 14px;
}

/* ---- Wide layout ---- */
.biaFooterTop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(108, 92, 231, 0.18);
}
.biaFooterCols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 32px;
    padding: 38px 0;
}
/* Provider (signed-in) footer version tag: same muted weight as the copyright,
   set apart with a leading separator on wide layouts. */
.biaFooterVersion::before {
    content: "\00b7";
    margin-right: 6px;
    color: var(--bia-muted);
}
.biaFooterColStack {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.biaFooterStores {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.biaFooterBottom {
    padding-top: 22px;
    border-top: 1px solid rgba(108, 92, 231, 0.18);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}
/* Legal links live on the bottom bar (freeing the last column for the store
   chips). Horizontal inline list, wraps on narrow desktop widths. */
.biaFooterInlineList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.biaFooterInlineList .biaFooterLink { padding: 2px 0; }
/* Legal owns the right side of the bottom bar on its own. */
.biaFooterLegalRow { margin-left: auto; }
/* Top-right promo cluster: "For Therapists" CTA with the app-store chips
   stacked beneath it, right-aligned, so the store buttons keep their original
   shape and the four link columns below stay balanced. */
.biaFooterTopPromo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
/* Social icons under the brand tagline; negative margin offsets the icons'
   internal padding so they line up flush with the wordmark. */
.biaFooterBrandSocial {
    margin-top: 12px;
    margin-left: -8px;
}

/* ---- Narrow layout ---- */
.biaFooterActions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}
.biaFooterChipRow {
    display: flex;
    gap: 10px;
}
.biaFooterChipRow .biaStoreChip {
    flex: 1;
    justify-content: center;
    min-height: 52px;
}
.biaFooterNarrow .biaFooterProvider {
    width: 100%;
    justify-content: center;
    min-height: 48px;
}
.biaFooterA11yLink {
    display: block;
    text-align: center;
    margin-top: 16px;
    padding: 8px 0;
    color: var(--bia-link);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}
.biaFooterA11yLink:hover { text-decoration: underline; }
.biaFooterA11yLink:focus-visible {
    outline: 2px solid var(--bia-focus);
    outline-offset: 3px;
    border-radius: 6px;
}
.biaFooterAccordion {
    margin-top: 22px;
    border-top: 1px solid rgba(108, 92, 231, 0.16);
}
.biaFooterAccordion details {
    border-bottom: 1px solid rgba(108, 92, 231, 0.16);
}
.biaFooterAccordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    color: var(--bia-link);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.biaFooterAccordion summary::-webkit-details-marker { display: none; }
.biaFooterAccordion summary .biaFooterColTitle { margin: 0; }
.biaFooterAccordion summary:focus-visible {
    outline: 2px solid var(--bia-focus);
    outline-offset: 2px;
    border-radius: 8px;
}
.biaFooterChev { transition: transform 0.22s ease; }
.biaFooterAccordion details[open] .biaFooterChev { transform: rotate(180deg); }
.biaFooterAccordion .biaFooterList { padding: 0 0 12px; }
.biaFooterNarrow .biaFooterLink {
    padding: 10px 0;
    font-size: 1rem;
}
.biaFooterSocialCenter {
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}
.biaFooterNarrow .biaFooterSocialIcon { width: 22px; }
.biaFooterCopyCenter {
    text-align: center;
    margin-top: 6px;
}

@media (max-width: 768px) {
    .biaFooter { padding: 36px 20px 26px; }
    .biaFooterWide { display: none; }
    .biaFooterNarrow { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .biaFooterChev,
    .biaFooterSocialIcon,
    .biaFooterLink,
    .biaFooterProvider,
    .biaStoreChip { transition: none; }
}

.exerciseStartButton {
    width:88%;
    margin-top:auto;
    background: #6c5fc0;
    border-radius: 10px;
    height: 48px;
    color:#FFFFFF;
    font-weight: 600;
    font-size: 18px;
    line-height: 48px;
    cursor: pointer;
}

.exerciseStartButton:hover {
    background-color: #574bb0;
}

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    cursor: pointer;
}
.overlay.show {
	display:block;
}

.overlay.fill {
  background-color: #e3deff;
}

.journeyOverlayContent {
    margin-left:16px;
    margin-right:16px;
}

.loginOverlay {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 415px;
    background-color:#e3deff;
    padding: 30px 40px 30px 40px;
    border-radius: 26px;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 200;
}
.journeyOverlay {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 415px;
    background-color:#e3deff;
    padding: 16px 16px 10px;
    border-radius: 26px;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 200;
}
.alertOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box; 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
  background: rgba(0, 0, 0, 0.4);
}

.alertOverlayContent {
  background-color: #e3deff;
  border-radius: 26px;
  width: 100%;
  max-width: 415px;
  max-height: 100%;
  overflow: auto;
  padding: 30px 40px;
  box-sizing: border-box;
}

.exitWithoutSavingOverlay {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 415px;
    background-color:white;
    padding: 0px 40px 40px;
    border-radius: 26px;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 200;
}
 
.loginTitle {
    font-weight: 600;
    font-size: 32px;
    text-align: center;
}

.loginSwitch {
    text-align: center;
    color: #4e4e4e;
    font-weight: 400;
    font-size: 17px;
}

.purpleLink {
    color:#5b4fb0;
    font-weight: 600;
    cursor: pointer;
}

.purpleLink:hover {
    color:#6c5fc0;
    text-decoration: underline;
}

.redLink {
    color:#b01e1e;
    cursor: pointer;
}

.redLink:hover {
    color:#f0434c;
}

.emailInput {
    width: 335px;
    height: 64px;
    background: #FFFFFF;
    border-radius: 16px;
    align-items: center;
    margin:5px;
    margin-top:8px;
    padding:16px;
    border:0;
    outline:0;
}

.answerOptionContainer {
  border-radius: 10px;
  margin-top: 8px;
  background: #f7f6fe;
  margin-right:8px;
  padding-left:8px;
  padding-right:8px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  vertical-align: top;
  text-align: center;
}
.answerOptionContainer.qTag {
  background:none;
  border:1px solid #3A3A3A;
}

.textInput.short {
    width:250px;
}
.textInput.search {
    width:250px;
    border-radius: 16px 0px 0px 16px;
    margin-right:0px;
}

.numberInput {
    width: 120px;
    height: 64px;
    background: #FFFFFF;
    border-radius: 16px;
    align-items: center;
    margin:5px;
    font-size: 2rem;
    padding:16px;
    border:0;
    outline:0;
    border: 1px solid var(--bia-accent);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

.textInput {
    /* WCAG 1.4.10 reflow: was a fixed width:335px that overflowed a 320px viewport.
       Fluid up to 335px so it shrinks to fit narrow screens (box-sizing:border-box is
       global via bootstrap, so padding is already included in the width). */
    width: 100%;
    max-width: 335px;
    height: 64px;
    background: #FFFFFF;
    border-radius: 16px;
    align-items: center;
    margin:5px;
    padding:16px;
    border:0;
    outline:0;
    border: 1px solid #6c5fc0;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.textInput.wide {
  margin-left: 0px;
  margin-right: 0px;
  max-width:350px;
  width:100%;
}
.textInput.goal {
  margin-left: 0px;
  margin-right: 0px;
  max-width:335px;
  width:100%;
}

.textInput.disabled {
    background: #C4C0BE;
}

.textInput:focus {
    border:1px solid #6c5fc0;
    /* WCAG 2.4.7: the old :focus border matched the default border, so focus was invisible.
       Add a distinct ring (#5f52b0 is 5.8:1 on white, meeting the 3:1 focus-indicator minimum). */
    outline: 2px solid #5f52b0;
    outline-offset: 1px;
}

.textInput:read-only {
    background-color: #C4C0BE;
}

.emailInput:read-only {
    background-color: #C4C0BE;
}

.emailInput:focus {
    border:1px solid #6c5fc0;
}

.passwordInput {
    width: 335px;
    height: 64px;
    background: #FFFFFF;
    border-radius: 16px;
    align-items: center;
    margin:5px;
    padding:16px;
    border:0;
    outline:0;
}

.passwordInput:focus {
    border:1px solid #6c5fc0;
}


.rememberMeCheckbox {
    margin:5px;
}

.purpleCheckbox:checked {
    accent-color: #6c5fc0;
}

.rememberMeCheckbox:checked {
    accent-color: #6c5fc0;
}

.rememberMeLabel {
    color: #4e4e4e;
    font-weight: 500;
    font-size: 14px;

}

.forgotPasswordLink {
    float:right;
    color: #5b4fb0;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0; /* WCAG 2.5.8 target size: ~24px tall clickable area */
}

.forgotPasswordLinkCenter {
  color: #5b4fb0;
  margin:8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.forgotPasswordLinkCenter:hover {
    color: #6c5fc0;
}

.forgotPasswordLink:hover {
    color: #6c5fc0;
}

.pageTitle {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 110%;
    color: #4e4e4e;
    letter-spacing: 0.04em;
}

input.bigCheckbox {
  margin:10px;
  margin-left: 5px;
  transform: scale(1.5);
  accent-color: var(--bia-teal);
}

.howItWorksList {
    padding-top: 20px;
    padding-left: 0px;
}
.howItWorksList li {
    text-align: left;
    min-width: min(302px, 100%); /* WCAG 1.4.10 reflow: cap at the container width on narrow screens */
    max-width: 650px;
    background: white;
    list-style-position: inside;
    list-style-type: none;
    font-weight: 500;
    border-radius: 8px;
    padding:8px;
    margin-bottom:8px;
    font-size: 1.25rem;
}

.languageOption {
    border:1px solid var(--bia-accent);
    height: 36px;
    padding: 4px;
    border-radius: 10px;
    color:#3A3A3A;
    background: none;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 28px;
    cursor: pointer;
    margin:4px;
    display: inline-block;
}

.languageOption.selected {
  background: #6c5fc0;
  color:white;
}

.languageOption.disabled {
    background-color: #4e4e4e;
}

.languageOption.disabled:hover {
    background-color: #4e4e4e;
}

.languageOption:disabled {
    background-color: #4e4e4e;
}

.languageOption:disabled:hover {
    background-color: #4e4e4e;
}

.languageOption:hover {
    background-color: #574bb0;
    color:white;
}

.languageOption:focus {
    background-color: #6c5fc0;
}

.resourceFilter {
  color:#5b4fb8;
  display: inline-block;
  border: 1px solid #6c5fc0;
  border-radius: 8px;
  padding:4px;
  margin: 4px;
  cursor: pointer;
}
.resourceFilter.purple {
  color:#6c5fc0;
  border: 1px solid #6c5fc0;
}
.resourceFilter.black {
  color:#3A3A3A;
  border: 1px solid #3A3A3A;
}
.resourceFilter.black.show {
  background: #3A3A3A;
  color:white;
}
.resourceFilter.purple.show {
  background: #6c5fc0;
  color:white;
}
.resourceFilter.show {
  background: #6c5fc0;
  color:white;
}
.resourceFilter.show:hover {
  background: #3a3a3a;
  border: 1px solid #3a3a3a;
  color:white;
}

.resourceFilter:hover {
  background: #6c5fc0;
  color:white;
}
.resourceFilter.black:hover {
  background: #3A3A3A;
  color:white;
}
.resourceFilter.purple:hover {
  background: #6c5fc0;
  color:white;
}
.resourceFilter.purple.show:hover {
  background: #3a3a3a;
  border: 1px solid #3a3a3a;
  color:white;
}

.landingButtonContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;

  margin-top: 28px;
}

.landingButton {
  color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size: 17px;
  font-weight: 600;
  border-radius: 14px;
  padding: 14px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width:280px;
  display: inline-block;
  margin-bottom: 16px;
}
.landingButton.wide {
  width:320px;
}

.landingButton:hover {
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* Secondary outline button */
.landingButtonSecondary {
  background: white;
  color: #2d2d2d;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size: 17px;
  font-weight: 600;
  border-radius: 14px;
  padding: 14px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  width:280px;
  display: inline-block;
  margin-bottom: 16px;
}
.landingButtonSecondary.wide {
  width:320px;
}

.landingButtonSecondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
}


.waveBackgroundLayered2 {
  background: white;
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/waves3.png");
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/waves3.png"), linear-gradient(290deg, #FFFFFF,#f7f5ff);
}
.waveBackgroundLayered {
  background: white;
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/wave_background_layered_2.png");
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/wave_background_layered_2.png"), linear-gradient(160deg, #fcfbff, #faf9ff);
}
.greenWaveBackground {
  background: white;
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/green_wave_background1.png");
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/green_wave_background1.png"), linear-gradient(160deg, #fcfbff, #faf9ff);;
}
.greenWaveBackground2 {
  background: white;
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/green_wave_background.png");
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/green_wave_background.png"), linear-gradient(160deg, #fcfbff, #faf9ff);
}
.background4 {
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/4.png");
}

@media (min-width: 1920px) {
.waveBackgroundLayered {
  background-repeat: repeat-y;
  width:100%;
  background-size:     cover;  
}
.waveBackgroundLayered2 {
  background-repeat: repeat-y;
  width:100%;
  background-size:     cover;  
}
.greenWaveBackground {
  background-repeat: repeat-y;
  width:100%;
  background-size:     cover;  
}

}

.toggleWrapper {
  display: inline-block;
}

.navIcon {
  height:60px;
}
.navIconContainer {
text-align: center; 
padding-right: 8px;
}

@media only screen and (max-width: 998px) {
  .navLink {
   padding-left: 13px;
   padding-right: 13px; 
  }

}

@media only screen and (max-width: 768px) {
  .expandingSmallContainer {
    margin-left:-8px;
    margin-right:-8px;
  }
  .welcomeTitle2 {
  font-size: 2.25rem;
  text-align: center;
}
        .partner-logos {
            justify-content: center !important;
            gap: 40px !important;
        }
        .presentation-badge {
            align-items: center !important;
            text-align: center !important;
            border-left: none !important;
            padding-left: 0 !important;
        }
.smallScrollingContainer {
	max-height:500px;
	overflow-y:auto;
}
.welcomeTitle3 {
  text-align: center;
}
  .navLink {
   padding-left: 10px;
   padding-right: 10px; 
  }
    .wideBreak {
        display: none;
    }
    .journeyWelcome {
        padding-top: 25px;
        padding-bottom: 0px;
    }

    .wideVideoContainer {
        display: none;
    }
    .narrowVideoContainer {
        display:block;
    }
    .smallScrollingNav {
        display: block;
    }

    .examplePillContainer {
        white-space: nowrap;
        overflow-x:auto;
        margin-bottom: 0px;
    }

    .beigeWrapper.narrowSmall {
        padding:15px;
    }

    .welcomeImg.bigOnly {
        display: none;
    }
    .welcomeImg.smallOnly {
        display: block;
    }

    .exercisesContainer2 {
        width:100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 20px;
    }

    /* The empty-state message lives inside the nowrap scroll container; let it
       wrap normally so it doesn't force horizontal scroll on mobile. */
    .exercisesContainer2 .phaseDescription {
        white-space: normal;
    }

    .accountSection {
        padding-left: 8px;
    filter: none;
    border-radius: 0px;

    }

    .phaseDescription {
        width:90%;
    }

    .completeIntro {
        width:90%;
    }

    .phaseTitle {
        font-size: 45px;
    }

    .journeyOverlay {
        padding: 32px 32px 10px;
    }

    .gradientCircle.right {
        display: none;
    }

    .negativeMarginWhenSmall {
        margin-left: -28px;
    }

    .emailInput {
    width: 310px;
    margin-right: 0px;
  }
  .passwordInput {
    width: 310px;
    margin-right: 0px;
  }
  .textInput.shortIfNeeded {
    width:250px;
  }
  .wideOnly {
    display: none;
  }
  .wideOnlyInline {
    display: none;
  }
  .bioText {
    width:100%;
  }
  .loginOverlay {
    padding: 10px 40px 10px 40px;
}
.simpleCard.wide {
    width:280px;
    height: 180px;
  }
  .simpleCard {
    width:140px;
    height: 140px;
  }
  .simpleCardImg {
    display: inline-block;
    height:80px;
  }
  .quoteContainer {
  overflow-x:scroll;
  }
  .horizontalScrollIndicatorContainer {
    margin-top: 0px;
}
.horizontalScrollIndicatorContainer.smallOnly {
    display: block;
}
.smallOnly {
  display: block;
}
.smallOnlyInline {
  display: inline-block;
}

.scrollDot.active {
    height: 15px;
    margin-bottom: 0px;
    width: 15px;
}
.homeQuoteInner {
  height: 160px;
}
.mediumTitle {
font-size:3rem;
margin-left:16px;margin-right:16px;
  }
  .bioAbout {
}
  .resourceCard {
    max-width: 100%;
    margin: 10px;
    min-width: 250px;
  }
  .welcomeLarge {
    font-weight: bold;
    margin-top: 16px;
    line-height: 1.2;
    margin-left:16px;margin-right:16px;font-size:32px;
}
.homeQuoteContainer {
  height:225px;
  }
.homeStatContainer {
  height:225px;
  }
  .cookieOption {
      width:85%;
      font-size: 1.2rem;
  }
  .carousel-container {
    width:300px;
  }
  .carousel-container.small {
    width:100%;
  }
  .carouselButton {
    display: none;
  }
  .carousel-card {
    height:250px;
    padding:20px;
  }
  .userQuote {
  font-size: 1rem;
}
  .appReview {
  font-size: 0.9rem;
  text-align: left;
}
.statQuote {
  padding-top: 60px;
}
.carouselQuote {
  padding-top: 8px;
  height:90%;
}
.navPadding {
  padding-left:15px;
  padding-right:15px;
}
.featureThreeBlock {
  width:100%;
}
.featureThreeBlock.middle {
  margin-left: 0px;
  margin-right: 0px;
  margin-top:16px;
  margin-bottom: 16px;
}
.country-input {
      font-size: 16px; /* prevents iOS zoom */
    }
}

/* =====================================================================
   ACCESSIBILITY LAYER (Phase 2 M2)
   Scoped entirely under html[data-a11y-*], so it is inert until a user
   enables a setting. Attributes are stamped on <html> before paint by the
   head.html M1 script. Zero visual change when no setting is on.
   ===================================================================== */

/* Visually-hidden utility for the M6 live regions and any sr-only label. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* P2 nested-interactive fix: presentational inner <button> elements were removed
   so the navigating <a> is the single interactive element (valid HTML, no
   button-inside-link for screen readers). These selectors match ONLY <a>, so
   real <button> elements are untouched. Every button class already sets its own
   display/color; the one thing an anchor adds back is an underline, so the only
   guarantee needed for a pixel-identical result is removing text-decoration. */
a.standardButton, a.cBtn, a.outlineButton, a.main-button, a.btn-main,
a.cwt-btn, a.purchaseButton, a.progFullBtn, a.progGhostBtn {
    text-decoration: none;
}
/* WCAG 1.4.1 Use of Color: a link sitting inside a block of running text must be
   distinguishable from that text by more than color alone (Bia's purple link vs the
   #3a3a3a body text is only ~2.3:1, so color-blind users can't tell them apart). Underline
   links that live inside paragraphs + the Leaflet map attribution. Button/CTA-styled
   anchors are excluded, and nav links / link lists (not inside running text) are untouched. */
p a:not([class*="utton"]):not(.noStyle):not(.blank):not(.cBtn):not(.purpleLink.noUnderline),
.phaseDescription a:not([class*="utton"]):not(.noStyle):not(.blank):not(.cBtn),
.leaflet-control-attribution a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* WCAG 1.4.3 contrast: keep white-text button classes white even when an un-nested anchor
   also carries a.noStyle (which sets color:inherit and otherwise made .noStyle.standardButton
   render dark text on a purple fill = ~2.2:1). Comes after a.noStyle so it wins on source order. */
a.standardButton, a.purchaseButton, a.main-button, a.btn-main, a.cBtn, a.progFullBtn {
    color: #FFFFFF;
}
/* WCAG 1.4.3 contrast: the same white-text button anchors on :hover/:focus. Bootstrap's global
   a:hover{color:#0056b3} ties these on specificity (both 0,1,1) and would paint dark blue text on
   a colored fill (e.g. ~1.3:1 on green). The :hover/:focus selectors below are specificity 0,2,1 so
   they win outright, independent of stylesheet load order. */
a.standardButton:hover, a.standardButton:focus,
a.purchaseButton:hover, a.purchaseButton:focus,
a.main-button:hover, a.main-button:focus,
a.btn-main:hover, a.btn-main:focus,
a.cBtn:hover, a.cBtn:focus,
a.progFullBtn:hover, a.progFullBtn:focus {
    color: #FFFFFF;
}
/* Same protection for the per-page filled-purple button anchors that set color:white but
   define no hover color of their own (provider condition pages + a few landing CTAs). Without
   this they inherit Bootstrap's a:hover blue on the purple fill (~1.6:1). */
a.pet-btn-primary:hover, a.pet-btn-primary:focus,
a.pi-btn-primary:hover, a.pi-btn-primary:focus,
a.prtm-btn-primary:hover, a.prtm-btn-primary:focus,
a.pyb-btn-primary:hover, a.pyb-btn-primary:focus,
a.s504-btn-primary:hover, a.s504-btn-primary:focus,
a.wn-bottom-btn-primary:hover, a.wn-bottom-btn-primary:focus {
    color: #FFFFFF;
}
/* WCAG 1.4.3 contrast: bare (un-classed) links in prose inherit Bootstrap's #007bff (~3.7:1
   on the off-white background); use a darker blue that meets AA. Classed/brand links unaffected. */
a:not([class]) {
    color: #1a4db3;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: static !important;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip: auto; white-space: normal;
}

/* --- Reduced motion: the account toggle finally drives CSS (not just the JS
   confetti gate). Coexists with the existing @media (prefers-reduced-motion)
   blocks; either path neutralizes motion. --- */
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* --- High contrast: swap the semantic tokens to >=7:1 values, then harden the
   highest-frequency low-contrast classes from the audit until each surface is
   migrated onto the tokens (M7). --- */
html[data-a11y-contrast="high"] {
    --bia-fg: #111317;
    --bia-muted: #333333;
    --bia-accent: #3a2f9c;
    --bia-teal: #0b5c56;
    --bia-teal-surface: #7ad6c0;
    --bia-link: #2a1f8c;
    --bia-border: #444444;
    --bia-focus: #2a1f8c;
    --text-muted: #1a1a1a;
    --col-purple: #3a2f9c;
}
html[data-a11y-contrast="high"] .purpleLink,
html[data-a11y-contrast="high"] a.purpleLink {
    color: var(--bia-link);
    text-decoration: underline;
}
html[data-a11y-contrast="high"] .languageOption.selected,
html[data-a11y-contrast="high"] .standardButton {
    background: var(--bia-accent);
    color: #ffffff;
}

/* --- Readable font: a high-legibility stack. Verdana is the no-ship fallback
   (widely installed, very legible) if Atkinson Hyperlegible is not present;
   self-hosted only, no Google Fonts (CIPA work). --- */
html[data-a11y-font="readable"],
html[data-a11y-font="readable"] body {
    --bia-font-family: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif;
    font-family: var(--bia-font-family);
}
html[data-a11y-font="readable"] body * {
    font-family: var(--bia-font-family) !important;
    letter-spacing: 0.01em;
}

/* --- Larger text: rem/em-based sizing scales from the root font-size. Px-locked
   components are migrated incrementally; verify reflow at 1.3 x 320px. --- */
html[data-a11y-text="1.15"] { font-size: 115%; }
html[data-a11y-text="1.3"]  { font-size: 130%; }

/* --- Account page Accessibility section (Phase 3) controls. --- */
.a11yFieldset {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 14px 0;
}
.a11yLegend {
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0 6px;
}
.a11yHelp {
    color: var(--bia-muted, #595959);
    margin: 2px 0 10px;
    font-size: 0.95rem;
}
.a11yOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
}
/* WCAG 2.5.8 target size: make each option's label a >= 24px-tall clickable target
   and enlarge the native radio so the accessibility controls themselves meet 24px. */
.a11yOptions label { margin-left: 6px; cursor: pointer; display: inline-flex; align-items: center; min-height: 24px; }
.a11yOptions input[type="radio"] { cursor: pointer; width: 18px; height: 18px; }

/* --- Skip-to-content link (M9): hidden until focused, then pinned top-left. --- */
.skipLink {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 10000;
    background: var(--bia-accent, #6c5fc0);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.15s ease;
}
.skipLink:focus { top: 8px; }

/* WCAG 1.4.10 reflow: resource tiles have min-width 300px (250px on mobile) which overflows a
   320px viewport once padding/margin is added. On narrow phones, let them fill the row instead. */
@media (max-width: 400px) {
    .resourceCard {
        display: block;
        width: auto;
        min-width: 0;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}