/* ============================================================
       THEME TOKENS — HubL processed here (inline), not via require_css
       ============================================================ */
    :root {
      /* Typography */
      --theme-body-font:    'Nunito', sans-serif;
      --theme-heading-font: 'Nunito', sans-serif;
      --theme-body-size:    18px;
      --theme-body-mobile:  16px;
      --theme-h1:           57px;
      --theme-h2:           29px;
      --theme-h3:           28px;
      --theme-h4:           22px;
      --theme-h5:           18px;
      --theme-h6:           16px;
      --theme-h1-mobile:    34px;
      --theme-h2-mobile:    28px;
      --theme-h3-mobile:    22px;
      --theme-h4-mobile:    20px;
      --theme-h5-mobile:    18px;
      --theme-h6-mobile:    16px;
      --font-size-small:    0.8em;
      --font-size-large:    1.2em;

      /* Heading weights (per-level from theme editor) */
      --theme-h1-weight:    500;
      --theme-h2-weight:    500;
      --theme-h3-weight:    800;
      --theme-h4-weight:    700;
      --theme-h5-weight:    700;
      --theme-h6-weight:    700;

      /* Heading & body line heights (from theme editor) */
      --theme-body-line-height: 26px;
      --theme-h1-line-height:   74px;
      --theme-h2-line-height:   40px;
      --theme-h3-line-height:   36px;

      /* Base colors (consumed by modules via --theme-* aliases) */
      --theme-dark:        #18191b;
      --theme-light:       #ffffff;
      --theme-brand:       #ffdd67;
      --theme-secondary:   #c755f0;
      --theme-tertiary:    #eaecf8;
      --theme-huai-grad-1: #7797ff;
      --theme-huai-grad-2: #05288f;

      /* Semantic aliases (consumed by base.html global styles) */
      --dark-point:       #18191b;
      --light-point:      #ffffff;
      --brand:            #ffdd67;
      --secondary-accent: #c755f0;
      --type:             #18191b;
      --divider:          color-mix(in srgb, #18191b 10%, transparent);

      /* Scoped semantic tokens */
      --theme-h1-color: #18191b;
      --theme-h2-color: #18191b;
      --theme-h3-color: #18191b;
      --theme-h4-color: #18191b;
      --theme-h5-color: #18191b;
      --theme-h6-color: #18191b;
      --theme-link-color:       #2863f6;
      --theme-link-hover-color: #18191b;
      --theme-nav-color:        #18191b;
      --theme-nav-hover-color:  #18191b;

      /* Dark-point opacity scales */
      --dark-point-5:  color-mix(in srgb, var(--dark-point)  5%, transparent);
      --dark-point-10: color-mix(in srgb, var(--dark-point) 10%, transparent);
      --dark-point-20: color-mix(in srgb, var(--dark-point) 20%, transparent);
      --dark-point-40: color-mix(in srgb, var(--dark-point) 40%, transparent);
      --dark-point-50: color-mix(in srgb, var(--dark-point) 50%, transparent);
      --dark-point-60: color-mix(in srgb, var(--dark-point) 60%, transparent);
      --dark-point-80: color-mix(in srgb, var(--dark-point) 80%, transparent);

      /* Light-point opacity scales */
      --light-point-5:  color-mix(in srgb, #ffffff  5%, transparent);
      --light-point-10: color-mix(in srgb, #ffffff 10%, transparent);
      --light-point-20: color-mix(in srgb, #ffffff 20%, transparent);
      --light-point-50: color-mix(in srgb, #ffffff 50%, transparent);
      --light-point-80: color-mix(in srgb, #ffffff 80%, transparent);

      /* Buttons */
      --btn-primary-bg:           #ffdd67;
      --btn-primary-border:       #ffdd67;
      --btn-primary-text:         #18191b;
      --btn-primary-bg-hover:     #e8c74e;
      --btn-primary-text-hover:   #18191b;
      --btn-accent-grad-start:    #7797ff;
      --btn-accent-grad-end:      #05288f;
      --btn-accent-text:          #fff;
      --btn-accent-hover-opacity: 85;
      --btn-border-radius: 200px;
      --btn-border-width:  1px;
      --btn-height:        70px;
      --btn-padding-x:     40px;

      /* Layout & spacing */
      --wrap-max-width:             1152px;
      --medium-wide-wrap-max-width: 1036px;
      --medium-wrap-max-width:      864px;
      --small-wrap-max-width:       691px;
      --text-width:                 633px;
      --border-radius:              22px;
      --grid-gap: 1.5rem;
    }

    /* ============================================================
       BASE RESET
       ============================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    ::selection {
      background: var(--brand);
      color: var(--dark-point);
    }

    html,
    body {
      background-color: var(--dark-point);
      scroll-behavior: smooth;
      font-family: var(--theme-body-font);
      font-weight: 400;
      font-size: var(--theme-body-size);
      line-height: var(--theme-body-line-height);
    }

    @media screen and (max-width: 1240px) {

      html,
      body {
        font-size: var(--theme-body-mobile);
      }
    }

    body {
      color: var(--type);
      border-radius: 1em;
    }

    main {
      position: relative;
      overflow: hidden;
      background-color: var(--light-point);
    }

    p {
      line-height: 140%;
    }

    strong {
      font-weight: 800;
    }

    em {
      font-style: italic;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
    }

    /* Content links — theme-controlled, scoped away from nav/buttons/footer */
    main a:not([class]) {
      color: var(--theme-link-color);
    }

    main a:not([class]):hover {
      color: var(--theme-link-hover-color);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: inherit;
      font-weight: inherit;
      font-family: var(--theme-heading-font);
    }

    img,
    video {
      max-width: 100%;
      height: auto;
      display: block;
    }

    hr {
      background-color: var(--divider);
      border: none;
      width: 100%;
      height: 1px;
    }

    hr.dark {
      background-color: var(--light-point-5);
    }

    /* Typography */
    h1,
    .h1 {
      margin-bottom: 1.8rem;
      font-size: var(--theme-h1);
      font-weight: var(--theme-h1-weight);
      line-height: var(--theme-h1-line-height);
      color: var(--theme-h1-color);
    }

    h1.huge,
    .h1.huge {
      font-size: clamp(var(--theme-h1-mobile), 10vw, var(--theme-h1));
    }

    @media screen and (max-width: 840px) {

      h1,
      .h1 {
        font-size: var(--theme-h1-mobile);
      }

      h1.huge,
      .h1.huge {
        font-size: clamp(var(--theme-h1-mobile), 8vw, var(--theme-h1));
      }
    }

    h2,
    .h2 {
      font-size: var(--theme-h2);
      font-weight: var(--theme-h2-weight);
      line-height: var(--theme-h2-line-height);
      color: var(--theme-h2-color);
    }

    @media screen and (max-width: 840px) {

      h2,
      .h2 {
        font-size: var(--theme-h2-mobile);
      }
    }

    h2.huge {
      font-size: clamp(var(--theme-h2-mobile), 6vw, var(--theme-h2));
    }

    h3,
    .h3 {
      font-size: var(--theme-h3);
      font-weight: var(--theme-h3-weight);
      line-height: var(--theme-h3-line-height);
      color: var(--theme-h3-color);
    }

    @media screen and (max-width: 840px) {

      h3,
      .h3 {
        font-size: var(--theme-h3-mobile);
      }
    }

    h4,
    .h4 {
      font-size: var(--theme-h4);
      font-weight: var(--theme-h4-weight);
      color: var(--theme-h4-color);
    }

    @media screen and (max-width: 840px) {

      h4,
      .h4 {
        font-size: var(--theme-h4-mobile);
      }
    }

    h5,
    .h5 {
      font-size: var(--theme-h5);
      font-weight: var(--theme-h5-weight);
      color: var(--theme-h5-color);
    }

    h6,
    .h6 {
      font-size: var(--theme-h6);
      font-weight: var(--theme-h6-weight);
      color: var(--theme-h6-color);
    }

    .small {
      font-size: var(--font-size-small);
    }

    .large {
      font-size: var(--font-size-large);
    }

    /* Utilities */
    .title {
      font-size: 0.8em;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .mobile-hide {
      display: initial;
    }

    .mobile-show {
      display: none !important;
    }

    @media screen and (max-width: 840px) {
      .mobile-hide {
        display: none !important;
      }

      .mobile-show {
        display: flex !important;
      }
    }

    .text-center {
      text-align: center;
    }

    .relative {
      position: relative;
    }

    /* ============================================================
       LAYOUT — WRAP, SECTIONS, HEADER, FOOTER
       ============================================================ */
    .wrap {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-left: auto;
      margin-right: auto;
      max-width: var(--wrap-max-width);
      position: relative;
      width: 90%;
    }

    .wrap.wide {
      max-width: 100%;
    }

    .wrap.medium-wide-wrap {
      max-width: var(--medium-wide-wrap-max-width);
    }

    .wrap.medium-wrap {
      max-width: var(--medium-wrap-max-width);
    }

    .wrap.small-wrap {
      max-width: var(--small-wrap-max-width);
    }

    .wrap.center {
      justify-content: center;
      flex-direction: column;
    }

    @media screen and (max-width: 768px) {
      .wrap.mobile-full {
        width: 100%;
      }
    }

    footer,
    section {
      z-index: 1;
      padding: 6em 0;
      position: relative;
      overflow: hidden;
    }

    @media screen and (max-width: 840px) {

      footer,
      section {
        padding: 4em 0;
      }
    }

    /* Announcement banner */
    .banner {
      background: linear-gradient(90deg, var(--brand) 0%, pink 50%, var(--brand) 100%);
      background-size: 200% 100%;
      color: var(--dark-point);
      padding: 0.8em 0;
      position: relative;
      z-index: 3;
      animation: bannerShift 6s linear infinite;
    }

    @keyframes bannerShift {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .banner,
    .banner div {
      align-items: center;
      display: flex;
      justify-content: center;
      text-align: center;
      gap: 1em;
    }

    .banner p {
      font-weight: 600;
    }

    .banner a {
      color: var(--dark-point);
    }

    /* Footer */
    footer.site-footer {
      background-color: var(--dark-point);
      color: var(--light-point);
      display: flex;
      gap: var(--grid-gap);
      flex-direction: column;
      position: relative;
      z-index: 2;
      padding: 4em 0;
      overflow: visible;
    }

    .footer-callout-grid {
      display: grid;
      gap: var(--grid-gap);
      grid-template-columns: repeat(2, 1fr);
      width: 100%;
    }

    @media screen and (max-width: 768px) {
      .footer-callout-grid {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    .footer-nav {
      display: grid;
      font-size: 0.875em;
      gap: var(--grid-gap);
      grid-template-columns: repeat(4, 1fr);
      width: 100%;
    }

    @media screen and (max-width: 768px) {
      .footer-nav {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    .footer-nav-group {
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 1em;
    }

    .footer-nav-list {
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 0.4em;
    }

    .footer-nav-list a {
      opacity: 0.4;
    }

    .footer-nav-list a:hover {
      opacity: 1;
    }

    .social-nav {
      display: flex;
      align-items: center;
      gap: 1.4em;
      font-size: 0.875em;
    }

    .social-nav a {
      opacity: 0.4;
    }

    .social-nav a:hover {
      opacity: 1;
    }

    .social-nav img {
      height: 2em;
      width: auto;
    }

    .verifications {
      display: flex;
      gap: 1em;
    }

    .verifications img {
      height: 63px;
      width: auto;
    }

    /* Sub-footer */
    .sub-footer {
      background-color: var(--dark-point);
      border-top: 1px solid var(--light-point-5);
      color: var(--light-point);
      padding: 4em 0;
      position: relative;
      z-index: 2;
    }

    .sub-footer-wrap {
      gap: 1em;
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    @media screen and (max-width: 768px) {
      .sub-footer-wrap {
        flex-direction: column;
      }
    }

    .inline-logo {
      align-items: center;
      display: flex;
      gap: 0.6em;
      font-weight: 700;
      font-size: 0.875em;
    }

    .inline-logo svg {
      height: 1.3em;
      width: 1.3em;
      fill: currentColor;
    }

    .copyright {
      font-size: 0.8em;
      opacity: 0.4;
    }

    @media screen and (max-width: 768px) {
      .copyright span {
        display: none;
      }
    }

    /* ============================================================
       COMPONENTS — BUTTONS, CALLOUTS
       ============================================================ */
    .btn {
      align-items: center;
      background-color: var(--dark-point);
      border-radius: var(--btn-border-radius);
      border: var(--btn-border-width) solid var(--dark-point);
      color: var(--light-point);
      cursor: pointer;
      display: inline-flex;
      flex-shrink: 0;
      font-weight: 800;
      justify-content: center;
      min-height: var(--btn-height);
      padding: 0.5em var(--btn-padding-x);
      text-align: center;
      text-decoration: none;
      user-select: none;
      font-family: inherit;
      font-size: inherit;
      transition: all 0.2s ease-in-out;
      gap: 0.6em;
    }

    @media screen and (max-width: 768px) {
      .btn {
        font-size: 0.875em;
        padding: 0.5em calc(var(--btn-padding-x) * 0.75);
      }
    }

    .btn.cta {
      background-color: var(--btn-primary-bg);
      border-color: var(--btn-primary-border);
      color: var(--btn-primary-text);
      gap: 1em;
    }

    .btn.cta:hover {
      background-color: var(--btn-primary-bg-hover);
      border-color: var(--btn-primary-bg-hover);
      color: var(--btn-primary-text-hover);
    }

    .btn.cta.gradient {
      border: none;
      background: linear-gradient(165deg, var(--btn-accent-grad-start) 0%, var(--btn-accent-grad-end) 100%);
      color: var(--btn-accent-text);
    }

    .btn.cta.gradient:hover {
      opacity: calc(var(--btn-accent-hover-opacity) * 0.01);
    }

    .btn.ghost {
      background-color: transparent;
      color: var(--dark-point);
    }

    .btn.outlined {
      color: var(--light-point-80) !important;
      border-color: var(--light-point-10) !important;
      background-color: transparent;
    }

    .btn.outlined:hover {
      color: var(--light-point) !important;
    }

    .btn .btn-icon {
      width: 1em;
      height: 1em;
      flex-shrink: 0;
      fill: currentColor;
    }

    @media screen and (max-width: 768px) {
      .btn.cta {
        font-size: 1em;
        padding: 0.5em var(--btn-padding-x);
        text-align: center;
        justify-content: center;
      }
    }

    .callout-text {
      align-items: center;
      display: flex;
      margin-bottom: 3em;
      max-width: var(--text-width);
    }

    .callout-text.dark {
      color: var(--light-point-50);
    }

    .callout-text.dark strong em,
    .callout-text.dark em strong {
      background: linear-gradient(90deg, var(--secondary-accent), var(--brand));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .callout-text p {
      font-size: var(--font-size-large);
      margin-bottom: 0;
    }

    .footer-callout-card {
      align-items: center;
      border-radius: 2em;
      border: 1px solid var(--light-point-5);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      padding: 2em;
      position: relative;
      text-align: center;
      width: 100%;
    }

    .footer-callout-card::before,
    .footer-callout-card::after {
      content: "";
      height: 102%;
      position: absolute;
      width: 102%;
      bottom: -1%;
      top: -1%;
    }

    .footer-callout-card.dark,
    .footer-callout-card.dark p {
      color: var(--light-point);
    }

    .footer-callout-card .callout-message {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      min-height: 12em;
    }

    .hs-form-f87bb5e1-51b5-4a47-b11c-7f889b4833b4_5fc51db4-c32b-4dea-89b8-9175d32a1a4f fieldset.form-columns-1 .hs-input {
      width: 100% !important;
    }

    body .ah-module-modal {
      position: fixed;
      inset: 0;
      z-index: 20050;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      box-sizing: border-box;
      padding: 32px 16px;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.24s ease-out, visibility 0.24s ease-out;
    }

    body .ah-module-modal[hidden] {
      display: none;
    }

    body .ah-module-modal.is-open {
      opacity: 1;
      visibility: visible;
    }

    body .ah-module-modal .ah-module-modal__backdrop {
      appearance: none;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: rgba(3, 35, 60, 0.78);
      cursor: pointer;
    }

    body .ah-module-modal .ah-module-modal__dialog {
      position: relative;
      width: min(864px, calc(100vw - 32px)) !important;
      max-height: none !important;
      min-height: 0;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 32px;
      overflow-x: hidden !important;
      overflow-y: visible !important;
      box-shadow: 0 24px 80px rgba(3, 35, 60, 0.24);
      transform: translateY(18px);
      transition: transform 0.24s ease-out;
    }

    body .ah-module-modal.is-open .ah-module-modal__dialog {
      transform: translateY(0);
    }

    body .ah-module-modal .ah-module-modal__title {
      font-size: 32.4px !important;
      line-height: 1.4 !important;
    }

    @media screen and (max-width: 768px) {
      body .ah-module-modal {
        padding: 12px !important;
      }

      body .ah-module-modal .ah-module-modal__dialog {
        width: calc(100vw - 24px) !important;
        margin: 0 auto;
        border-radius: 24px;
      }
    }

    .footer-callout-card .callout-title {
      font-size: 0.725em;
      margin-bottom: 1em;
    }

    .footer-callout-card .callout-primary-text {
      margin: auto auto 1.4em;
    }

    .footer-callout-card .callout-links {
      display: flex;
      flex-direction: column;
      gap: 1.4em;
    }

    .footer-callout-card .callout-subtext {
      align-items: center;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      text-align: center;
    }

    .footer-callout-card .callout-subtext a:not(.btn) {
      opacity: 0.4;
      border-bottom: 1px solid currentColor;
    }

    .footer-callout-card .callout-subtext a:not(.btn):hover {
      opacity: 1;
    }

    .footer-callout-card>* {
      position: relative;
      z-index: 1;
    }

    .footer-callout-card.bg-office::before {
      background-image: url("https://anonymoushealth.com/tunde-office.webp");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
      mask-repeat: no-repeat;
      mask-size: cover;
    }

    .footer-callout-card.bg-orbs::before {
      background-image: url("https://anonymoushealth.com/square-orbs-bg.webp");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
      mask-repeat: no-repeat;
      mask-size: cover;
    }

    .app-stores {
      display: flex;
      align-items: center;
      gap: 1em;
    }

    .app-stores img {
      height: auto;
      width: auto;
      max-height: 60px;
    }

@media screen and (max-width: 840px) {
  .header-wrap {
    position: relative;
  }

  .header-nav.is-open {
    align-items: stretch;
    background-color: var(--dark-point);
    border: 1px solid var(--light-point-10);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    left: 0;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    z-index: 10;
  }

  .header-nav.is-open a,
  .header-nav.is-open button {
    color: var(--light-point);
    justify-content: center;
    width: 100%;
  }
}


.hero-btn { border-radius:54px !important;padding: 21px 36px !important;
    font-weight: 800 !important;background:#fff;color:#18191b;font-size:18px;font-weight:800 }


.gradient-btn { background:linear-gradient(165deg,var(--brand) 0,var(--secondary-accent) 150%);color:#18191b }

.white-btn { background-color:#fff !important;color:#18191b;border-color:#fff !important } 


.gradient-text, .gradient-highlight strong em, .gradient-highlight em strong {
    background: linear-gradient(45deg, var(--secondary-accent), var(--brand));
    -webkit-text-fill-color: transparent;
    background-position: 50%;
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
}

.blog-post-wrapper .banner-post { position:relative }

.blog-post-wrapper .banner-post .banner-overlay { position: absolute;
    bottom: 50px;
    left: 20px;
    color: #fff;
    max-width: 1240px;
    margin: 0 auto;
    left: 0;
    right: 0;z-index:1;padding-left:20px;padding-right:20px }

.blog-post-wrapper img { position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.blog-post-wrapper .banner-post { min-height:550px }


.blog-post-wrapper .banner-post .banner-overlay h1, .blog-post-wrapper .banner-post .banner-overlay p { color:#fff;max-width:1080px; }

.blog-post-wrapper .banner-post:after { content:"";
    background:#000;
    opacity: 0.60;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute; }

.blog-post-wrapper .blog-tags { align-items: center;
    backdrop-filter: blur(1em);
    background-color: #fff;
    border-radius: 100em;
    color: #18191b;
    display: inline-flex;
    font-size: 15px;
    font-size: 12px;
    font-weight: 700;
    gap: .4em;
    margin-bottom: 0;
    padding: .2em .8em;
    position: relative;
    width: auto;margin-bottom:10px }

.blog-post-wrapper .blog-post { padding-top:70px }

.blog-post-wrapper hr { margin-top:20px;margin-bottom:20px }


.post-conainer {     display: flex;
    margin: 0 auto;
    max-width: 1240px;
    justify-content: space-between;padding-left:20px;padding-right:20px;width:100% }

.post-conainer .left-column-p { width:100%;max-width:65% }
.post-conainer .right-column-p { width:100%;max-width:25%;padding-top:67px }

.post-conainer .right-column-p h3 { font-size:18px;font-weight:300;margin-bottom:5px }

.post-conainer .right-column-p h3 a { color:#18191b;font-size:18px }

.post-conainer .right-column-p .recent-post__date { font-size:12px;color:#18191b99;font-weight:700 }

.post-conainer .right-column-p .blog-tags { align-items: center;
    backdrop-filter: blur(1em);
    background-color: #18191b14;
    border-radius: 100em;
    color: #18191b;
    display: inline-flex;
    font-size: 15px;
    font-size: 12px;
    font-weight: 700;
    gap: .4em;
    margin-bottom: 0;
    padding: .2em .8em;
    position: relative;
    width: auto; }


@media screen and (max-width: 767px) {

  .blog-post-wrapper .banner-post { min-height:650px }
  .blog-post-wrapper .banner-post .banner-overlay h1 { line-height:1.3 }
  .blog-post-wrapper .blog-post { width:100%; }
  .post-conainer .right-column-p { display:none }
  .post-conainer .left-column-p { width:100%;max-width:100% }
  .post-conainer ul { padding-left: 20px; }
}

}