/* ============================================================
       DESIGN TOKENS
    ============================================================ */
    :root {
      --pine:       #00898C;
      --pine-dark:  #006e71;
      --pine-light: #e5f5f5;
      --wisteria:   #DBA6E3;
      --wisteria-light: #f9f0fb;
      --sand:       #FBF8F4;
      --text:       #272727;
      --text-mid:   #555;
      --white:      #ffffff;
      --border:     rgba(0,137,140,0.13);
      --shadow:     0 2px 16px rgba(0,137,140,0.07);
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Avenir Next', 'Avenir', 'Century Gothic', 'Trebuchet MS', sans-serif;
      background: var(--sand);
      color: var(--text);
      font-size: 15px;
      line-height: 1.75;
    }

    p { text-align: justify; }
    a { text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* ============================================================
       HEADER
    ============================================================ */
    #site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 900;
      height: 68px;
      background: var(--white);
      border-bottom: 2px solid var(--pine);
      display: flex;
      align-items: center;
      padding: 0 40px;
      gap: 16px;
      box-shadow: 0 2px 18px rgba(0,137,140,0.08);
    }

    .header-logo-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    /*
      Embedded as base64 data URI
    */
    .header-logo-box {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      border: 2px dashed var(--pine);
      background: var(--pine-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      color: var(--pine);
      font-weight: 600;
      letter-spacing: 0.3px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .header-brand {
      font-size: 21px;
      font-weight: 700;
      color: var(--pine);
      letter-spacing: -0.2px;
    }

    #main-nav {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    #main-nav a {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      padding: 6px 11px;
      border-radius: 5px;
      transition: background 0.18s, color 0.18s;
      white-space: nowrap;
    }

    #main-nav a:hover,
    #main-nav a.active {
      background: var(--pine-light);
      color: var(--pine);
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      margin-left: auto;
      padding: 4px;
    }
    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--pine);
      border-radius: 2px;
    }

    /* ============================================================
       MAIN WRAPPER
    ============================================================ */
    #main-content {
      margin-top: 68px;
    }

    /* ============================================================
       PAGE VISIBILITY
    ============================================================ */
    .page { display: none; }
    .page.active { display: block; }

    /* ============================================================
       FOOTER
    ============================================================ */
    #site-footer {
      background: var(--pine);
      color: var(--white);
      padding: 24px 40px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 14px;
    }

    
    .footer-logo-box {
      width: 40px;
      height: 40px;
      border-radius: 7px;
      border: 2px dashed rgba(255,255,255,0.45);
      background: rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      color: rgba(255,255,255,0.65);
      font-weight: 600;
      letter-spacing: 0.3px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .footer-brand {
      font-size: 18px;
      font-weight: 700;
    }

    .footer-tagline {
      font-size: 13px;
      opacity: 0.75;
      margin-left: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 1;
      min-width: 0;
    }

    .footer-right {
      margin-left: auto;
      font-size: 13px;
      opacity: 0.75;
      text-align: right;
      line-height: 1.6;
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* ============================================================
       UTILITY CLASSES
    ============================================================ */
    .container {
      max-width: 1080px;
      margin: 0 auto;
    }

    .section {
      padding: 80px 60px;
    }
    .section-sm {
      padding: 56px 60px;
    }
    .section-white { background: var(--white); }
    .section-sand  { background: var(--sand); }
    .section-pine  { background: var(--pine); color: var(--white); }
    .section-wisteria-light { background: var(--wisteria-light); }

    .eyebrow {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--white);
      background: var(--pine);
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 22px;
    }

    .eyebrow-wisteria {
      background: var(--wisteria);
      color: var(--white);
    }

    h1 {
      font-size: 44px;
      font-weight: 700;
      line-height: 1.15;
      color: var(--pine);
      margin-bottom: 20px;
    }

    h2 {
      font-size: 30px;
      font-weight: 700;
      color: var(--pine);
      margin-bottom: 14px;
    }

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--pine);
      margin-bottom: 10px;
    }

    .text-white h1,
    .text-white h2,
    .text-white h3,
    .text-white p { color: var(--white); }

    .text-white p { opacity: 0.92; }

    .lead {
      font-size: 17px;
      line-height: 1.72;
      color: var(--text);
      text-align: justify;
    }

    .divider {
      width: 52px;
      height: 3px;
      background: var(--wisteria);
      margin: 14px 0 24px;
    }

    /* ============================================================
       CARDS
    ============================================================ */
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 26px;
      margin-top: 40px;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 26px;
      margin-top: 40px;
    }

    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 26px;
      margin-top: 40px;
    }

    .card {
      background: var(--white);
      border-radius: 12px;
      padding: 30px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    .card-pine-border {
      border-top: 4px solid var(--pine);
    }

    .card-wisteria-border {
      border-top: 4px solid var(--wisteria);
    }

    .card-num {
      font-size: 42px;
      font-weight: 700;
      color: var(--wisteria);
      line-height: 1;
      margin-bottom: 10px;
    }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-block;
      padding: 13px 28px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Avenir Next','Avenir',sans-serif;
      cursor: pointer;
      border: none;
      transition: all 0.22s;
      text-decoration: none;
    }

    .btn-primary {
      background: var(--pine);
      color: var(--white);
    }
    .btn-primary:hover {
      background: var(--pine-dark);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0,137,140,0.3);
    }

    .btn-outline {
      background: transparent;
      color: var(--pine);
      border: 2px solid var(--pine);
    }
    .btn-outline:hover {
      background: var(--pine);
      color: var(--white);
    }

    .btn-white {
      background: var(--white);
      color: var(--pine);
    }
    .btn-white:hover {
      background: var(--sand);
    }

    .btn-wisteria {
      background: var(--wisteria);
      color: var(--white);
    }
    .btn-wisteria:hover {
      opacity: 0.88;
    }

    .btn-group {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    /* ============================================================
       QUOTE BLOCK
    ============================================================ */
    .quote-block {
      border-left: 4px solid var(--wisteria);
      padding: 24px 32px;
      background: var(--white);
      border-radius: 0 12px 12px 0;
      margin: 40px 0;
    }

    .quote-block p {
      font-size: 19px;
      font-style: italic;
      color: var(--text);
      line-height: 1.7;
      text-align: center;
    }

    /* ============================================================
       CHECK LIST
    ============================================================ */
    .check-list {
      list-style: none;
      padding: 0;
      margin-top: 14px;
    }
    .check-list li {
      padding: 9px 0 9px 28px;
      position: relative;
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-mid);
      border-bottom: 1px solid rgba(0,0,0,0.05);
      text-align: left;
    }
    .check-list li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--pine);
      font-weight: 700;
    }

    /* ============================================================
       STAT STRIP
    ============================================================ */
    .stat-strip {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 1px;
      background: var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin-top: 40px;
    }
    .stat-item {
      background: var(--white);
      padding: 40px 20px;
      text-align: center;
    }
    .stat-num {
      font-size: 46px;
      font-weight: 700;
      color: var(--pine);
      line-height: 1;
      margin-bottom: 6px;
    }
    .stat-label {
      font-size: 13px;
      color: var(--text-mid);
      text-align: center;
    }

    /* ============================================================
       IMAGE PLACEHOLDER HELPERS
    ============================================================ */
    .img-ph {
      background: var(--pine-light);
      border: 2px dashed var(--pine);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      color: var(--pine);
      font-weight: 600;
      font-size: 13px;
    }

    .img-ph-icon {
      font-size: 32px;
      opacity: 0.5;
    }

    /* ============================================================
       PUBLICATION CARDS
    ============================================================ */
    .pub-card {
      background: var(--white);
      border-radius: 12px;
      padding: 24px 28px;
      border: 1px solid var(--border);
      border-left: 4px solid var(--pine);
      box-shadow: var(--shadow);
      transition: box-shadow 0.2s;
    }
    .pub-card:hover {
      box-shadow: 0 6px 24px rgba(0,137,140,0.12);
    }
    .pub-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }
    .pub-year {
      font-size: 12px;
      font-weight: 700;
      color: var(--white);
      background: var(--pine);
      padding: 3px 10px;
      border-radius: 100px;
      letter-spacing: 0.4px;
    }
    .pub-journal {
      font-size: 12px;
      font-weight: 600;
      color: var(--pine);
      font-style: italic;
    }
    .pub-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 5px;
      line-height: 1.5;
      text-align: left;
    }
    .pub-authors {
      font-size: 12px;
      color: var(--text-mid);
      margin-bottom: 8px;
      text-align: left;
    }
    .pub-abstract {
      font-size: 13px;
      color: var(--text-mid);
      line-height: 1.65;
      margin-bottom: 12px;
      text-align: justify;
    }
    .pub-link {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      color: var(--pine);
      letter-spacing: 0.3px;
      border-bottom: 1.5px solid var(--pine);
      padding-bottom: 1px;
      transition: opacity 0.18s;
    }
    .pub-link:hover { opacity: 0.7; }

    /* ============================================================
       CLOSING BANNER
    ============================================================ */
    .closing-banner {
      background: var(--pine);
      padding: 60px 60px;
      text-align: center;
    }
    .closing-banner p {
      color: var(--white);
      font-size: 20px;
      font-style: italic;
      font-weight: 500;
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
      line-height: 1.7;
    }

    /* ============================================================
       FAQ ACCORDION
    ============================================================ */
    .faq-item {
      border-bottom: 1px solid var(--border);
    }
    .faq-q {
      padding: 18px 0;
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      text-align: left;
    }
    .faq-q::after {
      content: '+';
      font-size: 22px;
      color: var(--pine);
      flex-shrink: 0;
      transition: transform 0.2s;
    }
    .faq-item.open .faq-q::after {
      transform: rotate(45deg);
    }
    .faq-a {
      display: none;
      padding: 4px 0 20px;
      font-size: 14px;
      line-height: 1.75;
      color: var(--text-mid);
      text-align: justify;
    }
    .faq-item.open .faq-a { display: block; }

    /* ============================================================
       TEAM
    ============================================================ */
    .team-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 24px;
      margin-top: 40px;
      max-width: 1180px;
      margin-left: auto;
      margin-right: auto;
    }

    .team-card {
      background: var(--white);
      border-radius: 12px;
      padding: 32px 24px;
      text-align: center;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    
    .team-portrait {
      width: 130px;
      height: 130px;
      box-sizing: border-box;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
      border: 4px solid var(--wisteria);
      margin: 0 auto 16px;
      background-color: var(--wisteria-light);
    }
    img.team-portrait { object-fit: cover; }
    .team-portrait-initials {
      color: var(--pine);
      font-size: 38px;
      font-weight: 750;
      letter-spacing: -0.04em;
    }
    .team-portrait-bhoumik {
      background-image: url('/assets/img/team-bhoumik.webp') !important;
      background-size: 190% auto;
      background-position: center 9%;
      background-repeat: no-repeat;
    }

    /* ============================================================
       ROADMAP
    ============================================================ */
    .roadmap {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 0;
      margin-top: 40px;
    }

    .roadmap-phase {
      padding: 28px 22px;
      border-right: 1px solid rgba(255,255,255,0.15);
    }
    .roadmap-phase:last-child { border-right: none; }

    .phase-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      opacity: 0.65;
      margin-bottom: 4px;
    }
    .phase-year {
      font-size: 26px;
      font-weight: 700;
      color: var(--wisteria);
      margin-bottom: 10px;
    }
    .phase-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 10px;
    }
    .phase-desc {
      font-size: 13px;
      color: rgba(255,255,255,0.8);
      line-height: 1.6;
      text-align: justify;
    }

    /* ============================================================
       CONTACT FORM
    ============================================================ */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 60px;
    }

    .contact-info-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 24px;
    }

    .contact-icon {
      width: 44px;
      height: 44px;
      background: var(--pine-light);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .contact-socials {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .contact-social-link {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 42px;
      padding: 9px 14px;
      border: 1px solid rgba(0,137,140,0.20);
      border-radius: 999px;
      background: var(--white);
      color: var(--pine-dark);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 8px 22px rgba(3,49,53,0.06);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .contact-social-link:hover {
      transform: translateY(-2px);
      border-color: var(--aqua);
      background: var(--pine-light);
    }
    .contact-social-link svg {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }

    .questionnaire-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 36px;
    }
    .questionnaire-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-height: 230px;
      padding: 28px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow);
    }
    .questionnaire-card .questionnaire-icon {
      font-size: 30px;
      margin-bottom: 14px;
    }
    .questionnaire-card h3 { margin-bottom: 8px; }
    .questionnaire-card p { margin-bottom: 22px; text-align: left; }
    .questionnaire-card .btn { margin-top: auto; }

    .form-group {
      margin-bottom: 18px;
    }
    .form-group label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 5px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 11px 15px;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      font-family: 'Avenir Next','Avenir',sans-serif;
      font-size: 14px;
      color: var(--text);
      background: var(--white);
      transition: border-color 0.18s;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--pine);
    }
    .form-group textarea { resize: vertical; min-height: 100px; }

    /* ============================================================
       COLLAB TAGS
    ============================================================ */
    .collab-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }
    .collab-tag {
      padding: 8px 18px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      border: 1.5px solid var(--pine);
      color: var(--pine);
      background: var(--pine-light);
    }

    /* ============================================================
       HERO BANNER
    ============================================================ */
    .hero-banner {
      background: linear-gradient(135deg, var(--sand) 0%, #dff3f3 100%);
      padding: 96px 60px 80px;
      border-bottom: 1px solid rgba(0,137,140,0.12);
    }

    /* ============================================================
       ICON STRIP  (values section)
    ============================================================ */
    .values-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      margin-top: 40px;
    }
    .value-card {
      background: var(--white);
      border-radius: 12px;
      padding: 26px 20px;
      text-align: center;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }
    .value-icon {
      font-size: 28px;
      margin-bottom: 10px;
    }
    .value-card h3 {
      font-size: 14px;
      font-weight: 700;
      color: var(--pine);
      margin-bottom: 8px;
      text-align: center;
    }
    .value-card p {
      font-size: 12px;
      color: var(--text-mid);
      line-height: 1.55;
      text-align: center;
    }

    /* ============================================================
       PATIENT JOURNEY
    ============================================================ */
    .journey-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 40px;
      position: relative;
    }
    .journey-step {
      display: flex;
      gap: 28px;
      align-items: flex-start;
      padding: 28px 0;
      border-bottom: 1px solid var(--border);
    }
    .journey-step:last-child { border-bottom: none; }
    .journey-num {
      width: 52px;
      height: 52px;
      background: var(--pine);
      color: var(--white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ============================================================
       CLINICIAN VALUE GRID
    ============================================================ */
    .clin-value-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      margin-top: 40px;
    }
    .clin-card {
      background: var(--white);
      border-radius: 12px;
      padding: 28px;
      border-left: 4px solid var(--pine);
      box-shadow: var(--shadow);
    }
    .clin-card.wisteria-border { border-left-color: var(--wisteria); }

    /* ============================================================
       TECHNICAL OVERVIEW TABLE-LIKE
    ============================================================ */
    .tech-grid {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 22px;
      margin-top: 40px;
    }
    .tech-item {
      background: var(--pine);
      border-radius: 12px;
      padding: 28px;
      color: var(--white);
    }
    .tech-item h3 { color: var(--white); margin-bottom: 8px; }
    .tech-item p  { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 1.65; text-align: justify; }

    /* ============================================================
       INVESTMENT THESIS
    ============================================================ */
    .thesis-grid {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 22px;
      margin-top: 40px;
    }
    .thesis-item {
      display: flex;
      gap: 18px;
      background: var(--white);
      border-radius: 12px;
      padding: 24px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }
    .thesis-bullet {
      width: 10px;
      height: 10px;
      background: var(--wisteria);
      border-radius: 50%;
      margin-top: 6px;
      flex-shrink: 0;
    }

    /* ============================================================
       SPECIALTY TAGS
    ============================================================ */
    .specialty-box {
      background: var(--white);
      border-radius: 12px;
      padding: 30px;
      border: 1px solid var(--border);
    }
    .specialty-box h3 {
      font-size: 20px;
      margin-bottom: 10px;
    }
    .specialty-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    .s-tag {
      padding: 5px 14px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      background: var(--pine-light);
      color: var(--pine);
    }

    /* ============================================================
       PARTNER BOX
    ============================================================ */
    .partner-box {
      background: var(--wisteria-light);
      border-radius: 14px;
      padding: 40px;
      border: 1.5px solid var(--wisteria);
      margin-top: 40px;
    }

    /* ============================================================
       PIPELINE IMAGE PLACEHOLDER
    ============================================================ */
    .pipeline-placeholder {
      height: 420px;
      background: linear-gradient(135deg, var(--pine-light), var(--wisteria-light));
      border: 2px dashed var(--pine);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      color: var(--pine);
      margin: 40px 0;
    }

    /* ============================================================
       GUT BRAIN PAGE
    ============================================================ */
    .gut-hero {
      background: linear-gradient(155deg, #003a3b 0%, var(--pine) 55%, #006e71 100%);
      padding: 90px 60px;
      text-align: center;
    }

    .science-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
    }

    .science-img-ph {
      height: 400px;
      background: linear-gradient(135deg, var(--pine-light), var(--wisteria-light));
      border: 2px dashed var(--pine);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      color: var(--pine);
      font-size: 13px;
      font-weight: 600;
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    /* == Tablet (<=960px) == */
    @media (max-width: 960px) {
      .grid-3, .grid-4, .team-grid, .values-grid, .roadmap,
      .tech-grid, .thesis-grid, .clin-value-grid, .questionnaire-grid { grid-template-columns: 1fr; }
      .grid-2    { grid-template-columns: 1fr; }
      .team-grid { max-width: 600px; }
      .stat-strip { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; gap: 40px; }
      .science-content { grid-template-columns: 1fr; }
      .section, .section-sm { padding: 60px 24px; }
      .hero-banner { padding: 80px 24px 64px; }
      .gut-hero  { padding: 60px 24px; }
      .closing-banner { padding: 50px 24px; }
      h1 { font-size: clamp(24px, 5vw, 30px); }
      h2 { font-size: 24px; }
      #site-header { padding: 0 20px; }
      #site-footer { padding: 20px 20px; }
      #main-nav { display: none; }
      #main-nav.open {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 68px;
        left: 0; right: 0;
        background: var(--white);
        padding: 16px 24px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        border-top: 1px solid var(--border);
        z-index: 888;
      }
      .hamburger { display: flex; }
      .btn { min-height: 44px; }
      .hamburger { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
    }

    /* == Small phone (<=600px) == */
    @media (max-width: 600px) {
      h1 { font-size: clamp(20px, 6vw, 26px); line-height: 1.2; }
      h2 { font-size: 21px; }
      h3 { font-size: 17px; }
      .section, .section-sm { padding: 48px 18px; }
      .hero-banner { padding: 64px 18px 52px; }
      .gut-hero  { padding: 48px 18px; }
      .closing-banner { padding: 40px 18px; }
      .stat-num { font-size: 34px; }
      .stat-item { padding: 28px 16px; }
      .btn-group { flex-direction: column; gap: 10px; }
      .btn { width: 100%; text-align: center; min-height: 48px; box-sizing: border-box; }
      #site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 20px 18px;
      }
      .footer-right { margin-left: 0; text-align: left; white-space: normal; }
      .footer-tagline { white-space: normal; }
    }

    /* == Extra small (<=380px) == */
    @media (max-width: 380px) {
      h1 { font-size: clamp(18px, 5.5vw, 22px); }
      h2 { font-size: 19px; }
      .stat-num { font-size: 28px; }
      .section, .section-sm { padding: 40px 14px; }
      #site-header { padding: 0 14px; }
      #site-footer { padding: 18px 14px; }
    }

    /* ============================================================
       ANIMATION KEYFRAMES
    ============================================================ */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(28px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity:0; }
      to   { opacity:1; }
    }
    @keyframes slideInLeft {
      from { opacity:0; transform:translateX(-32px); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes pulse {
      0%,100% { transform:scale(1); opacity:0.7; }
      50%      { transform:scale(1.06); opacity:1; }
    }
    @keyframes floatDot {
      0%,100% { transform:translateY(0); opacity:0.18; }
      50%      { transform:translateY(-14px); opacity:0.38; }
    }
    @keyframes gradientShift {
      0%   { background-position:0% 50%; }
      50%  { background-position:100% 50%; }
      100% { background-position:0% 50%; }
    }
    @keyframes counterUp {
      from { opacity:0; transform:translateY(12px) scale(0.92); }
      to   { opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes shimmer {
      0%   { background-position:-200% 0; }
      100% { background-position:200% 0; }
    }

    /* ============================================================
       LOGO BACKGROUND UTILITY
    ============================================================ */
    .logo-bg {
      position: relative;
      overflow: hidden;
    }
    .logo-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('/assets/img/neurobiome-logo.webp');
      background-repeat: no-repeat;
      background-position: right -60px center;
      background-size: 340px auto;
      opacity: 0.045;
      pointer-events: none;
      z-index: 0;
    }
    .logo-bg > * { position: relative; z-index: 1; }

    /* Hero banner gets larger logo watermark */
    .hero-banner.logo-bg::before {
      background-size: 420px auto;
      background-position: right 40px center;
      opacity: 0.055;
    }

    /* Pine green sections get light logo */
    .section-pine.logo-bg::before {
      opacity: 0.07;
      filter: brightness(0) invert(1);
      background-position: right 60px center;
    }

    /* ============================================================
       HERO BANNER — animated gradient + entrance
    ============================================================ */
    .hero-banner {
      background-size: 200% 200% !important;
      animation: gradientShift 10s ease infinite;
    }

    .hero-banner .eyebrow  { animation: fadeIn   0.5s ease both; animation-delay:0.1s; }
    .hero-banner h1        { animation: fadeUp   0.7s ease both; animation-delay:0.2s; }
    .hero-banner .divider  { animation: fadeUp   0.6s ease both; animation-delay:0.35s; }
    .hero-banner .lead     { animation: fadeUp   0.7s ease both; animation-delay:0.45s; }
    .hero-banner .btn-group{ animation: fadeUp   0.7s ease both; animation-delay:0.6s; }

    /* ============================================================
       SCROLL-REVEAL  (applied via JS IntersectionObserver)
    ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-left {
      opacity: 0;
      transform: translateX(-24px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .reveal-left.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* Staggered children */
    .stagger-children > * {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .stagger-children.visible > *:nth-child(1) { transition-delay:0s;    opacity:1; transform:none; }
    .stagger-children.visible > *:nth-child(2) { transition-delay:0.1s;  opacity:1; transform:none; }
    .stagger-children.visible > *:nth-child(3) { transition-delay:0.2s;  opacity:1; transform:none; }
    .stagger-children.visible > *:nth-child(4) { transition-delay:0.3s;  opacity:1; transform:none; }
    .stagger-children.visible > *:nth-child(5) { transition-delay:0.4s;  opacity:1; transform:none; }
    .stagger-children.visible > *:nth-child(6) { transition-delay:0.5s;  opacity:1; transform:none; }

    /* ============================================================
       CARD HOVER LIFT
    ============================================================ */
    .card {
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 32px rgba(0,137,140,0.13);
    }

    /* Value cards */
    .value-card {
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .value-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 28px rgba(0,137,140,0.11);
    }

    /* Team cards */
    .team-card {
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .team-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 28px rgba(0,137,140,0.11);
    }

    /* Pub cards */
    .pub-card {
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-left-color 0.22s ease;
    }
    .pub-card:hover {
      transform: translateY(-3px);
      border-left-color: var(--wisteria);
      box-shadow: 0 8px 28px rgba(0,137,140,0.1);
    }

    /* Clinician cards */
    .clin-card {
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .clin-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,137,140,0.1);
    }

    /* Specialty boxes */
    .specialty-box {
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .specialty-box:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,137,140,0.1);
    }

    /* Thesis items */
    .thesis-item {
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .thesis-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,137,140,0.09);
    }

    /* ============================================================
       BUTTON ENHANCEMENTS
    ============================================================ */
    .btn {
      position: relative;
      overflow: hidden;
    }
    .btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.15);
      opacity: 0;
      transition: opacity 0.2s;
    }
    .btn:hover::after { opacity: 1; }

    /* ============================================================
       STAT NUMBERS — animated count on entry
    ============================================================ */
    .stat-num {
      display: inline-block;
      animation: none;
    }
    .stat-num.animate {
      animation: counterUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
    }

    /* ============================================================
       HEADER — glass effect on scroll
    ============================================================ */
    #site-header.scrolled {
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 2px 24px rgba(0,137,140,0.12);
    }

    /* ============================================================
       EYEBROW PILLS — shimmer on hover
    ============================================================ */
    .eyebrow {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .eyebrow:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,137,140,0.3);
    }

    /* ============================================================
       ROADMAP PHASES — staggered reveal
    ============================================================ */
    .roadmap-phase {
      transition: background 0.25s ease;
    }
    .roadmap-phase:hover {
      background: rgba(255,255,255,0.08);
      border-radius: 10px;
    }

    /* ============================================================
       FLOATING BACKGROUND DOTS (hero decorative)
    ============================================================ */
    .hero-dots {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }
    .hero-banner { position: relative; }
    .hero-banner .container { position: relative; z-index: 1; }

    .hero-dot {
      position: absolute;
      border-radius: 50%;
      background: var(--pine);
      animation: floatDot linear infinite;
    }

    /* ============================================================
       DIVIDER LINE — animated grow
    ============================================================ */
    .divider {
      width: 0;
      transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .divider.visible { width: 52px; }

    /* ============================================================
       JOURNEY STEPS — slide in left
    ============================================================ */
    .journey-step {
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .journey-step.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* ============================================================
       COLLAB TAGS — stagger bounce
    ============================================================ */
    .collab-tag {
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    }
    .collab-tag:hover {
      transform: translateY(-2px) scale(1.04);
      background: var(--pine);
      color: white;
    }

    /* ============================================================
       NAV ACTIVE UNDERLINE ANIMATION
    ============================================================ */
    #main-nav a {
      position: relative;
    }
    #main-nav a::after {
      content: '';
      position: absolute;
      bottom: 2px; left: 11px; right: 11px;
      height: 2px;
      background: var(--pine);
      border-radius: 1px;
      transform: scaleX(0);
      transition: transform 0.22s ease;
    }
    #main-nav a:hover::after,
    #main-nav a.active::after {
      transform: scaleX(1);
    }

    /* ============================================================
       PAGE TRANSITION
    ============================================================ */
    .page.active {
      animation: fadeIn 0.35s ease both;
    }

    /* ============================================================
       QUOTE BLOCK ACCENT LINE ANIMATION
    ============================================================ */
    .quote-block {
      border-left-width: 4px;
      transition: border-left-color 0.3s ease;
    }
    .quote-block:hover {
      border-left-color: var(--pine);
    }

    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto !important; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ============================================================
       DEVELOPMENT PIPELINE TIMELINE
    ============================================================ */
    .pipeline-timeline {
      display: flex;
      align-items: flex-start;
      gap: 0;
      margin-top: 48px;
      position: relative;
    }
    .pipeline-timeline::before {
      content: '';
      position: absolute;
      top: 28px;
      left: 5%;
      right: 5%;
      height: 3px;
      background: var(--border);
      z-index: 0;
    }
    .pl-stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
      padding: 0 8px;
    }
    .pl-dot {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 3px solid var(--border);
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 14px;
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .pl-stage.active .pl-dot {
      background: var(--pine);
      border-color: var(--pine);
      box-shadow: 0 0 0 6px rgba(0,137,140,0.15);
    }
    .pl-stage.done .pl-dot {
      background: var(--pine-light);
      border-color: var(--pine);
    }
    .pl-stage.upcoming .pl-dot {
      background: var(--sand);
      border-color: rgba(0,137,140,0.25);
    }
    .pl-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--text-mid);
      margin-bottom: 6px;
      text-align: center;
    }
    .pl-stage.active .pl-label {
      color: var(--pine);
    }
    .pl-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      text-align: center;
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .pl-year {
      font-size: 12px;
      color: var(--text-mid);
      text-align: center;
    }
    .pl-badge {
      display: inline-block;
      background: var(--pine);
      color: white;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 20px;
      margin-top: 8px;
    }
    @media (max-width: 960px) {
      .pipeline-timeline {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
      }
      .pipeline-timeline::before { display: none; }
      .pl-stage {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 12px 16px;
        border-radius: 12px;
        background: var(--sand);
        text-align: left;
      }
      .pl-stage.active {
        background: var(--pine-light);
        border: 2px solid var(--pine);
      }
      .pl-dot { margin-bottom: 0; flex-shrink: 0; }
      .pl-label, .pl-title, .pl-year { text-align: left; }
      .pl-text { flex: 1; }
    }

    /* ============================================================
       BACK TO TOP BUTTON
    ============================================================ */
    #back-to-top {
      position: fixed;
      bottom: 28px;
      right: 24px;
      z-index: 8000;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--pine);
      color: white;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0,137,140,0.35);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.3s, transform 0.3s;
      pointer-events: none;
    }
    #back-to-top.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    #back-to-top:hover {
      background: var(--pine-dark);
    }
    #back-to-top svg {
      width: 18px;
      height: 18px;
      stroke: white;
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }


    /* ============================================================
       MOBILE FIXES (added audit pass)
    ============================================================ */

    /* 1. Container needs horizontal padding so content never touches screen edges */
    @media (max-width: 960px) {
      .container { padding: 0 20px; }
    }
    @media (max-width: 600px) {
      .container { padding: 0 16px; }

      /* 2. justify text looks bad on narrow screens — switch to left-align */
      p { text-align: left; }
      .faq-a { text-align: left; }
      .phase-desc { text-align: left; }

      /* 3. Clinician CTA box: reduce padding so it breathes on small phones */
      #clin-cta-box { padding: 24px 18px; }

      /* 4. Clinician form two-column row → single column */
      .clin-form-row { grid-template-columns: 1fr !important; }

      /* 5. Partner box: reduce padding */
      .partner-box { padding: 24px 18px; }

      /* 6. GDPR banner: reduce padding, stack vertically */
      #cookie-banner { padding: 16px 18px !important; flex-direction: column; align-items: flex-start; }

      /* 7. Back-to-top: move slightly inward on small screens */
      #back-to-top { right: 16px; bottom: 20px; }

      /* 8. Pipeline stages: tighten padding */
      .pl-stage { padding: 10px 14px; }
      .pl-dot { width: 44px; height: 44px; font-size: 18px; }

      /* 9. Roadmap phases in investors page */
      .roadmap { grid-template-columns: 1fr !important; }
      .roadmap-phase { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
      .roadmap-phase:last-child { border-bottom: none; }

      /* 10. Stat strip — already 1fr×1fr at 960px, keep 2-col at 600px since stats are short */
      .stat-strip { grid-template-columns: repeat(2, 1fr); }

      /* 11. Values grid (5 cols) → 2 cols on phone */
      .values-grid { grid-template-columns: repeat(2, 1fr); }

      /* 12. Section padding already handled but hero needs safe horizontal breathing room */
      .hero-banner { padding: 64px 18px 52px; }
      .gut-hero { padding: 48px 18px; }

      /* 13. Specialty tags wrap — already flex-wrap so fine */

      /* 14. Team card text shouldn't overflow */
      .team-card { word-break: break-word; }

      /* 15. FAQ question text shouldn't overflow */
      .faq-q { word-break: break-word; }
    }

    @media (max-width: 380px) {
      .container { padding: 0 12px; }
      #clin-cta-box { padding: 18px 14px; }
      .partner-box { padding: 18px 14px; }
      .values-grid { grid-template-columns: 1fr; }
      .stat-strip { grid-template-columns: 1fr; }
    }


    /* Clinicians hero title — hide forced line-break on mobile */
    @media (max-width: 600px) {
      br.hero-br { display: none; }
      .hero-banner h1 { text-align: left; }
      .hero-banner .eyebrow { text-align: left; }
      .hero-banner .lead { text-align: left; }
      .hero-banner .divider { margin-left: 0; }
      .gut-hero h1 { text-align: center; }
      .gut-hero .lead { text-align: center; }
    }

    /* ============================================================
       2026 BIOMEDICAL DESIGN SYSTEM REFRESH
       Keeps the original NeuroBiome logo, palette and page content.
    ============================================================ */
    :root {
      --ink: #062f33;
      --ink-soft: #0b4549;
      --aqua: #17b8b4;
      --aqua-soft: #dff7f4;
      --violet: #c98bd8;
      --violet-soft: #f4e8f7;
      --mist: #f1f8f7;
      --paper: #fbfdfc;
      --body-text: #173b3e;
      --muted: #5d7779;
      --premium-border: rgba(6, 79, 83, 0.12);
      --premium-shadow: 0 24px 70px rgba(3, 49, 53, 0.10);
      --premium-shadow-hover: 0 30px 80px rgba(3, 49, 53, 0.17);
    }

    body {
      background: var(--paper);
      color: var(--body-text);
      font-size: 16px;
      line-height: 1.72;
      letter-spacing: -0.005em;
    }

    p { color: var(--muted); text-align: left; }

    #site-header {
      height: 78px;
      padding: 0 clamp(22px, 4vw, 64px);
      gap: 18px;
      background: rgba(255,255,255,0.88);
      border-bottom: 1px solid rgba(0,137,140,0.14);
      box-shadow: 0 10px 35px rgba(5,54,57,0.06);
      backdrop-filter: blur(18px) saturate(150%);
      -webkit-backdrop-filter: blur(18px) saturate(150%);
    }

    .header-logo-wrap { gap: 12px; }
    .header-logo-box {
      width: 50px;
      height: 50px;
      border: 1px solid rgba(0,137,140,0.26);
      border-radius: 14px;
      background: rgba(229,245,245,0.72);
      box-shadow: 0 8px 24px rgba(0,137,140,0.10);
    }
    .header-brand {
      color: var(--ink);
      font-size: 22px;
      font-weight: 750;
      letter-spacing: -0.7px;
    }
    #main-content { margin-top: 78px; }
    #main-nav { gap: 2px; }
    #main-nav a {
      color: #244a4d;
      font-size: 12.5px;
      font-weight: 650;
      padding: 9px 11px;
      border-radius: 999px;
    }
    #main-nav a:hover,
    #main-nav a.active {
      background: rgba(0,137,140,0.09);
      color: var(--pine-dark);
    }
    #main-nav a::after { display: none; }

    .container { max-width: 1180px; }
    .section, .section-sm {
      position: relative;
      overflow: hidden;
    }
    .section { padding: 108px 54px; }
    .section-sm { padding: 76px 54px; }
    .section-white { background: var(--paper); }
    .section-sand { background: linear-gradient(145deg, #f8f5f0 0%, #f4faf8 100%); }
    .section-wisteria-light { background: linear-gradient(145deg, #fbf5fc 0%, #f2faf9 100%); }
    .section-pine {
      background:
        radial-gradient(circle at 86% 10%, rgba(201,139,216,0.22), transparent 28%),
        radial-gradient(circle at 8% 85%, rgba(23,184,180,0.20), transparent 30%),
        linear-gradient(135deg, var(--pine-dark) 0%, var(--pine) 100%);
    }

    h1, h2, h3 { letter-spacing: -0.035em; }
    h1 {
      font-size: clamp(48px, 5.4vw, 72px);
      line-height: 1.02;
      font-weight: 760;
    }
    h2 {
      color: var(--ink);
      font-size: clamp(34px, 3vw, 46px);
      line-height: 1.12;
      margin-bottom: 16px;
      max-width: 850px;
    }
    h3 {
      color: var(--ink-soft);
      font-size: 19px;
      line-height: 1.3;
      font-weight: 720;
    }
    .lead {
      color: #47696c;
      font-size: 18px;
      line-height: 1.78;
    }
    .eyebrow {
      color: #d8fffb;
      background: rgba(12,123,126,0.90);
      border: 1px solid rgba(255,255,255,0.18);
      padding: 7px 15px;
      margin-bottom: 24px;
      font-size: 10px;
      letter-spacing: 2px;
      box-shadow: 0 8px 20px rgba(0,109,112,0.12);
    }
    .eyebrow-wisteria {
      color: #6b2e76;
      background: rgba(219,166,227,0.30);
      border-color: rgba(166,91,178,0.18);
      box-shadow: none;
    }
    .divider {
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--aqua), var(--violet));
      margin: 18px 0 30px;
    }

    /* Immersive biomedical hero */
    .hero-banner,
    .gut-hero {
      min-height: 510px;
      display: flex;
      align-items: center;
      padding: 112px 54px 104px;
      border-bottom: 0;
      background:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        radial-gradient(circle at 78% 18%, rgba(219,166,227,0.28), transparent 25%),
        radial-gradient(circle at 92% 78%, rgba(23,184,180,0.24), transparent 26%),
        linear-gradient(125deg, var(--pine-dark) 0%, var(--pine) 62%, var(--pine-dark) 100%) !important;
      background-size: 42px 42px, 42px 42px, auto, auto, auto !important;
      animation: none;
      isolation: isolate;
    }
    #page-home .hero-banner { min-height: 650px; }
    #page-patients .hero-banner {
      background:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        radial-gradient(circle at 80% 25%, rgba(219,166,227,0.34), transparent 30%),
        linear-gradient(125deg, var(--pine-dark) 0%, var(--pine) 100%) !important;
      background-size: 42px 42px, 42px 42px, auto, auto !important;
    }
    #page-clinicians .hero-banner {
      background:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        radial-gradient(circle at 80% 18%, rgba(23,184,180,0.34), transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(219,166,227,0.20), transparent 24%),
        linear-gradient(125deg, var(--pine-dark) 0%, var(--pine) 100%) !important;
      background-size: 42px 42px, 42px 42px, auto, auto, auto !important;
    }
    #page-investors .hero-banner {
      background:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        radial-gradient(circle at 82% 24%, rgba(201,139,216,0.35), transparent 28%),
        linear-gradient(125deg, var(--pine-dark) 0%, var(--pine) 100%) !important;
      background-size: 42px 42px, 42px 42px, auto, auto !important;
    }
    .hero-banner::after,
    .gut-hero::after {
      content: '';
      position: absolute;
      width: 360px;
      height: 360px;
      right: 8%;
      top: 50%;
      border-radius: 50%;
      transform: translateY(-50%);
      border: 1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(255,255,255,0.08) 18.5% 19%, transparent 19.5% 34%, rgba(255,255,255,0.06) 34.5% 35%, transparent 35.5%),
        radial-gradient(circle at 38% 32%, rgba(219,166,227,0.50) 0 4px, transparent 5px),
        radial-gradient(circle at 68% 44%, rgba(116,231,223,0.62) 0 5px, transparent 6px),
        radial-gradient(circle at 44% 72%, rgba(255,255,255,0.44) 0 3px, transparent 4px);
      box-shadow: inset 0 0 70px rgba(255,255,255,0.04), 0 0 90px rgba(12,184,180,0.10);
      pointer-events: none;
      z-index: 0;
    }
    .hero-banner.logo-bg::before,
    .gut-hero.logo-bg::before {
      background-size: 350px auto;
      background-position: calc(100% - 110px) center;
      opacity: 0.18;
      filter: brightness(0) invert(1);
      z-index: 1;
    }
    .hero-banner .container,
    .gut-hero .container { width: 100%; position: relative; z-index: 2; }
    .gut-hero {
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }
    .gut-hero h1 {
      color: #f1cdf6 !important;
      font-size: clamp(48px, 5.4vw, 72px) !important;
      text-align: center !important;
      margin-bottom: 12px;
    }
    .gut-hero > p {
      max-width: 820px !important;
      color: rgba(231,250,248,0.80) !important;
      text-align: center !important;
    }
    .hero-banner .container > :not(.btn-group),
    .gut-hero .container > :not(.btn-group) { max-width: 760px; }
    .hero-banner h1,
    .gut-hero h1 {
      color: #f6ffff;
      max-width: 900px !important;
      text-shadow: 0 8px 35px rgba(0,0,0,0.16);
    }
    .hero-banner .lead,
    .gut-hero .lead {
      color: rgba(231,250,248,0.80) !important;
      max-width: 760px !important;
    }
    #page-home .hero-banner p[style] { color: #bff5ee !important; }
    .hero-banner .eyebrow,
    .gut-hero .eyebrow {
      background: rgba(219,166,227,0.16);
      border-color: rgba(219,166,227,0.42);
      color: #f5d7fa;
      box-shadow: none;
    }
    .hero-banner .divider,
    .gut-hero .divider { background: linear-gradient(90deg, #76e5dc, var(--violet)); }
    .hero-dots { opacity: 0.5; }

    /* Buttons */
    .btn {
      min-height: 48px;
      padding: 13px 24px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 720;
      letter-spacing: 0.01em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .btn-primary {
      background: linear-gradient(135deg, #18aaa8 0%, #087d80 100%);
      box-shadow: 0 14px 30px rgba(0,137,140,0.25);
    }
    .hero-banner .btn-primary {
      color: var(--ink);
      background: #84ebe2;
      box-shadow: 0 15px 35px rgba(0,0,0,0.20);
    }
    .hero-banner .btn-outline {
      color: white;
      border-color: rgba(255,255,255,0.50);
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(8px);
    }
    .hero-banner .btn-outline:hover { background: rgba(255,255,255,0.15); }
    .btn-wisteria { background: linear-gradient(135deg, #dca8e4, #b973c6); }
    .btn-white { color: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }

    /* Premium content cards */
    .grid-2, .grid-3, .grid-4,
    .clin-value-grid, .tech-grid, .thesis-grid,
    .team-grid, .questionnaire-grid { gap: 24px; }
    .card, .clin-card, .tech-item, .thesis-item,
    .specialty-box, .value-card, .team-card,
    .questionnaire-card, .partner-box, .pub-card {
      border: 1px solid var(--premium-border);
      border-radius: 24px;
      box-shadow: var(--premium-shadow);
    }
    .card {
      position: relative;
      overflow: hidden;
      padding: 34px;
      background: rgba(255,255,255,0.88);
    }
    .card::before {
      content: '';
      position: absolute;
      left: 26px;
      right: 26px;
      top: 0;
      height: 3px;
      border-radius: 0 0 99px 99px;
      background: linear-gradient(90deg, var(--aqua), var(--violet));
    }
    .card-pine-border, .card-wisteria-border { border-top: 1px solid var(--premium-border); }
    .card:hover, .clin-card:hover, .tech-item:hover,
    .thesis-item:hover, .specialty-box:hover,
    .value-card:hover, .team-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--premium-shadow-hover);
    }

    /* Homepage pillars */
    #page-home > .section-white .grid-3 .card {
      min-height: 330px;
      padding: 38px 34px;
    }
    #page-home > .section-white .card-num {
      width: 70px;
      height: 70px;
      display: grid;
      place-items: center;
      border-radius: 22px;
      margin-bottom: 28px;
      color: white !important;
      font-size: 26px;
      background: linear-gradient(145deg, var(--ink-soft), var(--pine));
      box-shadow: 0 16px 30px rgba(0,137,140,0.18);
    }
    #page-home > .section-white .card:nth-child(2) .card-num {
      background: linear-gradient(145deg, var(--violet), #a95bbb);
    }
    #page-home > .section-white .card h3 { font-size: 22px; }
    #page-home > .section-white .card p { line-height: 1.78; }

    /* Homepage mission and audience portal */
    #page-home > .section-pine { padding-top: 120px; padding-bottom: 120px; }
    #page-home > .section-pine h2 {
      color: #f1cdf6 !important;
      font-size: clamp(40px, 4vw, 56px) !important;
    }
    #page-home > .section-sand {
      background:
        radial-gradient(circle at 20% 10%, rgba(23,184,180,0.18), transparent 28%),
        radial-gradient(circle at 90% 85%, rgba(201,139,216,0.19), transparent 30%),
        var(--ink);
    }
    #page-home > .section-sand h2,
    #page-home > .section-sand h3 { color: white; }
    #page-home > .section-sand .container > p { color: rgba(230,249,247,0.68); }
    #page-home > .section-sand .card {
      min-height: 310px;
      color: white;
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.13);
      box-shadow: 0 28px 70px rgba(0,0,0,0.18);
      backdrop-filter: blur(10px);
    }
    #page-home > .section-sand .card p { color: rgba(230,249,247,0.72); }
    #page-home > .section-sand .card > div:first-child {
      width: 72px;
      height: 72px;
      display: grid;
      place-items: center;
      margin: 0 auto 24px !important;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(118,229,220,0.20), rgba(219,166,227,0.20));
    }
    #page-home > .section-sand .card > div:first-child img {
      max-width: 44px;
      max-height: 44px;
      margin: auto;
    }
    #page-home > .section-sand .btn-outline {
      color: #a9f5ee;
      border-color: rgba(169,245,238,0.44);
    }

    /* Patient experience */
    #page-patients .section-white .grid-3 .card { min-height: 275px; }
    #page-patients .section-white .grid-3 .card:first-child {
      background: linear-gradient(145deg, #07393d, #087c7f) !important;
    }
    #page-patients .section-white .grid-3 .card:first-child h3 { color: #f1cdf6 !important; }
    #page-patients .section-white .grid-3 .card:first-child p { color: rgba(255,255,255,0.78) !important; }
    #page-patients .section-sand .grid-2 { counter-reset: patient-benefit; }
    #page-patients .section-sand .grid-2 .card {
      counter-increment: patient-benefit;
      padding-top: 72px;
    }
    #page-patients .section-sand .grid-2 .card::after {
      content: '0' counter(patient-benefit);
      position: absolute;
      top: 25px;
      right: 28px;
      color: rgba(0,137,140,0.24);
      font-size: 30px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.06em;
    }
    .journey-steps { gap: 16px; }
    .journey-steps::before {
      content: '';
      position: absolute;
      left: 34px;
      top: 45px;
      bottom: 45px;
      width: 2px;
      background: linear-gradient(var(--aqua), var(--violet));
      opacity: 0.3;
    }
    .journey-step {
      position: relative;
      z-index: 1;
      gap: 24px;
      padding: 26px 28px;
      border: 1px solid var(--premium-border);
      border-radius: 20px;
      background: rgba(255,255,255,0.94);
      box-shadow: 0 16px 45px rgba(3,49,53,0.07);
    }
    .journey-num {
      width: 58px;
      height: 58px;
      background: linear-gradient(145deg, var(--pine), var(--ink-soft));
      box-shadow: 0 10px 25px rgba(0,137,140,0.22);
    }
    .faq-item {
      margin-bottom: 12px;
      padding: 0 24px;
      border: 1px solid var(--premium-border);
      border-radius: 16px;
      background: rgba(255,255,255,0.78);
      box-shadow: 0 10px 30px rgba(3,49,53,0.05);
    }
    .faq-q { padding: 21px 0; color: var(--ink); }

    /* Clinical platform */
    .clin-value-grid { gap: 18px; }
    .clin-card {
      position: relative;
      overflow: hidden;
      padding: 32px 32px 32px 82px;
      border-left: 1px solid var(--premium-border);
      background: rgba(255,255,255,0.94);
    }
    .clin-card::before {
      content: '';
      position: absolute;
      left: 30px;
      top: 34px;
      width: 28px;
      height: 28px;
      border: 7px solid rgba(0,137,140,0.14);
      border-radius: 50%;
      background: var(--pine);
      box-shadow: 0 0 0 1px rgba(0,137,140,0.15);
    }
    .clin-card.wisteria-border { border-left-color: var(--premium-border); }
    .clin-card.wisteria-border::before {
      background: var(--violet);
      border-color: rgba(201,139,216,0.16);
    }
    .clin-card h3 { font-size: 20px; }
    .specialty-box {
      padding: 38px;
      background: rgba(255,255,255,0.86);
    }
    .specialty-box > img {
      width: 62px !important;
      height: 62px !important;
      padding: 13px;
      border-radius: 20px;
      background: linear-gradient(145deg, var(--aqua-soft), var(--violet-soft));
    }
    .s-tag {
      padding: 7px 13px;
      border: 1px solid rgba(0,137,140,0.13);
      background: rgba(223,247,244,0.78);
    }
    .tech-item {
      position: relative;
      overflow: hidden;
      min-height: 210px;
      padding: 34px;
      background:
        radial-gradient(circle at 90% 10%, rgba(219,166,227,0.24), transparent 35%),
        linear-gradient(145deg, var(--ink), #08666a);
      color: white;
    }
    .tech-item h3 { color: #b8f7f0; font-size: 21px; }
    .tech-item p { color: rgba(237,252,250,0.72); }
    .partner-box {
      padding: 44px;
      background: rgba(255,255,255,0.60);
      border-color: rgba(201,139,216,0.38);
      backdrop-filter: blur(10px);
    }

    /* Investor story */
    #page-investors .stat-strip {
      gap: 22px;
      overflow: visible;
      background: transparent;
    }
    #page-investors .stat-item {
      position: relative;
      overflow: hidden;
      min-height: 230px;
      padding: 56px 30px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 24px;
      background:
        radial-gradient(circle at 90% 8%, rgba(219,166,227,0.30), transparent 34%),
        linear-gradient(145deg, var(--ink), #08666a);
      box-shadow: var(--premium-shadow);
    }
    #page-investors .stat-num {
      color: #e8baf0;
      font-size: clamp(48px, 5vw, 68px);
      text-shadow: 0 12px 30px rgba(0,0,0,0.18);
    }
    #page-investors .stat-label { color: rgba(238,252,250,0.72); }
    .thesis-grid { counter-reset: thesis; }
    .thesis-item {
      counter-increment: thesis;
      padding: 30px;
      background: rgba(255,255,255,0.88);
    }
    .thesis-bullet {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      margin-top: 0;
      color: white;
      background: linear-gradient(145deg, var(--violet), #a960b7);
      box-shadow: 0 10px 25px rgba(169,96,183,0.20);
    }
    .thesis-bullet::before {
      content: counter(thesis, decimal-leading-zero);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.05em;
    }
    #page-investors > .section-pine { background: var(--ink); }
    .roadmap {
      gap: 16px;
      margin-top: 48px;
    }
    .roadmap-phase {
      min-height: 300px;
      padding: 30px 24px;
      border: 1px solid rgba(255,255,255,0.10);
      border-right: 1px solid rgba(255,255,255,0.10);
      border-radius: 20px;
      background: rgba(255,255,255,0.055);
      backdrop-filter: blur(8px);
    }
    .roadmap-phase:hover { background: rgba(255,255,255,0.10); }
    .phase-year { color: #e5b5ed; font-size: 30px; }
    .phase-title { color: #b6f6ef; font-size: 15px; }

    /* Team, values, science and publication surfaces */
    .value-card {
      min-height: 245px;
      padding: 30px 22px;
      background: rgba(255,255,255,0.84);
    }
    .value-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      margin: 0 auto 18px;
      border-radius: 18px;
      background: linear-gradient(145deg, var(--aqua-soft), var(--violet-soft));
    }
    .quote-block {
      border: 1px solid rgba(201,139,216,0.25);
      border-left: 5px solid var(--violet);
      border-radius: 24px;
      padding: 42px 48px;
      background: linear-gradient(145deg, rgba(244,232,247,0.60), rgba(223,247,244,0.60));
      box-shadow: var(--premium-shadow);
    }
    .quote-block p { color: var(--ink); font-size: 23px; }
    .team-card {
      padding: 38px 28px;
      background: rgba(255,255,255,0.88);
    }
    .team-portrait {
      box-shadow: 0 14px 35px rgba(3,49,53,0.14);
    }
    .pub-card {
      padding: 28px 30px;
      border-left: 1px solid var(--premium-border);
      background: rgba(255,255,255,0.88);
    }
    .pub-card::before {
      content: '';
      display: block;
      width: 42px;
      height: 3px;
      margin-bottom: 18px;
      border-radius: 10px;
      background: linear-gradient(90deg, var(--aqua), var(--violet));
    }
    .pub-year { background: var(--ink-soft); }
    .science-content { gap: 68px; }

    /* Pipeline and forms */
    .pipeline-timeline::before {
      height: 2px;
      background: linear-gradient(90deg, var(--aqua), var(--violet));
      opacity: 0.4;
    }
    .pl-dot {
      width: 64px;
      height: 64px;
      border: 1px solid var(--premium-border);
      box-shadow: 0 12px 28px rgba(3,49,53,0.10);
    }
    .pl-stage.active .pl-dot {
      background: linear-gradient(145deg, var(--pine), var(--ink-soft));
      box-shadow: 0 0 0 8px rgba(0,137,140,0.10), 0 15px 30px rgba(0,137,140,0.20);
    }
    .questionnaire-card { padding: 32px; background: rgba(255,255,255,0.84); }
    .questionnaire-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: linear-gradient(145deg, var(--aqua-soft), var(--violet-soft));
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      padding: 14px 16px;
      border: 1px solid rgba(6,79,83,0.16);
      border-radius: 12px;
      background: rgba(255,255,255,0.90);
      box-shadow: inset 0 1px 2px rgba(3,49,53,0.03);
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--aqua);
      box-shadow: 0 0 0 4px rgba(23,184,180,0.10);
    }

    /* CTA and footer */
    .closing-banner {
      position: relative;
      overflow: hidden;
      padding: 92px 54px;
      background:
        radial-gradient(circle at 15% 20%, rgba(23,184,180,0.28), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(201,139,216,0.26), transparent 30%),
        var(--ink);
    }
    .closing-banner::before {
      content: '';
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 28px;
      pointer-events: none;
    }
    .closing-banner p { color: rgba(235,252,250,0.78); }
    #site-footer {
      padding: 34px clamp(22px, 4vw, 64px);
      background: #03272b;
      border-top: 1px solid rgba(255,255,255,0.10);
    }
    .footer-logo-box {
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 12px;
    }

    @media (max-width: 1100px) {
      #main-nav a { padding: 8px 8px; font-size: 11.5px; }
      .header-brand { font-size: 20px; }
      .hero-banner::after, .gut-hero::after { right: -80px; opacity: 0.6; }
    }

    @media (max-width: 960px) {
      #site-header { height: 72px; }
      #main-content { margin-top: 72px; }
      #main-nav.open { top: 72px; padding: 22px; border-radius: 0 0 22px 22px; }
      #main-nav.open a { width: 100%; padding: 12px 16px; font-size: 14px; }
      .section, .section-sm { padding: 82px 28px; }
      .hero-banner, .gut-hero { min-height: 540px; padding: 88px 28px 80px; }
      #page-home .hero-banner { min-height: 620px; }
      .hero-banner::after, .gut-hero::after { width: 280px; height: 280px; right: -100px; }
      .hero-banner.logo-bg::before, .gut-hero.logo-bg::before {
        background-size: 260px auto;
        background-position: calc(100% + 30px) center;
        opacity: 0.12;
      }
      h1 { font-size: clamp(42px, 7vw, 58px); }
      .roadmap-phase { min-height: 0; }
      .clin-card { padding-left: 78px; }
    }

    @media (max-width: 600px) {
      body { font-size: 15px; }
      #site-header { height: 68px; padding: 0 18px; }
      #main-content { margin-top: 68px; }
      .header-logo-box { width: 44px; height: 44px; border-radius: 12px; }
      .header-brand { font-size: 18px; }
      .section, .section-sm { padding: 70px 20px; }
      .container { padding: 0; }
      .hero-banner, .gut-hero { min-height: 500px; padding: 74px 20px 68px; }
      #page-home .hero-banner { min-height: 610px; }
      .hero-banner::after, .gut-hero::after { width: 230px; height: 230px; right: -120px; top: 28%; opacity: 0.35; }
      .hero-banner.logo-bg::before, .gut-hero.logo-bg::before { opacity: 0.08; }
      h1 { font-size: clamp(36px, 11vw, 46px); line-height: 1.04; }
      br.hero-br { display: block; }
      #page-clinicians .hero-banner h1 {
        font-size: clamp(34px, 9.2vw, 36px);
        overflow-wrap: anywhere;
      }
      h2 { font-size: 31px; }
      .lead { font-size: 16px; }
      .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
      .card { padding: 30px 26px; }
      #page-home > .section-white .grid-3 .card { min-height: 0; }
      #page-home > .section-sand .card { min-height: 0; }
      .clin-card { padding: 72px 26px 28px; }
      .clin-card::before { left: 26px; top: 25px; }
      .journey-steps::before { left: 25px; }
      .journey-step { padding: 24px 20px; gap: 18px; }
      .journey-num { width: 48px; height: 48px; }
      .quote-block { padding: 32px 26px; }
      .quote-block p { font-size: 19px; }
      .partner-box { padding: 28px 22px; }
      .closing-banner { padding: 74px 22px; }
      .closing-banner::before { inset: 10px; border-radius: 20px; }
      .stat-strip { grid-template-columns: 1fr; }
    }

    /* ============================================================
       EXPERIENCE REFINEMENT — PATHWAYS, AUDIENCES & VALUES
    ============================================================ */

    /* Homepage: turn the three numbered cards into one biological pathway */
    #page-home > .section-white {
      background:
        radial-gradient(circle at 8% 30%, rgba(23,184,180,0.08), transparent 24%),
        radial-gradient(circle at 90% 80%, rgba(201,139,216,0.09), transparent 26%),
        var(--paper);
    }
    #page-home > .section-white .grid-3 {
      position: relative;
      gap: 0;
      padding: 58px 26px 38px;
      overflow: hidden;
      border: 1px solid rgba(6,79,83,0.10);
      border-radius: 38px;
      background:
        linear-gradient(rgba(6,79,83,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6,79,83,0.025) 1px, transparent 1px),
        rgba(255,255,255,0.78);
      background-size: 28px 28px, 28px 28px, auto;
      box-shadow: 0 30px 90px rgba(3,49,53,0.09);
    }
    #page-home > .section-white .grid-3::before {
      content: '';
      position: absolute;
      top: 105px;
      left: 17%;
      right: 17%;
      height: 3px;
      background: repeating-linear-gradient(90deg, rgba(23,184,180,0.55) 0 9px, transparent 9px 17px);
      z-index: 0;
    }
    #page-home > .section-white .grid-3::after {
      content: '';
      position: absolute;
      width: 280px;
      height: 280px;
      right: -140px;
      bottom: -150px;
      border: 1px solid rgba(201,139,216,0.18);
      border-radius: 50%;
      box-shadow: 0 0 0 38px rgba(201,139,216,0.025), 0 0 0 76px rgba(23,184,180,0.02);
      pointer-events: none;
    }
    #page-home > .section-white .grid-3 .card {
      position: relative;
      z-index: 1;
      min-height: 0;
      padding: 0 34px 28px;
      border: 0;
      border-radius: 28px;
      background: transparent;
      box-shadow: none;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    #page-home > .section-white .grid-3 .card::before { display: none; }
    #page-home > .section-white .grid-3 .card:hover {
      transform: translateY(-7px);
      background: rgba(255,255,255,0.72);
      box-shadow: none;
    }
    #page-home > .section-white .grid-3 .card-num {
      position: relative;
      z-index: 2;
      width: 96px;
      height: 96px;
      margin: 0 auto 30px;
      border: 9px solid rgba(230,250,248,0.94);
      border-radius: 50%;
      font-size: 23px;
      background: linear-gradient(145deg, #0cb2ad, #056a6e);
      box-shadow: 0 0 0 1px rgba(0,137,140,0.14), 0 18px 38px rgba(0,137,140,0.24);
      transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
    }
    #page-home > .section-white .grid-3 .card:nth-child(2) .card-num {
      background: linear-gradient(145deg, #dfaae7, #a75ab7);
      box-shadow: 0 0 0 1px rgba(169,90,183,0.14), 0 18px 38px rgba(169,90,183,0.22);
    }
    #page-home > .section-white .grid-3 .card:hover .card-num {
      transform: translateY(-5px) scale(1.06);
      box-shadow: 0 0 0 8px rgba(23,184,180,0.08), 0 22px 46px rgba(0,137,140,0.28);
    }
    #page-home > .section-white .grid-3 .card:nth-child(2):hover .card-num {
      box-shadow: 0 0 0 8px rgba(201,139,216,0.10), 0 22px 46px rgba(169,90,183,0.26);
    }
    #page-home > .section-white .grid-3 .card h3 {
      margin-bottom: 14px;
      text-align: center;
      font-size: 21px;
    }
    #page-home > .section-white .grid-3 .card p {
      margin: 0 auto;
      max-width: 290px;
      text-align: left;
      font-size: 14px;
    }

    /* Homepage: light audience portal for a clear dark/light rhythm */
    #page-home > .section-sand {
      background:
        radial-gradient(circle at 12% 18%, rgba(23,184,180,0.12), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(201,139,216,0.15), transparent 30%),
        linear-gradient(145deg, #f8fcfb 0%, #f8f3fa 100%);
    }
    #page-home > .section-sand h2,
    #page-home > .section-sand h3 { color: var(--ink); }
    #page-home > .section-sand .container > p,
    #page-home > .section-sand .card p { color: var(--muted); }
    #page-home > .section-sand .card {
      color: var(--body-text);
      background: rgba(255,255,255,0.84);
      border-color: rgba(6,79,83,0.12);
      box-shadow: 0 24px 65px rgba(3,49,53,0.10);
    }
    #page-home > .section-sand .card:hover {
      background: rgba(255,255,255,0.98);
      box-shadow: 0 30px 75px rgba(3,49,53,0.16);
    }
    #page-home > .section-sand .btn-outline {
      color: var(--pine-dark);
      border-color: rgba(0,137,140,0.44);
      background: rgba(229,245,245,0.50);
    }
    #page-home > .section-sand .btn-outline:hover {
      color: white;
      background: var(--pine);
      border-color: var(--pine);
    }

    /* Homepage: bespoke vector audience icons instead of emoji */
    #page-home > .section-sand .grid-3 .card > div:first-child {
      position: relative;
      width: 82px;
      height: 82px;
      font-size: 0 !important;
      border-radius: 26px;
      background: linear-gradient(145deg, #075b5f, #093f46);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 14px 30px rgba(3,49,53,0.18);
      transition: transform 0.3s ease, background 0.3s ease;
    }
    #page-home > .section-sand .grid-3 .card > div:first-child img { display: none !important; }
    #page-home > .section-sand .grid-3 .card:nth-child(2) > img:first-child {
      display: none !important;
    }
    #page-home .audience-vector-icon {
      position: relative;
      width: 82px;
      height: 82px;
      margin: 0 auto 24px;
      border-radius: 26px;
      background: linear-gradient(145deg, #075b5f, #093f46);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 14px 30px rgba(3,49,53,0.18);
      transition: transform 0.3s ease, background 0.3s ease;
    }
    #page-home .audience-vector-icon::before {
      content: '';
      position: absolute;
      inset: 18px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b9f6ef' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 7v13a10 10 0 0 0 20 0V7M10 7h8M30 7h8M19 7v12a5 5 0 0 0 10 0V7'/%3E%3Cpath d='M34 20v10a7 7 0 0 0 14 0v-3'/%3E%3Ccircle cx='45' cy='24' r='3'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    #page-home > .section-sand .grid-3 .card > div:first-child::before {
      content: '';
      position: absolute;
      inset: 18px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    #page-home > .section-sand .grid-3 .card:nth-child(1) > div:first-child::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b9f6ef' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5C16.7 5 11 10.5 11 18c0 5.1 2.9 8.1 6.2 11v8.5A5.5 5.5 0 0 0 22.7 43h2.6a5.5 5.5 0 0 0 5.5-5.5V29c3.3-2.9 6.2-5.9 6.2-11C37 10.5 31.3 5 24 5Z'/%3E%3Cpath d='M14 20h6l2.5-6 4.5 12 2.5-6H35M20 34h8'/%3E%3C/svg%3E");
    }
    #page-home > .section-sand .grid-3 .card:nth-child(2) > div:first-child::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b9f6ef' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 7v13a10 10 0 0 0 20 0V7M10 7h8M30 7h8M19 7v12a5 5 0 0 0 10 0V7'/%3E%3Cpath d='M34 20v10a7 7 0 0 0 14 0v-3'/%3E%3Ccircle cx='45' cy='24' r='3'/%3E%3C/svg%3E");
    }
    #page-home > .section-sand .grid-3 .card:nth-child(3) > div:first-child::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b9f6ef' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 40h34M11 34l9-10 7 5 11-15'/%3E%3Cpath d='M30 14h8v8'/%3E%3Ccircle cx='11' cy='34' r='2' fill='%23dba6e3' stroke='none'/%3E%3Ccircle cx='20' cy='24' r='2' fill='%23dba6e3' stroke='none'/%3E%3Ccircle cx='27' cy='29' r='2' fill='%23dba6e3' stroke='none'/%3E%3C/svg%3E");
    }
    #page-home > .section-sand .grid-3 .card:hover > div:first-child {
      transform: translateY(-5px) rotate(-2deg);
      background: linear-gradient(145deg, #087b7f, #68486e);
    }
    #page-home > .section-sand .grid-3 .card:nth-child(2):hover .audience-vector-icon {
      transform: translateY(-5px) rotate(-2deg);
      background: linear-gradient(145deg, #087b7f, #68486e);
    }

    /* About: interactive values accordion */
    #page-about .values-grid {
      display: flex;
      align-items: stretch;
      gap: 14px;
      min-height: 390px;
      perspective: 1000px;
    }
    #page-about .value-card {
      position: relative;
      flex: 1;
      min-width: 0;
      min-height: 390px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      overflow: hidden;
      padding: 28px 24px;
      cursor: pointer;
      text-align: left;
      background:
        radial-gradient(circle at 85% 8%, rgba(201,139,216,0.17), transparent 30%),
        rgba(255,255,255,0.80);
      outline: none;
      transition: flex 0.48s cubic-bezier(.2,.8,.2,1), transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
    }
    #page-about .value-card::after {
      position: absolute;
      right: 20px;
      top: 18px;
      color: rgba(6,79,83,0.10);
      font-size: 52px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.08em;
    }
    #page-about .value-card:nth-child(1)::after { content: '01'; }
    #page-about .value-card:nth-child(2)::after { content: '02'; }
    #page-about .value-card:nth-child(3)::after { content: '03'; }
    #page-about .value-card:nth-child(4)::after { content: '04'; }
    #page-about .value-card:nth-child(5)::after { content: '05'; }
    #page-about .value-card:hover { transform: translateY(-5px); }
    #page-about .value-card:focus-visible { box-shadow: 0 0 0 4px rgba(23,184,180,0.20), var(--premium-shadow); }
    #page-about .value-card.active {
      flex: 2.25;
      transform: translateY(-7px);
      color: white;
      background:
        radial-gradient(circle at 82% 12%, rgba(219,166,227,0.34), transparent 34%),
        radial-gradient(circle at 12% 90%, rgba(23,184,180,0.24), transparent 34%),
        linear-gradient(145deg, #073438, #075c61);
      box-shadow: 0 30px 75px rgba(3,49,53,0.20);
    }
    #page-about .value-card.active::after { color: rgba(255,255,255,0.11); }
    #page-about .value-icon {
      flex: 0 0 auto;
      width: 62px;
      height: 62px;
      margin: 0 0 24px;
      font-size: 0;
      border: 1px solid rgba(0,137,140,0.12);
      border-radius: 20px;
      background-color: rgba(223,247,244,0.90);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 34px 34px;
      box-shadow: 0 12px 28px rgba(3,49,53,0.10);
    }
    #page-about .value-icon img { display: none !important; }
    #page-about .value-card > img { display: none !important; }
    #page-about .value-card:nth-child(1) .value-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5 38 11v11c0 9-5.8 16.2-14 21-8.2-4.8-14-12-14-21V11l14-6Z'/%3E%3Cpath d='m17 24 5 5 10-11'/%3E%3C/svg%3E");
    }
    #page-about .value-card:nth-child(2) .value-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.2' stroke-linecap='round'%3E%3Cellipse cx='24' cy='24' rx='18' ry='7'/%3E%3Cellipse cx='24' cy='24' rx='18' ry='7' transform='rotate(60 24 24)'/%3E%3Cellipse cx='24' cy='24' rx='18' ry='7' transform='rotate(120 24 24)'/%3E%3Ccircle cx='24' cy='24' r='3' fill='%23c98bd8' stroke='none'/%3E%3C/svg%3E");
    }
    #page-about .value-card:nth-child(3) .value-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 7v34M12 13h24M9 39h30'/%3E%3Cpath d='m12 13-7 13h14l-7-13ZM36 13l-7 13h14l-7-13Z'/%3E%3C/svg%3E");
    }
    #page-about .value-card:nth-child(4) .value-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='6'/%3E%3Ccircle cx='9' cy='14' r='4'/%3E%3Ccircle cx='39' cy='14' r='4'/%3E%3Ccircle cx='12' cy='38' r='4'/%3E%3Ccircle cx='37' cy='37' r='4'/%3E%3Cpath d='m13 16 6 5M35 16l-6 5M16 35l5-6M33 34l-5-5'/%3E%3C/svg%3E");
    }
    #page-about .value-card:nth-child(5) .value-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 39h34M10 34c7-2 10-7 13-13 3 4 6 6 15 7'/%3E%3Cpath d='m32 21 6 7-8 4'/%3E%3Cpath d='M23 21c-1-8 4-13 11-14-1 7-4 12-11 14Z'/%3E%3C/svg%3E");
    }
    #page-about .value-card h3 {
      margin-bottom: 12px;
      color: var(--ink);
      font-size: 18px;
      text-align: left;
      transition: color 0.3s ease;
    }
    #page-about .value-card.active h3 { color: #baf6ef; }
    #page-about .value-card p {
      max-height: 0;
      margin: 0;
      overflow: hidden;
      opacity: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
      text-align: left;
      transform: translateY(12px);
      transition: max-height 0.45s ease, opacity 0.35s ease, transform 0.35s ease, color 0.3s ease;
    }
    #page-about .value-card.active p {
      max-height: 180px;
      opacity: 1;
      color: rgba(235,252,250,0.76);
      transform: translateY(0);
    }

    @media (max-width: 960px) {
      #page-home > .section-white .grid-3 {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 28px 20px;
      }
      #page-home > .section-white .grid-3::before {
        top: 68px;
        bottom: 68px;
        left: 66px;
        right: auto;
        width: 3px;
        height: auto;
        background: repeating-linear-gradient(180deg, rgba(23,184,180,0.48) 0 9px, transparent 9px 17px);
      }
      #page-home > .section-white .grid-3 .card {
        display: grid;
        grid-template-columns: 80px 1fr;
        column-gap: 22px;
        align-items: start;
        padding: 22px 20px;
      }
      #page-home > .section-white .grid-3 .card-num {
        grid-row: 1 / span 2;
        width: 76px;
        height: 76px;
        margin: 0;
        border-width: 7px;
      }
      #page-home > .section-white .grid-3 .card h3 {
        margin-top: 5px;
        text-align: left;
      }
      #page-home > .section-white .grid-3 .card p {
        grid-column: 2;
        max-width: none;
      }
      #page-about .values-grid {
        flex-direction: column;
        min-height: 0;
      }
      #page-about .value-card,
      #page-about .value-card.active {
        flex: none;
        min-height: 116px;
        padding: 24px;
        transform: none;
      }
      #page-about .value-card.active { min-height: 255px; }
      #page-about .value-card .value-icon { margin-bottom: 18px; }
    }

    @media (max-width: 600px) {
      #page-home > .section-white .grid-3 {
        padding: 18px 10px;
        border-radius: 28px;
      }
      #page-home > .section-white .grid-3::before { left: 51px; }
      #page-home > .section-white .grid-3 .card {
        grid-template-columns: 60px 1fr;
        column-gap: 16px;
        padding: 20px 12px;
      }
      #page-home > .section-white .grid-3 .card-num {
        width: 58px;
        height: 58px;
        border-width: 5px;
        font-size: 16px;
      }
      #page-home > .section-white .grid-3 .card h3 { margin-top: 1px; font-size: 18px; }
      #page-home > .section-white .grid-3 .card p { font-size: 13px; }
      #page-home > .section-sand .grid-3 .card > div:first-child { width: 74px; height: 74px; }
      #page-home .audience-vector-icon { width: 74px; height: 74px; }
      #page-about .value-card,
      #page-about .value-card.active { padding: 22px; border-radius: 22px; }
      #page-about .value-card.active { min-height: 245px; }
    }

    /* ============================================================
       PRODUCT STORY — BIOMEDICAL VISUAL LANGUAGE
       Presentation-only additions; existing scientific copy is unchanged.
    ============================================================ */

    /* Homepage hero: a clear product story rather than a generic banner */
    #page-home .hero-banner {
      min-height: 720px;
      padding-top: 92px;
      padding-bottom: 74px;
    }
    #page-home .hero-banner::after { display: none; }
    #page-home .hero-banner.logo-bg::before {
      display: none;
    }
    #page-home .hero-banner .container > .home-hero-grid {
      max-width: 1180px !important;
    }
    .home-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
      align-items: center;
      gap: clamp(54px, 7vw, 96px);
    }
    .home-hero-copy { position: relative; z-index: 3; }
    .home-hero-copy h1 {
      max-width: 690px !important;
      font-size: clamp(44px, 4.2vw, 61px);
      line-height: 1.04;
    }
    .home-hero-copy .lead,
    .platform-copy .lead { text-align: left; }

    .bio-hero-visual {
      position: relative;
      width: min(100%, 490px);
      margin-left: auto;
      padding: 22px;
      border: 1px solid rgba(204,245,241,0.22);
      border-radius: 28px;
      background: rgba(5,45,49,0.72);
      box-shadow: 0 26px 70px rgba(0,0,0,0.20);
    }
    .bio-hero-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(185,238,233,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(185,238,233,0.035) 1px, transparent 1px);
      background-size: 24px 24px;
      mask-image: linear-gradient(to bottom, black, transparent 70%);
    }
    .bio-pathway-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 2px 3px 16px;
      border-bottom: 1px solid rgba(218,249,246,0.13);
    }
    .bio-pathway-head strong {
      color: #f4fffd;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .bio-pathway-key {
      display: flex;
      align-items: center;
      gap: 7px;
      color: rgba(226,249,246,0.64);
      font-size: 10px;
    }
    .bio-pathway-key::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #84ded7;
    }
    .bio-pathway {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 10px;
      padding-top: 16px;
    }
    .bio-step {
      display: grid;
      grid-template-columns: 38px 58px minmax(0,1fr) 78px;
      align-items: center;
      gap: 13px;
      min-height: 98px;
      padding: 14px 15px;
      border: 1px solid rgba(213,247,244,0.13);
      border-radius: 18px;
      background: rgba(255,255,255,0.045);
    }
    .bio-step-index {
      align-self: start;
      color: rgba(213,247,244,0.46);
      font: 650 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.08em;
    }
    .bio-step-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(179,238,232,0.20);
      border-radius: 14px;
      color: #a6eee7;
      background: rgba(127,219,211,0.07);
    }
    .bio-step:nth-child(2) .bio-step-icon {
      color: #ddb7e6;
      border-color: rgba(221,183,230,0.22);
      background: rgba(221,183,230,0.07);
    }
    .bio-step-icon svg { width: 30px; height: 30px; }
    .bio-step-copy { min-width: 0; }
    .bio-step-copy small {
      display: block;
      margin-bottom: 4px;
      color: rgba(185,239,234,0.62);
      font-size: 9px;
      font-weight: 720;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .bio-step-copy span {
      color: #f5fffe;
      font-size: 14px;
      font-weight: 680;
    }
    .bio-step-signal {
      width: 78px;
      height: 32px;
      color: rgba(163,233,227,0.65);
    }
    .bio-step:nth-child(2) .bio-step-signal { color: rgba(218,175,228,0.68); }
    .bio-step-signal svg { width: 100%; height: 100%; }

    .evidence-ribbon {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      max-width: 1180px !important;
      margin-top: 56px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 18px;
      background: rgba(255,255,255,0.055);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .evidence-ribbon-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px 20px;
      color: rgba(239,255,253,0.87);
      font-size: 11px;
      font-weight: 720;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .evidence-ribbon-item + .evidence-ribbon-item { border-left: 1px solid rgba(255,255,255,0.10); }
    .evidence-ribbon-item::before {
      content: '';
      width: 9px;
      height: 9px;
      flex: 0 0 auto;
      border: 2px solid #a7eee7;
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(23,184,180,0.08);
    }
    .evidence-ribbon-item:nth-child(2)::before { border-color: #e4b7eb; }

    /* Product concept: deliberately labelled as illustrative */
    .platform-section {
      background:
        radial-gradient(circle at 10% 90%, rgba(23,184,180,0.12), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(201,139,216,0.13), transparent 29%),
        linear-gradient(145deg, #eef8f6, #faf6fb);
    }
    .platform-intro {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
      align-items: center;
      gap: clamp(54px, 7vw, 92px);
    }
    .platform-copy .lead { max-width: 520px; }
    .concept-note {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 24px;
      padding: 9px 13px;
      border: 1px solid rgba(6,79,83,0.12);
      border-radius: 999px;
      color: var(--ink-soft);
      background: rgba(255,255,255,0.60);
      font-size: 10px;
      font-weight: 760;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .concept-note::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--violet);
      box-shadow: 0 0 0 4px rgba(201,139,216,0.13);
    }
    .preview-shell {
      position: relative;
      display: grid;
      grid-template-columns: 150px 1fr;
      min-height: 430px;
      overflow: hidden;
      border: 1px solid rgba(6,79,83,0.14);
      border-radius: 28px;
      background: rgba(255,255,255,0.92);
      box-shadow: 0 35px 95px rgba(3,49,53,0.16);
      transform: perspective(1400px) rotateY(-2deg) rotateX(1deg);
      transform-origin: center;
    }
    .preview-shell::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
    }
    .preview-sidebar {
      padding: 24px 16px;
      color: white;
      background:
        radial-gradient(circle at 20% 90%, rgba(23,184,180,0.25), transparent 32%),
        linear-gradient(170deg, #052f34, #08565b);
    }
    .preview-brand {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 34px;
      font-size: 12px;
      font-weight: 760;
    }
    .preview-brand-mark {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 8px;
      background: linear-gradient(145deg, rgba(23,184,180,0.8), rgba(201,139,216,0.7));
    }
    .preview-brand-mark::before {
      content: '';
      width: 10px;
      height: 10px;
      border: 1.5px solid white;
      border-radius: 50%;
      box-shadow: 5px -4px 0 -3px #fff, -5px 4px 0 -3px #fff;
    }
    .preview-nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 8px;
      padding: 10px 11px;
      border-radius: 10px;
      color: rgba(224,247,244,0.62);
      font-size: 10px;
      font-weight: 650;
    }
    .preview-nav-item::before {
      content: '';
      width: 7px;
      height: 7px;
      border: 1px solid currentColor;
      border-radius: 3px;
    }
    .preview-nav-item.active {
      color: white;
      background: rgba(255,255,255,0.11);
    }
    .preview-main { padding: 25px 25px 24px; min-width: 0; }
    .preview-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 24px;
    }
    .preview-title { color: var(--ink); font-size: 15px; font-weight: 760; }
    .preview-data-label {
      padding: 6px 9px;
      border-radius: 999px;
      color: #74417d;
      background: var(--violet-soft);
      font-size: 8px;
      font-weight: 780;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }
    .preview-card {
      border: 1px solid rgba(6,79,83,0.10);
      border-radius: 17px;
      background: #fcfefd;
      box-shadow: 0 12px 30px rgba(3,49,53,0.055);
    }
    .preview-profile { padding: 18px; }
    .preview-card-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      color: var(--ink-soft);
      font-size: 10px;
      font-weight: 760;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .profile-row {
      display: grid;
      grid-template-columns: 92px 1fr 32px;
      align-items: center;
      gap: 10px;
      margin: 11px 0;
      color: var(--muted);
      font-size: 9px;
    }
    .profile-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e9f3f2; }
    .profile-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), #6bd9d1); }
    .profile-row:nth-child(3) .profile-fill { background: linear-gradient(90deg, var(--violet), #e2b6e8); }
    .profile-row:nth-child(4) .profile-fill { background: linear-gradient(90deg, #528d98, var(--aqua)); }
    .preview-lower {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 14px;
      margin-top: 14px;
    }
    .preview-ring-card { display: grid; place-items: center; padding: 18px; }
    .preview-ring {
      width: 84px;
      height: 84px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: conic-gradient(var(--aqua) 0 34%, var(--violet) 34% 61%, #8dbec1 61% 79%, #e7f1f0 79%);
    }
    .preview-ring::before { content: ''; width: 59px; height: 59px; border-radius: 50%; background: white; }
    .preview-chart-card { padding: 18px; }
    .mini-chart { width: 100%; height: 90px; overflow: visible; }
    .mini-chart path.grid { stroke: #e6efee; stroke-width: 1; }
    .mini-chart path.line { fill: none; stroke: var(--aqua); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .mini-chart circle { fill: white; stroke: var(--violet); stroke-width: 2.5; }
    .preview-footnote { margin-top: 12px; color: #536f72; font-size: 10px; line-height: 1.45; }

    /* Audience cards: tactile, keyboard-visible entry points */
    #page-home > .section-sand .grid-3 .card {
      position: relative;
      overflow: hidden;
      padding-top: 38px;
      outline: none;
    }
    #page-home > .section-sand .grid-3 .card::after {
      content: '↗';
      position: absolute;
      top: 20px;
      right: 22px;
      color: rgba(6,79,83,0.28);
      font-size: 20px;
      transition: color 0.25s ease, transform 0.25s ease;
    }
    #page-home > .section-sand .grid-3 .card:hover::after,
    #page-home > .section-sand .grid-3 .card:focus-visible::after {
      color: var(--pine);
      transform: translate(3px, -3px);
    }
    #page-home > .section-sand .grid-3 .card:focus-visible {
      box-shadow: 0 0 0 4px rgba(23,184,180,0.18), var(--premium-shadow-hover);
    }
    .audience-icon {
      position: relative;
      width: 82px;
      height: 82px;
      margin: 0 auto 24px;
      border-radius: 26px;
      background: linear-gradient(145deg, #075b5f, #093f46);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 14px 30px rgba(3,49,53,0.18);
      transition: transform 0.3s ease, background 0.3s ease;
    }
    .audience-icon::before,
    .vector-icon::before {
      content: '';
      position: absolute;
      inset: 18px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    .audience-patient::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b9f6ef' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5C16.7 5 11 10.5 11 18c0 5.1 2.9 8.1 6.2 11v8.5A5.5 5.5 0 0 0 22.7 43h2.6a5.5 5.5 0 0 0 5.5-5.5V29c3.3-2.9 6.2-5.9 6.2-11C37 10.5 31.3 5 24 5Z'/%3E%3Cpath d='M14 20h6l2.5-6 4.5 12 2.5-6H35M20 34h8'/%3E%3C/svg%3E");
    }
    .audience-clinician::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b9f6ef' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 7v13a10 10 0 0 0 20 0V7M10 7h8M30 7h8M19 7v12a5 5 0 0 0 10 0V7'/%3E%3Cpath d='M34 20v10a7 7 0 0 0 14 0v-3'/%3E%3Ccircle cx='45' cy='24' r='3'/%3E%3C/svg%3E");
    }
    .audience-investor::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b9f6ef' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 40h34M11 34l9-10 7 5 11-15'/%3E%3Cpath d='M30 14h8v8'/%3E%3Ccircle cx='11' cy='34' r='2' fill='%23dba6e3' stroke='none'/%3E%3Ccircle cx='20' cy='24' r='2' fill='%23dba6e3' stroke='none'/%3E%3Ccircle cx='27' cy='29' r='2' fill='%23dba6e3' stroke='none'/%3E%3C/svg%3E");
    }
    #page-home > .section-sand .grid-3 .card:hover .audience-icon {
      transform: translateY(-5px) rotate(-2deg);
      background: linear-gradient(145deg, #087b7f, #68486e);
    }

    /* Replace remaining pictographic emoji with one coherent line-icon system */
    .pl-dot,
    .questionnaire-icon,
    .contact-icon,
    .feature-icon {
      position: relative;
      font-size: 0 !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
    }
    .pl-dot { background-size: 28px 28px !important; }
    .pl-icon-lab {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6h12M21 6v12L10 37a3 3 0 0 0 3 5h22a3 3 0 0 0 3-5L27 18V6'/%3E%3Cpath d='M15 32h18M20 25h8'/%3E%3C/svg%3E") !important;
    }
    .pl-stage.active .pl-icon-lab {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6h12M21 6v12L10 37a3 3 0 0 0 3 5h22a3 3 0 0 0 3-5L27 18V6'/%3E%3Cpath d='M15 32h18M20 25h8'/%3E%3C/svg%3E") !important;
      background-color: #056f73 !important;
    }
    .pl-icon-clinic {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 42V16h32v26M16 16V8h16v8M5 42h38'/%3E%3Cpath d='M24 22v12M18 28h12M14 36h5M29 36h5'/%3E%3C/svg%3E") !important;
    }
    .pl-icon-regulatory {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6h20v36H14zM19 13h10M19 21h10M19 29h6'/%3E%3Cpath d='m27 34 3 3 6-7'/%3E%3C/svg%3E") !important;
    }
    .pl-icon-scale {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 39 19 28l7 6 14-19'/%3E%3Cpath d='M31 15h9v9M8 8v31h32'/%3E%3C/svg%3E") !important;
    }
    .questionnaire-icon,
    .contact-icon,
    .feature-icon {
      width: 58px;
      height: 58px;
      border: 1px solid rgba(0,137,140,0.12);
      border-radius: 18px;
      background-color: rgba(223,247,244,0.90) !important;
      background-size: 30px 30px !important;
      box-shadow: 0 12px 28px rgba(3,49,53,0.09);
    }
    .icon-clinician {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 7v13a10 10 0 0 0 20 0V7M10 7h8M30 7h8M19 7v12a5 5 0 0 0 10 0V7'/%3E%3Cpath d='M34 20v10a7 7 0 0 0 14 0v-3'/%3E%3Ccircle cx='45' cy='24' r='3'/%3E%3C/svg%3E") !important;
    }
    .icon-community {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='15' r='6'/%3E%3Ccircle cx='34' cy='18' r='5'/%3E%3Cpath d='M6 39c1-9 5-13 11-13s10 4 11 13M27 38c1-7 3-10 8-10 4 0 7 3 8 10'/%3E%3C/svg%3E") !important;
    }
    .icon-investor {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 40h34M11 34l9-10 7 5 11-15'/%3E%3Cpath d='M30 14h8v8'/%3E%3C/svg%3E") !important;
    }
    .icon-mail {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='10' width='36' height='28' rx='4'/%3E%3Cpath d='m8 14 16 13 16-13'/%3E%3C/svg%3E") !important;
    }
    .feature-pill {
      margin: 0 auto 14px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300898c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 38a10 10 0 0 1 0-14l14-14a10 10 0 0 1 14 14L24 38a10 10 0 0 1-14 0Z'/%3E%3Cpath d='m17 17 14 14'/%3E%3C/svg%3E") !important;
    }

    .collab-tag {
      position: relative;
      padding-left: 28px !important;
      color: var(--pine-dark) !important;
      font-weight: 650;
    }
    .collab-tag::before {
      content: '';
      position: absolute;
      left: 13px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--aqua), var(--violet));
      transform: translateY(-50%);
      box-shadow: 0 0 0 4px rgba(23,184,180,0.08);
    }

    /* Publication cards read as a curated evidence library */
    .pub-card {
      position: relative;
      overflow: hidden;
      padding-left: 34px;
    }
    .pub-card::after {
      content: '↗';
      position: absolute;
      right: 22px;
      top: 19px;
      color: rgba(6,79,83,0.20);
      font-size: 17px;
      transition: transform 0.25s ease, color 0.25s ease;
    }
    .pub-card:hover::after { color: var(--pine); transform: translate(2px, -2px); }

    /* Small accessibility refinements */
    .section-white .eyebrow:not(.eyebrow-wisteria),
    .section-wisteria-light .eyebrow:not(.eyebrow-wisteria) {
      color: white;
      background: var(--pine-dark);
    }
    .footer-right a {
      color: white !important;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* Careers — detailed roles without overwhelming the team page */
    .careers-intro {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(340px, 1.2fr);
      gap: clamp(34px, 6vw, 78px);
      align-items: start;
    }
    .careers-copy {
      position: sticky;
      top: 110px;
    }
    .careers-list {
      display: grid;
      gap: 18px;
    }
    .career-role {
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(7,112,116,0.16);
      border-radius: 22px;
      box-shadow: 0 18px 48px rgba(5,62,65,0.08);
      overflow: hidden;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }
    .career-role:hover {
      transform: translateY(-2px);
      border-color: rgba(7,112,116,0.32);
      box-shadow: 0 22px 56px rgba(5,62,65,0.12);
    }
    .career-role[open] { transform: none; }
    .career-role summary {
      list-style: none;
      cursor: pointer;
      padding: 26px 28px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
    }
    .career-role summary::-webkit-details-marker { display: none; }
    .career-role summary::after {
      content: '+';
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--pine);
      background: var(--pine-light);
      font-size: 24px;
      font-weight: 400;
      transition: transform 0.22s ease, background 0.22s ease;
    }
    .career-role[open] summary::after {
      transform: rotate(45deg);
      background: var(--wisteria-light);
    }
    .career-role-title {
      margin: 0 0 10px;
      font-size: clamp(19px, 2vw, 24px);
      color: var(--ink);
    }
    .career-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .career-meta span {
      padding: 5px 10px;
      border-radius: 999px;
      background: var(--sand);
      color: var(--text-mid);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .career-body {
      padding: 0 28px 30px;
      border-top: 1px solid rgba(7,112,116,0.10);
    }
    .career-body > p:first-child { margin-top: 24px; }
    .career-body h4 {
      margin: 28px 0 10px;
      color: var(--pine-dark);
      font-size: 15px;
      letter-spacing: -0.01em;
    }
    .career-body h5 {
      margin: 20px 0 8px;
      color: var(--pine);
      font-size: 13px;
    }
    .career-body ul {
      margin: 0;
      padding-left: 20px;
      color: var(--text-mid);
    }
    .career-body li { margin: 7px 0; line-height: 1.6; }
    .career-apply {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid rgba(7,112,116,0.12);
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      justify-content: space-between;
    }
    .career-apply p { margin: 0; font-size: 13px; }
    #clinical-advisor { scroll-margin-top: 120px; background: #f4f8f4; }
    .clinical-careers .careers-copy { position: static; }
    .clinical-careers .careers-copy h3 { font-size: clamp(24px, 3vw, 34px); line-height: 1.25; margin: 26px 0 20px; }
    .clinical-careers p, .clinical-careers li { font-size: 16px; line-height: 1.7; }
    .clinical-job { border-top: 5px solid #78bfae; }
    .clinical-job-header { padding: 28px; }
    .clinical-job-header h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; margin: 12px 0 20px; overflow-wrap: anywhere; }
    .clinical-job .career-meta span { font-size: 13px; color: #365b56; background: #edf5ef; }
    .clinical-job .career-body h4 { font-size: 18px; }
    .clinical-job .career-apply { align-items: flex-start; }
    .clinical-job .career-apply a:not(.btn) { color: #006b6e; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
    .clinical-job .career-apply p { font-size: 15px; }
    .clinical-job .career-apply .btn { white-space: normal; }
    .clinical-contributions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0 !important; }
    .clinical-contributions li { background: #eef6f1; color: #204b43; padding: 14px 16px; border-radius: 12px; font-weight: 650; margin: 0; }
    @media (max-width: 600px) {
      .clinical-job-header { padding: 24px 20px; }
      .clinical-contributions { grid-template-columns: 1fr; }
      #clinical-advisor { scroll-margin-top: 100px; }
    }

    /* Dedicated legal page and conventional bottom-of-footer link */
    .legal-document {
      max-width: 860px;
      margin: 0 auto;
      padding: clamp(30px, 5vw, 58px);
      background: white;
      border: 1px solid rgba(7,112,116,0.14);
      border-radius: 24px;
      box-shadow: 0 22px 60px rgba(5,62,65,0.08);
    }
    .legal-updated {
      display: inline-flex;
      margin-bottom: 28px;
      padding: 7px 12px;
      border-radius: 999px;
      background: var(--pine-light);
      color: var(--pine-dark);
      font-size: 12px;
      font-weight: 700;
    }
    .legal-document h2 {
      margin: 34px 0 12px;
      font-size: 21px;
    }
    .legal-document h2:first-of-type { margin-top: 0; }
    .legal-document p,
    .legal-document li {
      color: var(--text-mid);
      line-height: 1.75;
    }
    .legal-document ul { padding-left: 22px; }
    .legal-document a { color: var(--pine); font-weight: 700; }
    .legal-note {
      margin: 24px 0;
      padding: 18px 20px;
      border-left: 3px solid var(--aqua);
      background: var(--pine-light);
      border-radius: 0 12px 12px 0;
    }
    .footer-legal-row {
      flex: 0 0 100%;
      width: 100%;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,0.12);
      display: flex;
      justify-content: flex-end;
      font-size: 12px;
    }
    .footer-legal-row a {
      color: rgba(255,255,255,0.86);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    @media (max-width: 820px) {
      .careers-intro { grid-template-columns: 1fr; }
      .careers-copy { position: static; }
    }
    @media (max-width: 600px) {
      .career-role summary { padding: 22px 20px; }
      .career-body { padding: 0 20px 24px; }
      .career-apply { align-items: stretch; }
      .career-apply .btn { width: 100%; }
      .legal-document { padding: 26px 20px; border-radius: 18px; }
      .footer-legal-row { justify-content: flex-start; }
    }

    @media (max-width: 1040px) {
      .home-hero-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 42px; }
      .bio-hero-visual { width: 360px; }
      .bio-step { grid-template-columns: 28px 48px minmax(0,1fr) 58px; gap: 10px; padding: 13px 12px; }
      .bio-step-icon { width: 46px; height: 46px; }
      .bio-step-signal { width: 58px; }
      .platform-intro { grid-template-columns: 1fr; }
      .platform-copy { max-width: 720px; }
      .preview-shell { max-width: 760px; transform: none; }
    }

    @media (max-width: 780px) {
      #page-home .hero-banner { min-height: 0; padding-top: 82px; }
      .home-hero-grid { grid-template-columns: 1fr; }
      .home-hero-copy h1 { font-size: clamp(35px, 8.5vw, 44px); }
      .bio-hero-visual { width: min(88vw, 430px); margin: 5px auto 0; }
      .evidence-ribbon { grid-template-columns: 1fr; margin-top: 34px; }
      .evidence-ribbon-item + .evidence-ribbon-item { border-left: 0; border-top: 1px solid rgba(255,255,255,0.10); }
      .preview-shell { grid-template-columns: 1fr; }
      .preview-sidebar { display: flex; align-items: center; gap: 8px; padding: 14px; overflow-x: auto; }
      .preview-brand { margin: 0 auto 0 0; white-space: nowrap; }
      .preview-nav-item { margin: 0; white-space: nowrap; }
    }

    @media (max-width: 520px) {
      .bio-hero-visual { width: 100%; padding: 16px; border-radius: 22px; }
      .bio-step { grid-template-columns: 28px 48px minmax(0,1fr); min-height: 88px; padding: 12px 11px; }
      .bio-step-signal { display: none; }
      .bio-step-copy span { font-size: 13px; }
      .platform-intro { gap: 38px; }
      .preview-main { padding: 19px 16px; }
      .preview-lower { grid-template-columns: 1fr; }
      .preview-shell { border-radius: 22px; }
      .preview-sidebar { gap: 5px; }
      .preview-nav-item { padding: 8px; font-size: 8px; }
      .preview-brand span { display: none; }
    }

    /* ============================================================
       APPROVED POSITIONING + INTELLIGENCE ENGINE
    ============================================================ */
    .legacy-solution-block { display: none !important; }

    /* Keep Jessica's approved clinical sequence consistent across the site. */
    .focus-specialties .specialty-box:first-child { order: 2; }
    .focus-specialties .specialty-box:nth-child(2) { order: 1; }

    #page-home .hero-banner {
      min-height: 0;
      padding-top: 88px;
      padding-bottom: 72px;
    }
    .home-positioning {
      position: relative;
      z-index: 2;
      max-width: 990px !important;
    }
    .home-positioning .home-brand-name {
      max-width: none !important;
      margin-bottom: 10px;
      color: #f8fffe;
      font-size: clamp(54px, 6.8vw, 86px);
      line-height: 0.96;
      letter-spacing: -0.055em;
    }
    .home-positioning .home-tagline {
      max-width: 900px;
      margin: 0 0 25px;
      color: #e5f5f5;
      font-size: clamp(28px, 3.3vw, 45px);
      line-height: 1.12;
      letter-spacing: -0.035em;
    }
    .home-platform-description {
      max-width: 900px;
      margin: 0;
      color: rgba(247,255,254,0.91);
      font-size: clamp(16px, 1.45vw, 19px);
      line-height: 1.72;
      text-align: left;
    }
    .home-actions { margin-top: 31px; }

    .home-explainer {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: none !important;
      margin-top: 58px;
      padding: 24px 22px;
      border: 1px solid rgba(229,245,245,0.26);
      border-radius: 25px;
      background: rgba(4,58,61,0.46);
      box-shadow: 0 24px 55px rgba(4,62,65,0.14);
    }
    .home-flow {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 9px;
    }
    .home-flow-step {
      min-width: 0;
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      color: rgba(249,255,254,0.91);
      font-size: clamp(13px, 0.95vw, 15px);
      font-weight: 680;
      line-height: 1.3;
      text-align: center;
    }
    .home-flow-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      color: #baf4ee;
      border: 1px solid rgba(196,243,238,0.28);
      border-radius: 14px;
      background: rgba(255,255,255,0.07);
    }
    .home-flow-icon svg { width: 27px; height: 27px; }
    .home-flow-core .home-flow-icon {
      color: #f1cdf5;
      border-color: rgba(233,196,239,0.42);
      background: rgba(219,166,227,0.14);
    }
    .home-flow-arrow {
      flex: 0 0 auto;
      margin-top: -23px;
      color: rgba(225,249,246,0.47);
      font-size: 20px;
      line-height: 1;
    }

    .intelligence-intro { max-width: 800px; text-align: left; }
    .intelligence-engine {
      display: grid;
      grid-template-columns: minmax(360px, 1.28fr) 54px minmax(170px, 0.52fr) 54px minmax(280px, 0.95fr);
      align-items: stretch;
      gap: 0;
      margin-top: 48px;
      padding: 30px;
      border: 1px solid rgba(0,137,140,0.17);
      border-radius: 30px;
      background:
        linear-gradient(rgba(0,137,140,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,137,140,0.035) 1px, transparent 1px),
        linear-gradient(145deg, #f4fbfa, #f8f3fa);
      background-size: 28px 28px, 28px 28px, auto;
      box-shadow: 0 28px 70px rgba(3,49,53,0.09);
    }
    .engine-column-label {
      min-height: 22px;
      margin-bottom: 11px;
      color: #52777a;
      font-size: 11px;
      font-weight: 760;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .engine-inputs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .engine-inputs > .engine-column-label { grid-column: 1 / -1; }
    .engine-layer {
      min-height: 84px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 15px;
      border: 1px solid rgba(0,137,140,0.14);
      border-radius: 17px;
      background: rgba(255,255,255,0.80);
    }
    .engine-layer-microbiome,
    .engine-layer-longitudinal { grid-column: 1 / -1; }
    .engine-layer-icon {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      color: var(--pine-dark);
      border-radius: 11px;
      background: var(--pine-light);
    }
    .engine-layer-icon svg { width: 24px; height: 24px; }
    .engine-layer h3 {
      margin: 1px 0 7px;
      color: var(--ink);
      font-size: 17px;
    }
    .engine-tags,
    .focus-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .engine-tags span,
    .focus-tags span {
      display: inline-flex;
      padding: 5px 8px;
      border: 1px solid rgba(0,137,140,0.12);
      border-radius: 999px;
      color: #3d6366;
      background: rgba(229,245,245,0.70);
      font-size: 11px;
      font-weight: 620;
      line-height: 1.25;
    }
    .engine-connector {
      position: relative;
      min-height: 100%;
    }
    .engine-connector::before {
      content: '';
      position: absolute;
      left: 9px;
      right: 14px;
      top: 52%;
      height: 1px;
      background: rgba(0,137,140,0.40);
    }
    .engine-connector::after {
      content: '';
      position: absolute;
      right: 9px;
      top: calc(52% - 4px);
      width: 8px;
      height: 8px;
      border-top: 1px solid rgba(0,137,140,0.55);
      border-right: 1px solid rgba(0,137,140,0.55);
      transform: rotate(45deg);
    }
    .engine-ai,
    .engine-report { display: flex; flex-direction: column; }
    .engine-ai-core {
      flex: 1;
      min-height: 260px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 22px 16px;
      border-radius: 24px;
      color: #e9fffc;
      background: linear-gradient(150deg, var(--pine-dark), var(--pine));
      box-shadow: 0 18px 40px rgba(0,110,113,0.18);
      text-align: center;
    }
    .engine-ai-core svg { width: 68px; height: 68px; color: #d9aee2; }
    .engine-ai-core span {
      font-size: 12px;
      font-weight: 620;
      letter-spacing: 0.08em;
    }
    .engine-ai-core strong { font-size: 18px; line-height: 1.3; }
    .report-sheet {
      flex: 1;
      min-height: 260px;
      padding: 21px;
      border: 1px solid rgba(0,137,140,0.17);
      border-radius: 22px;
      background: rgba(255,255,255,0.90);
      box-shadow: 0 18px 40px rgba(3,49,53,0.08);
    }
    .report-sheet-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(0,137,140,0.13);
      color: var(--ink);
      font-size: 16px;
      line-height: 1.3;
    }
    .report-mark {
      width: 28px;
      height: 34px;
      flex: 0 0 auto;
      border: 1.5px solid var(--pine);
      border-radius: 7px;
      background: linear-gradient(to bottom, transparent 8px, rgba(0,137,140,0.09) 8px 10px, transparent 10px 16px, rgba(0,137,140,0.09) 16px 18px, transparent 18px);
    }
    .report-sheet ul { list-style: none; margin-top: 11px; }
    .report-sheet li {
      position: relative;
      padding: 8px 0 8px 17px;
      color: #45686b;
      font-size: 13px;
      line-height: 1.35;
    }
    .report-sheet li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 13px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--pine);
    }

    .clinical-sequence {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
      align-items: stretch;
      margin-top: 43px;
    }
    .clinical-sequence-item {
      display: grid;
      grid-template-columns: 54px minmax(0,1fr);
      gap: 17px;
      padding: 29px;
      border: 1px solid rgba(0,137,140,0.16);
      border-radius: 24px;
      background: rgba(255,255,255,0.84);
      box-shadow: 0 18px 45px rgba(3,49,53,0.07);
    }
    .clinical-sequence-item.primary {
      border-color: rgba(0,137,140,0.30);
      background: linear-gradient(145deg, rgba(229,245,245,0.95), rgba(255,255,255,0.92));
    }
    .sequence-number {
      color: var(--pine);
      font: 680 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.08em;
    }
    .sequence-copy small {
      display: block;
      margin-bottom: 4px;
      color: #628184;
      font-size: 11px;
      font-weight: 720;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }
    .sequence-copy h3 { margin-bottom: 14px; font-size: 22px; }
    .focus-tags span { padding: 8px 13px; font-size: 12px; background: white; }
    .sequence-arrow {
      display: grid;
      place-items: center;
      color: rgba(0,137,140,0.55);
      font-size: 24px;
    }

    @media (max-width: 1080px) {
      .intelligence-engine { grid-template-columns: 1fr; gap: 0; }
      .engine-connector { min-height: 52px; }
      .engine-connector::before { left: 50%; right: auto; top: 8px; bottom: 14px; width: 1px; height: auto; }
      .engine-connector::after { left: calc(50% - 4px); right: auto; top: auto; bottom: 9px; transform: rotate(135deg); }
      .engine-ai-core { min-height: 210px; }
      .report-sheet { min-height: 0; }
    }

    @media (max-width: 780px) {
      #page-home .hero-banner { padding-top: 74px; padding-bottom: 54px; }
      .home-positioning .home-brand-name { font-size: clamp(48px, 15vw, 66px); }
      .home-positioning .home-tagline { font-size: clamp(27px, 8vw, 38px); }
      .home-platform-description { font-size: 16px; }
      .home-explainer { margin-top: 42px; padding: 20px; }
      .home-flow { flex-direction: column; align-items: stretch; gap: 0; }
      .home-flow-step { min-height: 64px; flex-direction: row; text-align: left; font-size: 14px; }
      .home-flow-icon { width: 44px; height: 44px; flex: 0 0 44px; }
      .home-flow-arrow { height: 20px; margin: 0 0 0 16px; transform: rotate(90deg); transform-origin: center; align-self: flex-start; }
      .intelligence-engine { margin-top: 34px; padding: 20px; border-radius: 24px; }
      .engine-inputs { grid-template-columns: 1fr; }
      .engine-layer-microbiome,
      .engine-layer-longitudinal,
      .engine-inputs > .engine-column-label { grid-column: 1; }
      .clinical-sequence { grid-template-columns: 1fr; gap: 0; }
      .sequence-arrow { min-height: 48px; transform: rotate(90deg); }
    }

    @media (max-width: 480px) {
      .home-positioning .home-brand-name { font-size: 48px; }
      .home-positioning .home-tagline { font-size: 29px; }
      .home-actions .btn { width: 100%; }
      .intelligence-engine { padding: 15px; }
      .engine-layer { padding: 13px; }
      .clinical-sequence-item { grid-template-columns: 1fr; padding: 23px; }
    }

    .language-switcher button { min-width: 36px; min-height: 36px; }
    @media (max-width: 600px) {
      .language-switcher { margin-left: auto !important; }
      .language-switcher button { min-width: 36px; min-height: 44px; padding: 5px 7px !important; }
    }
    @media (max-width: 420px) {
      .header-brand { display: none; }
    }