/* === STYLE TAG 0 === */

  h1.tss-connected-orbit-title {
    font-size: 49px;
}
    /* =========================================================
       CENTRAL THEME VARIABLES
       ========================================================= */
    :root {
      --theme-bg-main: #FAF9F6;
      --theme-bg-section: #F4F1EB;
      --theme-bg-card: #FFFFFF;
      --theme-bg-card-alt: #F8F6F1;
      --theme-bg-input: #FAF8F5;
      
      --theme-text-primary: #171717;
      --theme-text-secondary: #4B5563;
      --theme-text-muted: #6B7280;
      
      --theme-border: #DED9D0;
      --theme-border-subtle: rgba(0, 0, 0, 0.08);
      
      --theme-accent: #F25A3A;
      --theme-accent-light: #F25A3A;
      --theme-gold: #B97818;
      
      --theme-shadow: 0 20px 50px rgba(60, 40, 20, 0.08);
      --theme-card-shadow: 0 10px 25px -5px rgba(60, 40, 20, 0.06), 0 4px 10px -2px rgba(60, 40, 20, 0.03);
      --theme-header-bg: rgba(250, 249, 246, 0.94);
      --theme-drawer-bg: rgba(250, 249, 246, 0.98);
      
      --scrollbar-track: #F4F1EB;
      --scrollbar-thumb: #DED9D0;
      --scrollbar-hover: #07205C;
      
      --spotlight-color: rgba(212, 90, 8, 0.04);
    }

    /* =========================================================
       100% IMAGE CLARITY — ZERO OVERLAYS, FULL OPACITY, NATURAL COLORS
       ========================================================= */
    img,
    #heroImage,
    #conferenceBannerImg,
    .portal-card img,
    .blog-card img,
    .tss-connected-orbit-card img,
    .logo-anim img,
    footer img {
      opacity: 1 !important;
      filter: none !important;
      mix-blend-mode: normal !important;
    }

    /* Remove image overlays & tints across all sections */
    .hero-bottom-fade,
    .conf-gradient-overlay,
    .blog-card-gradient,
    .portal-card-gradient {
      display: none !important;
      background: transparent !important;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: var(--scrollbar-track);
    }
    ::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-hover);
    }

    /* Ambient Spotlight Follower */
    .spotlight-bg {
      background: radial-gradient(
        750px circle at var(--mouse-x, 50%) var(--mouse-y, 30%),
        var(--spotlight-color),
        transparent 65%
      );
    }

    /* Golden text gradient */
    .text-gold-gradient {
      background: linear-gradient(135deg, #171717 0%, #B97818 50%, #F25A3A 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Animated SVG Data Flow line dash animation */
    @keyframes flowDashes {
      to {
        stroke-dashoffset: -100;
      }
    }
    .data-flow-line {
      stroke-dasharray: 6, 6;
      animation: flowDashes 3s linear infinite;
    }

    /* Smooth 3D tilt container perspective */
    .tilt-card {
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform 0.25s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* Pulse Glow Animation */
    @keyframes subtlePulse {
      0%, 100% { transform: scale(1); opacity: 0.85; filter: drop-shadow(0 0 15px rgba(237,109,18,0.4)); }
      50% { transform: scale(1.03); opacity: 1; filter: drop-shadow(0 0 35px rgba(237,109,18,0.7)); }
    }
    .animate-saffron-pulse {
      animation: subtlePulse 4s ease-in-out infinite;
    }

    /* Accessibility: Prefers reduced motion */
    @media (prefers-reduced-motion: reduce) {
      #backToTopBtn {
        transition: opacity 0.1s linear !important;
        transform: none !important;
      }
    }

    /* =========================================================
       CLEAN LIGHT MODE STYLES & LAYOUT BASELINE
       ========================================================= */
    body {
      background-color: var(--theme-bg-main) !important;
      color: var(--theme-text-primary) !important;
    }

    #mainHeader {
      background-color: var(--theme-header-bg) !important;
      border-color: var(--theme-border) !important;
    }

    #mobileDrawer {
      background-color: var(--theme-drawer-bg) !important;
      border-color: var(--theme-border) !important;
    }

    .nav-item,
    .mobile-nav-link {
      color: var(--theme-text-secondary) !important;
    }
    .nav-item:hover,
    .mobile-nav-link:hover {
      color: var(--theme-accent) !important;
    }

    #mobileMenuBtn {
      color: var(--theme-text-primary) !important;
    }

    .logo-anim img,
    footer img {
      filter: none !important;
      opacity: 1 !important;
    }

    /* Badges in Hero */
    .badge-card {
      background-color: var(--theme-bg-card) !important;
      border-color: var(--theme-border) !important;
      box-shadow: var(--theme-card-shadow);
    }
    .badge-card:hover {
      background-color: var(--theme-bg-card-alt) !important;
      border-color: var(--theme-accent) !important;
    }
    .badge-card .font-bold.text-white {
      color: var(--theme-text-primary) !important;
    }
    .badge-card .text-neutral-400 {
      color: var(--theme-text-muted) !important;
    }
    #heroBadgesRow p {
      color: var(--theme-text-secondary) !important;
    }

    /* Section Rhythm */
    #solution {
      background-color: var(--theme-bg-section) !important;
      border-color: var(--theme-border) !important;
    }
    #integration {
      background-color: var(--theme-bg-main) !important;
      border-color: var(--theme-border) !important;
    }
    #economic-model {
      background-color: var(--theme-bg-section) !important;
      border-color: var(--theme-border) !important;
    }
    #conferences {
      background-color: var(--theme-bg-main) !important;
      border-color: var(--theme-border) !important;
    }
    #blog {
      background-color: var(--theme-bg-section) !important;
      border-color: var(--theme-border) !important;
    }
    #resources {
      background-color: var(--theme-bg-main) !important;
      border-color: var(--theme-border) !important;
    }
    #faq {
      background-color: var(--theme-bg-section) !important;
      border-color: var(--theme-border) !important;
    }
    #finalCta {
      background: linear-gradient(180deg, #F4F1EB 0%, #FAF9F6 50%, #F5EFE6 100%) !important;
      border-color: var(--theme-border) !important;
    }
    #finalCta .final-cta-glow {
      background: radial-gradient(ellipse at center, rgba(212, 90, 8, 0.12), transparent 70%) !important;
    }
    #finalCta a[href="#economic-model"] {
      background-color: #FFFFFF !important;
      border-color: var(--theme-border) !important;
      color: var(--theme-text-primary) !important;
      box-shadow: 0 4px 12px rgba(60, 40, 20, 0.05);
    }
    #finalCta a[href="#economic-model"]:hover {
      background-color: var(--theme-bg-card-alt) !important;
      border-color: var(--theme-accent) !important;
    }

    /* Common Heading & Subheading classes */
    .section-heading h2 {
      color: var(--theme-text-primary) !important;
    }
    .section-heading p {
      color: var(--theme-text-secondary) !important;
    }

    /* Portal Cards */
    .portal-card {
      background-color: var(--theme-bg-card) !important;
      border-color: var(--theme-border) !important;
      box-shadow: var(--theme-card-shadow);
    }
    .portal-card:hover {
      border-color: var(--theme-accent) !important;
      box-shadow: 0 20px 45px -10px rgba(212, 90, 8, 0.18) !important;
    }
    .portal-card h3 {
      color: var(--theme-text-primary) !important;
    }
    .portal-card p {
      color: var(--theme-text-secondary) !important;
    }
    .portal-card img {
      opacity: 1 !important;
    }
    .portal-card-gradient {
      display: none !important;
    }
    .portal-card .portal-icon-box {
      background-color: rgba(255, 255, 255, 0.92) !important;
      border-color: var(--theme-accent) !important;
      color: var(--theme-accent) !important;
    }
    .portal-card .portal-badge {
      background-color: var(--theme-bg-card-alt) !important;
      color: var(--theme-text-secondary) !important;
      border-color: var(--theme-border) !important;
    }

    /* Portal Filter Buttons */
    .portal-filter-btn {
      transition: all 0.25s ease;
      cursor: pointer;
    }
    .portal-filter-btn.active {
      background-color: #F25A3A !important;
      color: #FFFFFF !important;
      border-color: #F25A3A !important;
      box-shadow: 0 4px 12px rgba(212, 90, 8, 0.25);
    }
    .portal-filter-btn:not(.active) {
      background-color: #FFFFFF !important;
      color: #4B5563 !important;
      border-color: #DED9D0 !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .portal-filter-btn:not(.active):hover {
      color: #171717 !important;
      border-color: #F25A3A !important;
    }

    /* Integration Section Topology */
    #integration .topology-box {
      background-color: var(--theme-bg-section) !important;
      border-color: var(--theme-border) !important;
      box-shadow: 0 20px 50px -10px rgba(60, 40, 20, 0.08) !important;
    }
    #integration svg {
      opacity: 0.85 !important;
    }
    .ehr-item {
      background-color: var(--theme-bg-card) !important;
      border-color: var(--theme-border) !important;
      box-shadow: 0 4px 12px -2px rgba(60, 40, 20, 0.05) !important;
    }
    .ehr-item:hover {
      border-color: var(--theme-accent) !important;
      box-shadow: 0 8px 20px -4px rgba(212, 90, 8, 0.15) !important;
    }
    .ehr-item .text-white {
      color: var(--theme-text-primary) !important;
    }
    .ehr-item .text-neutral-400 {
      color: var(--theme-text-muted) !important;
    }
    #ehrColLeft > .text-xs,
    #ehrColRight > .text-xs {
      color: var(--theme-text-secondary) !important;
    }
    .ehr-item .text-emerald-400 {
      color: #047857 !important;
      background-color: rgba(16, 185, 129, 0.14) !important;
      font-weight: 700 !important;
    }

    /* EHR Brand Badges & Action Icons Clarity */
    .ehr-badge {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      letter-spacing: 0.04em;
      flex-shrink: 0;
      transition: all 0.25s ease;
    }
    .ehr-badge-epic {
      background-color: #FEE2E2 !important;
      border: 1.5px solid #FCA5A5 !important;
      color: #B91C1C !important;
      box-shadow: 0 2px 6px rgba(185, 28, 28, 0.12) !important;
    }
    .ehr-badge-athena {
      background-color: #F3E8FF !important;
      border: 1.5px solid #D8B4FE !important;
      color: #6B21A8 !important;
      box-shadow: 0 2px 6px rgba(107, 33, 168, 0.12) !important;
    }
    .ehr-badge-cerner {
      background-color: #DBEAFE !important;
      border: 1.5px solid #93C5FD !important;
      color: #1D4ED8 !important;
      box-shadow: 0 2px 6px rgba(29, 78, 216, 0.12) !important;
    }
    .ehr-badge-ecw {
      background-color: #FEF3C7 !important;
      border: 1.5px solid #FCD34D !important;
      color: #92400E !important;
      box-shadow: 0 2px 6px rgba(146, 64, 14, 0.12) !important;
    }
    .ehr-badge-kareo {
      background-color: #CCFBF1 !important;
      border: 1.5px solid #5EEAD4 !important;
      color: #0F766E !important;
      box-shadow: 0 2px 6px rgba(15, 118, 110, 0.12) !important;
    }

    .action-icon-box {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background-color: #FFF2E8 !important;
      border: 1.5px solid #FDBA74 !important;
      color: #C2410C !important;
      font-size: 16px;
      box-shadow: 0 2px 8px rgba(237, 109, 18, 0.15) !important;
      transition: all 0.25s ease;
    }
    .ehr-item:hover .action-icon-box {
      background: linear-gradient(135deg, #F25A3A, #F25A3A) !important;
      color: #FFFFFF !important;
      border-color: #C2410C !important;
      transform: scale(1.06);
      box-shadow: 0 4px 14px rgba(212, 90, 8, 0.35) !important;
    }

    /* Central Saffron Hub */
    #ehrCenterHub .animate-saffron-pulse {
      border-color: rgba(212, 90, 8, 0.45) !important;
      box-shadow: 0 0 50px 10px rgba(212, 90, 8, 0.18) !important;
    }
    #ehrCenterHub .animate-spin-slow {
      border-color: rgba(185, 120, 24, 0.5) !important;
    }
    #ehrCenterHub .hub-core-plinth {
      background: linear-gradient(135deg, #FFFFFF 0%, #FAF8F5 50%, #F5EFE6 100%) !important;
      border-color: var(--theme-accent) !important;
      box-shadow: 0 15px 35px -5px rgba(60, 40, 20, 0.12), 0 0 20px rgba(212, 90, 8, 0.2) !important;
    }
    #ehrCenterHub .hub-core-plinth img {
      filter: drop-shadow(0 2px 8px rgba(212, 90, 8, 0.25)) !important;
    }
    #ehrCenterHub .hub-core-plinth .text-neutral-300 {
      color: var(--theme-text-primary) !important;
    }
    #ehrCenterHub p {
      color: var(--theme-text-secondary) !important;
    }

    /* Economic Model (3 Pillars) */
    .pillar-card {
      background-color: var(--theme-bg-card) !important;
      border-color: var(--theme-border) !important;
      box-shadow: var(--theme-card-shadow);
    }
    .pillar-card:hover {
      border-color: var(--theme-accent) !important;
      box-shadow: 0 20px 40px -10px rgba(212, 90, 8, 0.15) !important;
    }
    .pillar-card h3 {
      color: var(--theme-text-primary) !important;
    }
    .pillar-card p {
      color: var(--theme-text-secondary) !important;
    }
    .pillar-card .pillar-comparison {
      background-color: var(--theme-bg-card-alt) !important;
      border-color: var(--theme-border) !important;
    }
    .pillar-card .pillar-comparison .text-white {
      color: var(--theme-text-primary) !important;
    }
    .pillar-card .pillar-comparison .border-t {
      border-color: var(--theme-border) !important;
    }
    .pillar-card .border-t {
      border-color: var(--theme-border) !important;
    }
    .pillar-card .text-neutral-300 {
      color: var(--theme-text-secondary) !important;
    }

    /* Review Banner */
    #reviewBanner {
      background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F0 50%, #FFFFFF 100%) !important;
      border-color: rgba(212, 90, 8, 0.4) !important;
      box-shadow: 0 15px 35px -5px rgba(60, 40, 20, 0.08) !important;
    }
    #reviewBanner h4 {
      color: var(--theme-text-primary) !important;
    }
    #reviewBanner p {
      color: var(--theme-text-secondary) !important;
    }

    /* Conferences */
    #conferenceFeatureCard {
      background-color: var(--theme-bg-card) !important;
      border-color: var(--theme-border) !important;
      box-shadow: var(--theme-card-shadow);
    }
    #conferenceFeatureCard:hover {
      border-color: var(--theme-accent) !important;
    }
    #conferenceFeatureCard h3 {
      color: var(--theme-text-primary) !important;
    }
    #conferenceFeatureCard p {
      color: var(--theme-text-secondary) !important;
    }
    #conferenceFeatureCard .border-t {
      border-color: var(--theme-border) !important;
    }
    #conferenceFeatureCard .text-neutral-300 {
      color: var(--theme-text-secondary) !important;
    }
    .conf-gradient-overlay,
    #conferenceFeatureCard .conf-gradient-overlay {
      display: none !important;
      background: transparent !important;
    }
    #conferenceFeatureCard .conf-status-badge {
      background-color: rgba(255, 255, 255, 0.92) !important;
      border-color: var(--theme-accent) !important;
      color: var(--theme-accent) !important;
    }

    /* Blog / Insights */
    .blog-card {
      background-color: var(--theme-bg-card) !important;
      border-color: var(--theme-border) !important;
      box-shadow: var(--theme-card-shadow);
    }
    .blog-card:hover {
      border-color: var(--theme-accent) !important;
      box-shadow: 0 20px 40px -10px rgba(212, 90, 8, 0.15) !important;
    }
    .blog-card h3 a {
      color: #07205C !important;
    }
    .blog-card h3 a:hover {
      color: #F25A3A !important;
    }
    .blog-card p {
      color: #475569 !important;
    }
    .blog-card-gradient {
      display: none !important;
      background: transparent !important;
    }
    .blog-card .blog-category-badge {
      background-color: rgba(255, 255, 255, 0.92) !important;
      color: var(--theme-accent) !important;
      border-color: var(--theme-accent) !important;
    }

    /* Trust / Security */
    .trust-card {
      background-color: var(--theme-bg-card) !important;
      border-color: var(--theme-border) !important;
      box-shadow: var(--theme-card-shadow);
    }
    .trust-card:hover {
      border-color: var(--theme-accent) !important;
    }
    .trust-card h3 {
      color: var(--theme-text-primary) !important;
    }
    .trust-card p {
      color: var(--theme-text-secondary) !important;
    }

    /* FAQ */
    #faq details {
      background-color: var(--theme-bg-card) !important;
      border-color: var(--theme-border) !important;
      box-shadow: 0 2px 8px rgba(60, 40, 20, 0.04);
    }
    #faq details:hover {
      border-color: rgba(212, 90, 8, 0.45) !important;
    }
    #faq details[open] {
      background-color: #FAF8F5 !important;
      border-color: var(--theme-accent) !important;
    }
    /*#faq details summary span:first-child {
      color: var(--theme-text-primary) !important;
    } */
    #faq details[open] summary span:first-child {
      color: var(--theme-accent) !important;
    }
    #faq details summary .faq-chevron-circle {
      background-color: var(--theme-bg-card-alt) !important;
      border-color: var(--theme-border) !important;
      color: var(--theme-text-secondary) !important;
    }
    #faq details[open] summary .faq-chevron-circle {
      color: var(--theme-accent) !important;
      border-color: var(--theme-accent) !important;
    }
    #faq details .border-t {
      border-color: var(--theme-border) !important;
    }
    #faq details p {
      color: var(--theme-text-secondary) !important;
    }

    /* Final CTA Headline */
    #finalCta h2 {
      color: var(--theme-text-primary) !important;
    }
    #finalCta p {
      color: var(--theme-text-secondary) !important;
    }

    /* Booking Modal & Toast */
    #bookingModal {
      background-color: rgba(23, 23, 23, 0.6) !important;
    }
    #bookingModalBox {
      background-color: #FFFFFF !important;
      border-color: var(--theme-accent) !important;
      box-shadow: 0 25px 60px -15px rgba(60, 40, 20, 0.25) !important;
    }
    #bookingModalBox h3 {
      color: var(--theme-text-primary) !important;
    }
    #bookingModalBox p {
      color: var(--theme-text-secondary) !important;
    }
    #bookingModalBox label {
      color: var(--theme-text-primary) !important;
    }
    #bookingModalBox input,
    #bookingModalBox select {
      background-color: #FAF8F5 !important;
      border-color: var(--theme-border) !important;
      color: var(--theme-text-primary) !important;
    }
    #bookingModalBox input:focus,
    #bookingModalBox select:focus {
      border-color: var(--theme-accent) !important;
      background-color: #FFFFFF !important;
    }
    #bookingModalBox button[onclick="closeBookingModal()"] {
      color: var(--theme-text-muted) !important;
    }
    #bookingModalBox button[onclick="closeBookingModal()"]:hover {
      color: var(--theme-text-primary) !important;
    }
    #toastBox > div {
      background-color: #FFFFFF !important;
      border-color: var(--theme-accent) !important;
      color: var(--theme-text-primary) !important;
      box-shadow: 0 15px 35px -5px rgba(60, 40, 20, 0.15) !important;
    }
    #toastBox #toastMessage {
      color: var(--theme-text-primary) !important;
    }
    #backToTopBtn {
      background-color: #FFFFFF !important;
      border-color: var(--theme-border) !important;
      color: var(--theme-text-primary) !important;
      box-shadow: 0 8px 25px -4px rgba(60, 40, 20, 0.12) !important;
    }
    #backToTopBtn:hover {
      border-color: var(--theme-accent) !important;
      color: var(--theme-accent) !important;
    }

    /* =========================================================
       HERO: CONNECTED PRACTICE OPERATIONS
       ========================================================= */
    .tss-connected-orbit-section {
      background-color: #FAF8F5;
      border-top: none;
      position: relative;
      overflow: hidden !important;
      max-width: 100vw !important;
    }
    .tss-connected-orbit-title {
      font-family: 'Cinzel', Georgia, serif !important;
      color: var(--theme-text-primary) !important;
      text-transform: uppercase !important;
      letter-spacing: -0.01em !important;
    }
    .tss-connected-orbit-desc {
      color: var(--theme-text-secondary) !important;
    }
    .tss-connected-orbit-pill {
      background-color: #FFFFFF !important;
      border-color: var(--theme-border) !important;
      color: var(--theme-text-secondary) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    /* =========================================================
       BANNER IMAGE SECTION STYLES
       ========================================================= */
    .tss-banner-visual-section {
      background-color: #102f3c;
      position: relative;
    }
    .tss-banner-frame {
      background: linear-gradient(to bottom, rgba(237, 109, 18, 0.25), rgba(229, 169, 60, 0.1), transparent) !important;
      box-shadow: 0 20px 50px -10px rgba(60, 40, 20, 0.08), 0 0 25px rgba(237, 109, 18, 0.12) !important;
    }
    .tss-banner-inner {
      background-color: #0c0a08 !important;
      border-color: var(--theme-border) !important;
    }
    .tss-banner-inner img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      opacity: 1 !important;
      filter: none !important;
    }

    /* Orbit Visual Container */
    .tss-connected-orbit-visual {
      position: relative;
      width: 100%;
      max-width: 590px;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
    }

    /* Environmental Layered Atmosphere (Behind Orbit) */
    .tss-hero-atmosphere {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }
    .tss-atmosphere-glow-primary {
      position: absolute;
      top: 50%;
      right: 5%;
      transform: translate(0%, -50%);
      width: 680px;
      height: 680px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(237, 109, 18, 0.14) 0%, rgba(229, 169, 60, 0.06) 45%, transparent 70%);
      filter: blur(55px);
      animation: atmosphereBreathe 12s ease-in-out infinite alternate;
      pointer-events: none;
    }
    .tss-atmosphere-glow-secondary {
      position: absolute;
      top: 48%;
      right: -2%;
      transform: translate(0%, -50%);
      width: 880px;
      height: 880px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(229, 169, 60, 0.08) 0%, rgba(237, 109, 18, 0.03) 50%, transparent 75%);
      filter: blur(80px);
      pointer-events: none;
    }
    .tss-atmosphere-drift {
      position: absolute;
      top: 50%;
      right: 12%;
      transform: translate(0%, -50%);
      width: 520px;
      height: 520px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(250, 248, 245, 0) 70%);
      filter: blur(40px);
      pointer-events: none;
      mix-blend-mode: soft-light;
    }
    @keyframes atmosphereBreathe {
      0% {
        transform: translate(0%, -50%) scale(0.95);
        opacity: 0.85;
      }
      100% {
        transform: translate(2%, -48%) scale(1.08);
        opacity: 1;
      }
    }
    @keyframes driftRotateCw {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes driftRotateCcw {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }
    .tss-drift-cw {
      transform-origin: 500px 500px;
      animation: driftRotateCw 110s linear infinite;
    }
    .tss-drift-ccw {
      transform-origin: 500px 500px;
      animation: driftRotateCcw 140s linear infinite;
    }

    /* Ambient Glow Behind Orbits */
    .tss-connected-orbit-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 78%;
      height: 78%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(237, 109, 18, 0.16) 0%, rgba(229, 169, 60, 0.06) 50%, transparent 70%);
      filter: blur(32px);
      pointer-events: none;
      z-index: 1;
      transition: all 0.6s ease;
    }
    .tss-connected-orbit-glow.active-glow {
      background: radial-gradient(circle, rgba(237, 109, 18, 0.24) 0%, rgba(229, 169, 60, 0.10) 50%, transparent 70%) !important;
      filter: blur(40px) !important;
      transform: translate(-50%, -50%) scale(1.18);
    }

    /* Orbit Stationary Ring Lines */
    .tss-connected-orbit-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 2;
    }
    .tss-connected-orbit-ring-inner {
      width: 48%;
      height: 48%;
      border: 1px dashed rgba(237, 109, 18, 0.35);
      box-shadow: 0 0 15px rgba(237, 109, 18, 0.05) inset;
    }
    .tss-connected-orbit-ring-outer {
      width: 78%;
      height: 78%;
      border: 1px solid rgba(237, 109, 18, 0.22);
    }

    /* Dynamic Network SVG Background & Flowing Lines */
    @keyframes orbitFlowDashes {
      to {
        stroke-dashoffset: -100;
      }
    }
    @keyframes orbitFlowDashesRev {
      to {
        stroke-dashoffset: 100;
      }
    }
    @keyframes orbitSonarPulse {
      0% {
        r: 60;
        opacity: 0.7;
      }
      50% {
        opacity: 0.25;
      }
      100% {
        r: 235;
        opacity: 0;
      }
    }
    .tss-orbit-flow-dash {
      stroke-dasharray: 8, 12;
      animation: orbitFlowDashes 22s linear infinite;
    }
    .tss-orbit-flow-dash-rev {
      stroke-dasharray: 6, 9;
      animation: orbitFlowDashesRev 18s linear infinite;
    }
    .tss-orbit-sonar-wave {
      animation: orbitSonarPulse 4.5s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
      transform-origin: 250px 250px;
      stroke: rgba(237, 109, 18, 0.25) !important;
    }
    .tss-orbit-sonar-wave-2 {
      animation: orbitSonarPulse 4.5s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
      animation-delay: 2.25s;
      transform-origin: 250px 250px;
      stroke: rgba(237, 109, 18, 0.25) !important;
    }
    .tss-orbit-pip {
      animation: subtlePulse 2.8s ease-in-out infinite;
    }
    .tss-connected-orbit-bg-svg {
      transition: transform 0.25s ease-out;
      will-change: transform;
    }
    .tss-orbit-spokes line {
      stroke: rgba(237, 109, 18, 0.22) !important;
    }
    #tssOrbitActiveBeam {
      stroke: #F25A3A !important;
      filter: drop-shadow(0 0 8px rgba(237, 109, 18, 0.75)) !important;
      stroke-dasharray: 6 4;
      transition: opacity 0.25s ease;
    }
    #tssOrbitActiveBeam.opacity-100,
    #tssOrbitActiveBeam.is-active,
    #tssOrbitActiveBeam[data-active="true"] {
      opacity: 1 !important;
      visibility: visible !important;
    }
    #tssOrbitActiveBeam.opacity-0 {
      opacity: 0 !important;
    }

    /* Rotating Tracks */
    .tss-connected-orbit-track {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      pointer-events: none;
      transform-origin: 50% 50%;
    }
    .tss-connected-orbit-track-inner {
      z-index: 10;
    }
    .tss-connected-orbit-track-outer {
      z-index: 12;
    }

    /* Orbit Item Wrapper */
    .tss-connected-orbit-item {
      position: absolute;
      pointer-events: auto;
      will-change: transform;
    }

    /* Cards */
    .tss-connected-orbit-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      will-change: transform;
      transform-origin: 50% 50%;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
      background: #FFFFFF;
      border: 1px solid rgba(222, 217, 208, 0.95);
      box-shadow: 0 4px 14px -2px rgba(60, 40, 20, 0.08), 0 1px 4px rgba(0, 0, 0, 0.03);
    }
    .tss-connected-orbit-card:hover,
    .tss-connected-orbit-card.active-card {
      border-color: #F25A3A !important;
      box-shadow: 0 0 20px rgba(237, 109, 18, 0.35) !important;
      z-index: 45 !important;
      background: #FFFFFF !important;
    }

    /* Inner Orbit Card Sizing - Responsive Scaling */
    .tss-connected-orbit-card-inner {
      width: 82px;
      height: 58px;
    }
    @media (min-width: 400px) {
      .tss-connected-orbit-card-inner {
        width: 90px;
        height: 64px;
      }
    }
    @media (min-width: 640px) {
      .tss-connected-orbit-card-inner {
        width: 102px;
        height: 72px;
      }
    }
    @media (min-width: 1024px) {
      .tss-connected-orbit-card-inner {
        width: 110px;
        height: 78px;
      }
    }
    @media (min-width: 1280px) {
      .tss-connected-orbit-card-inner {
        width: 114px;
        height: 80px;
      }
    }

    /* Outer Orbit Card Sizing - Responsive Scaling */
    .tss-connected-orbit-card-outer {
      width: 88px;
      height: 62px;
    }
    @media (min-width: 400px) {
      .tss-connected-orbit-card-outer {
        width: 96px;
        height: 68px;
      }
    }
    @media (min-width: 640px) {
      .tss-connected-orbit-card-outer {
        width: 108px;
        height: 76px;
      }
    }
    @media (min-width: 1024px) {
      .tss-connected-orbit-card-outer {
        width: 120px;
        height: 84px;
      }
    }
    @media (min-width: 1280px) {
      .tss-connected-orbit-card-outer {
        width: 126px;
        height: 88px;
      }
    }

    /* Orbit Card Content & Typography */
    .tss-orbit-card-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 5px 4px;
      gap: 3.5px;
      box-sizing: border-box;
      user-select: none;
      transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
      transform-origin: 50% 50%;
    }
    .tss-connected-orbit-card:hover .tss-orbit-card-content,
    .tss-connected-orbit-card.active-card .tss-orbit-card-content {
      transform: scale(1.06);
    }
    .tss-orbit-card-icon {
      color: #F25A3A;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.25s ease, color 0.25s ease;
      flex-shrink: 0;
    }
    .tss-connected-orbit-card:hover .tss-orbit-card-icon,
    .tss-connected-orbit-card.active-card .tss-orbit-card-icon {
      transform: scale(1.1);
      color: #F25A3A !important;
    }
    .tss-orbit-card-label {
      font-size: 9.5px;
      line-height: 1.18;
      font-weight: 700;
      color: #171717;
      text-align: center;
      letter-spacing: -0.01em;
      transition: color 0.3s ease;
    }
    @media (min-width: 400px) {
      .tss-orbit-card-label {
        font-size: 10.5px;
      }
    }
    @media (min-width: 640px) {
      .tss-orbit-card-label {
        font-size: 11.5px;
      }
    }
    @media (min-width: 1024px) {
      .tss-orbit-card-label {
        font-size: 12px;
      }
    }
    .tss-connected-orbit-card:hover .tss-orbit-card-label,
    .tss-connected-orbit-card.active-card .tss-orbit-card-label {
      color: #F25A3A !important;
    }

    /* Center Stationary Saffron Hub */
    .tss-connected-orbit-center-hub {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 25;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
    }
    .tss-hub-ambient-halo {
      position: absolute;
      inset: -14px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(237, 109, 18, 0.22) 0%, rgba(229, 169, 60, 0.08) 45%, transparent 70%);
      filter: blur(12px);
      pointer-events: none;
      animation: subtlePulse 3.8s ease-in-out infinite;
      transition: all 0.4s ease;
    }
    .tss-connected-orbit-hub-box {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #FFFFFF, #FAF8F5 85%);
      border: 2px solid #F25A3A;
      box-shadow: 0 10px 30px -5px rgba(212, 90, 8, 0.28), 0 0 16px rgba(237, 109, 18, 0.15) inset;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
      cursor: pointer;
    }
    .tss-connected-orbit-hub-box:hover,
    .tss-connected-orbit-hub-box.hub-active {
      transform: scale(1.08);
      box-shadow: 0 14px 38px -4px rgba(237, 109, 18, 0.38), 0 0 22px rgba(237, 109, 18, 0.25) inset;
    }
    @media (min-width: 400px) {
      .tss-connected-orbit-hub-box {
        width: 100px;
        height: 100px;
        padding: 13px;
      }
    }
    @media (min-width: 640px) {
      .tss-connected-orbit-hub-box {
        width: 124px;
        height: 124px;
        padding: 16px;
      }
    }
    @media (min-width: 1024px) {
      .tss-connected-orbit-hub-box {
        width: 138px;
        height: 138px;
        padding: 18px;
      }
    }
    .tss-connected-orbit-center-pulse {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1px solid rgba(237, 109, 18, 0.35);
      animation: subtlePulse 3.5s ease-in-out infinite;
      pointer-events: none;
    }

    /* Architecture Banner Scanning Beam */
    .tss-banner-scanline {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      border-radius: inherit;
      z-index: 10;
    }
    .tss-banner-scan-beam {
      position: absolute;
      top: -50%;
      left: -100%;
      width: 50%;
      height: 200%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(237, 109, 18, 0.05) 30%,
        rgba(229, 169, 60, 0.2) 50%,
        rgba(237, 109, 18, 0.05) 70%,
        transparent 100%
      );
      transform: rotate(25deg);
      opacity: 0;
      pointer-events: none;
    }

    /* Badges below right visual */
    .tss-connected-orbit-badge {
      background-color: var(--theme-bg-card) !important;
      border-color: var(--theme-border) !important;
      box-shadow: var(--theme-card-shadow);
      transition: all 0.3s ease;
    }
    .tss-connected-orbit-badge:hover {
      background-color: var(--theme-bg-card-alt) !important;
      border-color: var(--theme-accent) !important;
    }
    .tss-connected-orbit-badge .font-bold {
      color: var(--theme-text-primary) !important;
    }
    .tss-connected-orbit-badge .text-neutral-400 {
      color: var(--theme-text-muted) !important;
    }

    /* =========================================================
       HERO BOTTOM PILL MARQUEE CAROUSEL (DUAL-TRACK BI-DIRECTIONAL)
       ========================================================= */
    .sf-pill-marquee {
      position: relative;
      z-index: 10;
      width: 100%;
      margin-top: 2.25rem;
      border-top: 1.5px solid #CBD5E1;
      border-bottom: 1.5px solid #CBD5E1;
      background: linear-gradient(90deg, #FAF8F5 0%, #FFFFFF 50%, #FAF8F5 100%);
      padding: 14px 0;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
      box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    @media (min-width: 640px) {
      .sf-pill-marquee {
        margin-top: 2.75rem;
        padding: 18px 0;
        gap: 12px;
      }
    }
    .sf-pill-row {
      width: 100%;
      overflow: hidden;
      display: flex;
    }
    .sf-pill-track {
      display: flex;
      width: max-content;
      will-change: transform;
    }
    /* Row 1: Right-to-Left Infinite Scroll */
    .sf-pill-track-left {
      animation: sfMarqueeLeft 34s linear infinite;
    }
    /* Row 2: Left-to-Right Infinite Scroll */
    .sf-pill-track-right {
      animation: sfMarqueeRight 34s linear infinite;
    }
    .sf-pill-row:hover .sf-pill-track,
    .sf-pill-track:hover {
      animation-play-state: paused;
    }
    .sf-pill-group {
      display: flex;
      gap: 12px;
      padding-right: 12px;
    }
    @media (min-width: 640px) {
      .sf-pill-group {
        gap: 14px;
        padding-right: 14px;
      }
    }
    .sf-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1.5px solid #CBD5E1;
      background: #FFFFFF;
      font-size: 13.5px;
      font-weight: 700;
      color: #07205C;
      letter-spacing: -0.01em;
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      user-select: none;
    }
    @media (min-width: 640px) {
      .sf-pill {
        font-size: 14.5px;
        padding: 9px 20px;
        gap: 10px;
      }
    }
    .sf-pill:hover {
      border-color: #07205C;
      color: #FFFFFF;
      background: #07205C;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(7, 32, 92, 0.25), 0 0 0 1px #07205C;
    }
    .sf-pill-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 7px;
      background: rgba(242, 90, 58, 0.1);
      color: #F25A3A;
      flex-shrink: 0;
      transition: all 0.25s ease;
    }
    @media (min-width: 640px) {
      .sf-pill-icon-wrap {
        width: 28px;
        height: 28px;
        border-radius: 8px;
      }
    }
    .sf-pill:hover .sf-pill-icon-wrap {
      background: #F25A3A;
      color: #FFFFFF;
      transform: scale(1.08);
    }
    .sf-pill-icon {
      width: 15px;
      height: 15px;
      display: block;
    }
    @media (min-width: 640px) {
      .sf-pill-icon {
        width: 16px;
        height: 16px;
      }
    }
    .sf-pill:active {
      transform: translateY(0);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
    }
    @keyframes sfMarqueeLeft {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    @keyframes sfMarqueeRight {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .sf-pill-track-left,
      .sf-pill-track-right {
        animation: none;
      }
      .sf-pill-row {
        flex-wrap: wrap;
        justify-content: center;
      }
    }
  
  /* =========================================================
     LIGHT EDITORIAL DESIGN SYSTEM & COMPONENT STYLES
     ========================================================= */

  /* Section Headings */
  .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #F25A3A;
    margin-bottom: 0.75rem;
  }
  .section-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 700;
    color: #171717;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  .section-desc {
    font-size: clamp(0.95rem, 1.2vw, 1.125rem);
    color: #4B5563;
    line-height: 1.7;
    max-width: 44rem;
  }

  /* ---------------------------------------------------------
     WHAT WE DO: CONNECTED ECOSYSTEM (Section #workflow)
     --------------------------------------------------------- */
  .eco-hub-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFDF9 60%, #FFF6ED 100%);
    border: 2px solid #F25A3A;
    border-radius: 28px;
    padding: 2rem 1.75rem;
    box-shadow: 0 16px 40px -10px rgba(212, 90, 8, 0.22), 0 0 20px rgba(237, 109, 18, 0.08) inset;
    position: relative;
    text-align: center;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .eco-hub-card:hover {
    transform: scale(1.02);
    box-shadow: 0 22px 50px -10px rgba(212, 90, 8, 0.3), 0 0 24px rgba(237, 109, 18, 0.12) inset;
  }
  .eco-node-card {
    background: #FFFFFF;
    border: 1px solid #DED9D0;
    border-radius: 20px;
    padding: 1.35rem 1.25rem;
    box-shadow: 0 4px 16px rgba(60, 40, 20, 0.04);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }
    .eco-node-card img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .eco-node-card:hover img {
    transform: scale(1.04);
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  .eco-node-card:hover {
    transform: translateY(-4px);
    border-color: #F25A3A;
    box-shadow: 0 16px 36px -8px rgba(212, 90, 8, 0.16);
  }
  .eco-node-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #FFF5EE;
    border: 1px solid rgba(237, 109, 18, 0.35);
    color: #F25A3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
  }
  .eco-node-card:hover .eco-node-icon {
    transform: scale(1.08);
    background: #F25A3A;
    color: #FFFFFF;
  }
  .eco-node-tag {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #F25A3A;
  }
  .eco-node-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #171717;
    margin: 0.35rem 0 0.25rem;
    line-height: 1.3;
  }
  .eco-node-desc {
    font-size: 0.8rem;
    color: #4B5563;
    line-height: 1.5;
  }

  /* ---------------------------------------------------------
     HOW THE WORK FLOWS: PATIENT JOURNEY (Section #patient-journey)
     --------------------------------------------------------- */
  .journey-timeline-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }
  .journey-step-card {
    background: #FFFFFF;
    border: 1px solid #DED9D0;
    border-radius: 20px;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 4px 14px rgba(60, 40, 20, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s ease;
    cursor: pointer;
    position: relative;
    min-height: 220px;
  }
  .journey-step-card.active-step {
    border-color: #F25A3A;
    box-shadow: 0 10px 25px -5px rgba(237, 109, 18, 0.18);
  }
  .journey-step-card:hover {
    border-color: #F25A3A !important;
    transform: translateY(-10px) !important;
    box-shadow: 0 24px 44px -10px rgba(212, 90, 8, 0.2) !important;
  }
  #patient-journey .grid-cols-1.md\:grid-cols-3 > div {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
  }
  #patient-journey .grid-cols-1.md\:grid-cols-3 > div:hover {
    transform: translateY(-10px) !important;
    border-color: #F25A3A !important;
    box-shadow: 0 20px 40px -10px rgba(212, 90, 8, 0.14) !important;
  }
  .journey-step-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FFF5EE;
    border: 1.5px solid #F25A3A;
    color: #F25A3A;
    font-weight: 800;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(237, 109, 18, 0.15);
  }
  .journey-status-pill {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #047857;
  }
  .journey-step-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #171717;
    margin: 0.85rem 0 0.35rem;
    line-height: 1.3;
  }
  .journey-step-desc {
    font-size: 0.82rem;
    color: #4B5563;
    line-height: 1.6;
  }
  .journey-connector-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #F25A3A 0%, #E5A93C 50%, #F25A3A 100%);
    z-index: 0;
    opacity: 0.45;
  }

  /* ---------------------------------------------------------
     CAPABILITIES (Section #solution)
     --------------------------------------------------------- */
  .cap-featured-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFDF9 50%, #FFF8F0 100%);
    border: 1.5px solid rgba(237, 109, 18, 0.35);
    border-radius: 26px;
    padding: 2.25rem;
    box-shadow: 0 10px 30px rgba(60, 40, 20, 0.06);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  }
  .cap-featured-card:hover {
    transform: translateY(-5px);
    border-color: #F25A3A;
    box-shadow: 0 22px 50px -10px rgba(212, 90, 8, 0.2);
  }
  .cap-card {
    background: #FFFFFF;
    border: 1px solid #DED9D0;
    border-radius: 22px;
    padding: 1.75rem;
    box-shadow: 0 4px 16px rgba(60, 40, 20, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  }
  .cap-card:hover {
    transform: translateY(-5px);
    border-color: #F25A3A;
    box-shadow: 0 20px 45px -10px rgba(212, 90, 8, 0.16);
  }
  .cap-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #FAF8F5;
    border: 1px solid #DED9D0;
    color: #4B5563;
    font-size: 0.72rem;
    font-weight: 600;
  }
  .cap-queue-item {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  }

  /* ---------------------------------------------------------
     AUTOMATION + HUMAN SUPPORT (Section #automation-human)
     --------------------------------------------------------- */
  .auto-flow-box {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    position: relative;
  }
  .auto-step-card {
    background: #FFFFFF;
    border: 1px solid #DED9D0;
    border-radius: 18px;
    padding: 1.35rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 4px 12px rgba(60, 40, 20, 0.04);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
  }
  .auto-step-card:hover {
    transform: translateY(-3px);
    border-color: #F25A3A;
    box-shadow: 0 12px 28px -6px rgba(212, 90, 8, 0.16);
  }
  .auto-step-card.active-flow-step {
    border-color: #F25A3A;
    background: #FFFDF9;
    box-shadow: 0 10px 25px -5px rgba(237, 109, 18, 0.18);
  }
  .auto-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFF5EE;
    border: 1px solid rgba(237, 109, 18, 0.35);
    color: #F25A3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
  }
  .chat-bubble-patient {
    background: #FAF8F5;
    border: 1px solid #DED9D0;
    color: #171717;
    border-radius: 18px 18px 18px 4px;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }
  .chat-bubble-system {
    background: #FFF5EE;
    border: 1px dashed rgba(237, 109, 18, 0.5);
    color: #C2410C;
    border-radius: 12px;
    padding: 0.65rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
  }
  .chat-bubble-human {
    background: #F0FDF4;
    border: 1.5px solid #86EFAC;
    color: #14532D;
    border-radius: 18px 18px 4px 18px;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
  }

  /* ---------------------------------------------------------
     YOUR EXISTING EHR / PRACTICE MANAGEMENT (Section #integration)
     --------------------------------------------------------- */
  .s26-workflow-strip {
    background: #FFFFFF;
    border: 1px solid #DED9D0;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(45, 41, 38, 0.03);
    transition: box-shadow 0.3s ease;
  }
  .s26-workflow-strip:hover {
    box-shadow: 0 6px 18px rgba(45, 41, 38, 0.06);
  }

  .s26-ehr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }
  @media (min-width: 640px) {
    .s26-ehr-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.125rem;
    }
  }
  @media (min-width: 1024px) {
    .s26-ehr-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1.25rem;
    }
  }

  .s26-ehr-logo {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #DED9D0;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 1.5rem 1rem 1.25rem;
    min-height: 152px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    text-align: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                background-color 0.25s ease;
    box-shadow: 0 1px 3px rgba(45, 41, 38, 0.04);
    outline: none;
    width: 100%;
  }
  .s26-ehr-logo:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 82, 5, 0.45);
    box-shadow: 0 10px 24px -4px rgba(227, 82, 5, 0.1), 0 4px 8px -2px rgba(45, 41, 38, 0.03);
  }
  .s26-ehr-logo:focus-visible {
    outline: 2px solid #E35205;
    outline-offset: 2px;
  }
  .s26-ehr-logo:active {
    transform: translateY(-1px);
  }

  .s26-ehr-logo img {
    max-width: 140px;
    max-height: 48px;
    width: auto;
    height: 48px;
    object-fit: contain;
    margin: auto auto 0.75rem auto;
    display: block;
    transition: transform 0.25s ease;
  }
  .s26-ehr-logo:hover img {
    transform: scale(1.03);
  }

  .s26-ehr-logo strong {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2D2926;
    margin-top: auto;
    line-height: 1.35;
    display: block;
    transition: color 0.2s ease;
  }

  .s26-ehr-tick {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E35205;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .s26-ehr-tick svg {
    width: 12px;
    height: 12px;
    stroke: #FFFFFF;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  .s26-ehr-logo[aria-pressed="true"],
  .s26-ehr-logo.is-selected {
    border-color: #E35205;
    background: #FFFDF9;
    box-shadow: 0 0 0 1.5px #E35205, 0 8px 22px -4px rgba(227, 82, 5, 0.16);
  }
  .s26-ehr-logo[aria-pressed="true"] .s26-ehr-tick,
  .s26-ehr-logo.is-selected .s26-ehr-tick {
    opacity: 1;
    transform: scale(1);
  }
  .s26-ehr-logo[aria-pressed="true"] strong,
  .s26-ehr-logo.is-selected strong {
    color: #C04300;
  }

  /* Distinct "Another EHR?" Card */
  .s26-ehr-logo.s26-ehr-other {
    border: 1.5px dashed #DED9D0;
    background: #FAF8F5;
  }
  .s26-ehr-logo.s26-ehr-other:hover {
    border-color: #E35205;
    background: #FFF9F5;
    border-style: solid;
  }
  .s26-ehr-logo.s26-ehr-other > svg:not(.s26-ehr-tick svg) {
    width: 32px;
    height: 32px;
    stroke: #E35205;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    margin: auto auto 0.75rem auto;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .s26-ehr-logo.s26-ehr-other:hover > svg:not(.s26-ehr-tick svg) {
    transform: rotate(90deg) scale(1.1);
  }
  .s26-ehr-logo.s26-ehr-other strong {
    color: #524F4A;
  }
  .s26-ehr-logo.s26-ehr-other:hover strong {
    color: #C04300;
  }

  /* ---------------------------------------------------------
     WHY SAFFRON & PROOF CARDS (Section #economic-model)
     --------------------------------------------------------- */
  .why-card {
    background: #FFFFFF;
    border: 1px solid #DED9D0;
    border-radius: 22px;
    padding: 2rem 1.75rem;
    box-shadow: 0 4px 16px rgba(60, 40, 20, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
  }
  .why-card:hover {
    transform: translateY(-10px) !important;
    border-color: #F25A3A !important;
    box-shadow: 0 24px 48px -10px rgba(212, 90, 8, 0.2) !important;
  }

  /* Before We Connect Cards (Section #resources) */
  #resources .grid > div {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
  }
  #resources .grid > div:hover {
    transform: translateY(-10px) !important;
    border-color: #F25A3A !important;
    box-shadow: 0 24px 48px -10px rgba(212, 90, 8, 0.16) !important;
  }

  /* ---------------------------------------------------------
     ACCORDION & FAQ (Section #faq)
     --------------------------------------------------------- */
  .faq-accordion-item {
    background: #FFFFFF;
    border: 1px solid #DED9D0;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(60, 40, 20, 0.03);
    transition: all 0.25s ease;
  }
  .faq-accordion-item:hover {
    border-color: rgba(237, 109, 18, 0.5);
  }
  .faq-accordion-item[open] {
    background: #FFFDF9;
    border-color: #F25A3A;
    box-shadow: 0 8px 24px -6px rgba(212, 90, 8, 0.12);
  }
  .faq-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 1.05rem;
    color: #171717;
  }
  .faq-accordion-summary::-webkit-details-marker {
    display: none;
  }
  .faq-accordion-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FAF8F5;
    border: 1px solid #DED9D0;
    color: #F25A3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
  }
  .faq-accordion-item[open] .faq-accordion-icon {
    transform: rotate(45deg);
    background: #F25A3A;
    color: #FFFFFF;
    border-color: #F25A3A;
  }

  /* Responsive Adjustments */
  @media (max-width: 1024px) {
    .journey-timeline-track {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .journey-connector-line {
      display: none;
    }
    .auto-flow-box {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 768px) {
    .journey-timeline-track {
      grid-template-columns: 1fr;
    }
    .auto-flow-box {
      grid-template-columns: 1fr;
    }
    .cap-featured-card {
      padding: 1.5rem;
    }
    .eco-hub-card {
      padding: 1.5rem 1.25rem;
    }
  }

/* =========================================================
   CHAPTER-BY-CHAPTER SECTION RHYTHM & VISUAL HIERARCHY
   Clean Light (White) vs Dramatic Chapter (Navy) vs Soft Neutral (Slate)
   Palette: Navy #07205C | Saffron #F25A3A | Slate Border #E2E8F0 | Soft Slate #F5F7FA
   ========================================================= */

/* 1. Global Typography & Heading Contrast */
.section-title,
.tss-solutions-title,
.s26-title,
.section-heading h2,
#hero h1,
#hero h2,
#workflow h2,
#patient-journey h2,
#platform h2,
#integration h2,
#conferences h2,
#blog h2,
#faq h2 {
  color: #07205C !important;
}

/* Category Eyebrows & Kickers */
.section-eyebrow,
.s26-kicker,
.tss-eyebrow,
.cmp-eyebrow {
  color: #F25A3A !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.section-eyebrow > span:first-child,
.s26-kicker::before,
.cmp-eyebrow::before {
  background-color: #F25A3A !important;
  height: 2px !important;
}

/* Readable Body Typography */
.section-desc,
.tss-solutions-subtitle,
.s26-lead {
  color: #475569 !important;
}

/* 2. SECTION-BY-SECTION RHYTHM (13 DISTINCT CHAPTERS) */

/* 1. HERO (Clean White) 
#hero {
  background-color: #FFFFFF !important;
} */

/* 2. ZED CORE / PRODUCT SHOWCASE (Full-Bleed Dramatic Navy) */
#bannerSection,
.tss-banner-visual-section {
  background-color: #102f3c !important;
  border-top: 1px solid rgba(226, 232, 240, 0.08) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.08) !important;
  position: relative;
}
#bannerVisualContainer {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(226, 232, 240, 0.15) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 50px -10px rgba(212, 90, 8, 0.2) !important;
  backdrop-filter: blur(12px) !important;
}
.tss-banner-inner {
  border-color: rgba(226, 232, 240, 0.1) !important;
}

/* 3. YOUR PRACTICE HAS HUNDREDS OF MOVING PARTS... (Clean Editorial White) */
#workflow,
#workflow.tss-solutions-section {
  background-color: #FFFFFF !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(212, 90, 8, 0.03), transparent 60%) !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
#workflow .tss-solutions-title {
  color: #07205C !important;
  font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
}
#workflow .tss-solutions-title .text-gold-gradient {
  background: linear-gradient(135deg, #171717 0%, #B97818 50%, #F25A3A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

/* 4. ACTION / VIDEO (Dramatic Navy) */
#see-in-action {
  background-color: #07205C !important;
  border-top: 1px solid rgba(226, 232, 240, 0.1) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.1) !important;
}
#see-in-action h2,
#see-in-action h2.font-serif,
#see-in-action .text-white {
  color: #FFFFFF !important;
}
#see-in-action h2 em {
  color: #FB923C !important;
}
#see-in-action p,
#see-in-action .text-slate-300 {
  color: #CBD5E1 !important;
}

/* 5. KEEP THE PATIENT JOURNEY MOVING (Soft Slate Workflow) */
#patient-journey {
  background-color: #F5F7FA !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* 6. THE BREADTH OF A PLATFORM... (Clean Technical White) */
#platform,
#platform.s26-platform {
  background-color: #FFFFFF !important;
  background-image: radial-gradient(circle at 80% 20%, rgba(212, 90, 8, 0.035), transparent 50%) !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* 7. AUTOMATE THE REPETITION (Technical Command Center Navy) */
#automation-human {
  background-color: #07205C !important;
  border-top: 1px solid rgba(226, 232, 240, 0.1) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.1) !important;
}
#automation-human .section-title,
#automation-human h2,
#automation-human h3 {
  color: #FFFFFF !important;
}
#automation-human .text-gold-gradient {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
}
#automation-human .section-desc {
  color: #CBD5E1 !important;
}
#automation-human .auto-step-card {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 1.5rem 1.1rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
#automation-human .auto-step-card strong {
  color: #07205C !important;
}
#automation-human .auto-step-card p {
  color: #475569 !important;
}
#automation-human .auto-step-card:hover,
#automation-human .auto-step-card.active-flow-step {
  border-color: #F25A3A !important;
  background: #FFFDF9 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px -4px rgba(242, 90, 58, 0.35) !important;
}
#automation-human .auto-icon-circle {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #F25A3A !important;
  transition: all 0.3s ease !important;
}
#automation-human .auto-step-card:hover .auto-icon-circle,
#automation-human .auto-step-card.active-flow-step .auto-icon-circle {
  background: #FFF5EE !important;
  border-color: rgba(242, 90, 58, 0.5) !important;
  color: #F25A3A !important;
  transform: scale(1.08) !important;
}
#automation-human .bg-white.border.border-\[\#DED9D0\] {
  background: #1E293B !important;
  border-color: rgba(226, 232, 240, 0.15) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6) !important;
}
#automation-human [data-human-card],
#automation-human .auto-col-card {
  background: #1E293B !important;
  border-color: rgba(226, 232, 240, 0.15) !important;
}

/* White Cards inside Automation Showcase */
#automation-human .bg-\[\#FAF8F5\],
#automation-human .bg-\[\#FFFDF9\],
#automation-human #tssHandoffCard {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}
#automation-human .bg-\[\#FAF8F5\] h4,
#automation-human .bg-\[\#FFFDF9\] h4 {
  color: #07205C !important;
  font-weight: 700 !important;
}
#automation-human .bg-\[\#FAF8F5\] span,
#automation-human .bg-\[\#FFFDF9\] span {
  color: #64748B !important;
}
#automation-human .bg-\[\#FFFDF9\] span.text-saffron-600 {
  color: #F25A3A !important;
}
#automation-human .bg-\[\#FAF8F5\] li,
#automation-human .bg-\[\#FFFDF9\] li {
  color: #334155 !important;
}

/* Contrast Enhancements for Cockpit Components */
#automation-human .text-slate-300,
#automation-human .text-slate-200 {
  color: #E2E8F0 !important;
}
#automation-human .text-slate-400,
#automation-human p.text-xs.text-neutral-500,
#automation-human p.text-xs.text-slate-400 {
  color: #94A3B8 !important;
}
#automation-human #tssLangSelectorBar span {
  color: #E2E8F0 !important;
}
#automation-human #tssLangSelectorBar svg {
  color: #94A3B8 !important;
}
#automation-human .tss-lang-btn {
  background: #07205C !important;
  border: 1px solid #334155 !important;
  color: #E2E8F0 !important;
  transition: all 0.2s ease !important;
}
#automation-human .tss-lang-btn span {
  color: #E2E8F0 !important;
}
#automation-human .tss-lang-btn:hover {
  background: #1E293B !important;
  border-color: #F25A3A !important;
  color: #FFFFFF !important;
}
#automation-human .tss-lang-btn:hover span {
  color: #FFFFFF !important;
}
#automation-human .tss-lang-btn.is-active-lang {
  background: #F25A3A !important;
  border: 1px solid #F25A3A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(212, 90, 8, 0.35) !important;
}
#automation-human .tss-lang-btn.is-active-lang span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
#automation-human p.text-xs,
#automation-human .text-slate-400 {
  color: #94A3B8 !important;
}

/* Chat Bubbles */
#automation-human .chat-bubble-patient {
  background: #07205C !important;
  border: 1px solid #334155 !important;
}
#automation-human .chat-bubble-patient span {
  color: #94A3B8 !important;
}
#automation-human .chat-bubble-patient p {
  color: #FFFFFF !important;
}
#automation-human .chat-bubble-system {
  background: #FFF7ED !important;
  border: 1.5px dashed #F25A3A !important;
  color: #9A3412 !important;
  font-weight: 600 !important;
}
#automation-human .chat-bubble-system i {
  color: #F25A3A !important;
}
#automation-human .chat-bubble-system span {
  color: #9A3412 !important;
}
#automation-human .chat-bubble-human {
  background: #ECFDF5 !important;
  border: 1.5px solid #10B981 !important;
}
#automation-human .chat-bubble-human span {
  color: #065F46 !important;
}
#automation-human .chat-bubble-human p {
  color: #064E3B !important;
  font-weight: 600 !important;
}

/* 7B. AGENTIC AI & ROBOTICS MULTILINGUAL HANDOFF (Warm Architectural Editorial) */
#agentic-handoff {
  background-color: #FAF9F6 !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  position: relative;
}
#agentic-handoff .section-title {
  color: #07205C !important;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}
#agentic-handoff .section-desc {
  color: #475569 !important;
}
#agentic-handoff .text-gold-gradient {
  background: linear-gradient(135deg, #171717 0%, #B97818 50%, #F25A3A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}
#agentic-handoff .chat-bubble-patient {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
#agentic-handoff .chat-bubble-patient span {
  color: #64748B !important;
}
#agentic-handoff .chat-bubble-patient p {
  color: #0F172A !important;
  font-size: 14.5px;
}
#agentic-handoff .chat-bubble-system {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%) !important;
  border: 1.5px dashed #F25A3A !important;
  color: #9A3412 !important;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 14px rgba(242, 90, 58, 0.08);
}
#agentic-handoff .chat-bubble-system i {
  color: #F25A3A !important;
}
#agentic-handoff .chat-bubble-human {
  background: #F0FDF4 !important;
  border: 1.5px solid #10B981 !important;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08);
}
#agentic-handoff .chat-bubble-human span {
  color: #065F46 !important;
}
#agentic-handoff .chat-bubble-human p {
  color: #064E3B !important;
  font-weight: 600 !important;
}
#agentic-handoff .tss-lang-btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: all 0.2s ease !important;
}
#agentic-handoff .tss-lang-btn span {
  color: #334155 !important;
}
#agentic-handoff .tss-lang-btn:hover {
  background: #FFF7ED !important;
  border-color: #F25A3A !important;
  color: #F25A3A !important;
}
#agentic-handoff .tss-lang-btn:hover span {
  color: #F25A3A !important;
}
#agentic-handoff .tss-lang-btn.is-active-lang {
  background: #F25A3A !important;
  border-color: #F25A3A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(242, 90, 58, 0.25) !important;
}
#agentic-handoff .tss-lang-btn.is-active-lang span {
  color: #FFFFFF !important;
}

/* 8. HR / PEOPLE / SYSTEMS (Soft Slate Neutral) */
#integration {
  background-color: #F5F7FA !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* 9. THERE'S NOTHING ELSE LIKE THIS (Climax Proof Navy) */
#compare,
#compare.cmp-section {
  background-color: #07205C !important;
  border-top: 1px solid rgba(226, 232, 240, 0.1) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.1) !important;
}

/* 10. UPCOMING CONFERENCES (Clean Editorial White) */
#conferences {
  background-color: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* 11. TRACKING OPERATIONS INSIGHTS (Soft Slate Neutral) */
#blog {
  background-color: #F5F7FA !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* 12. FREQUENTLY ASKED QUESTIONS (Clean Editorial White) */
#faq {
  background-color: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* 13. FINAL CTA (Full-Bleed Closing Navy) */
#finalCta {
  background: #07205C !important;
  background-image: radial-gradient(ellipse at center, rgba(212, 90, 8, 0.12), transparent 70%) !important;
  border-top: 1px solid rgba(226, 232, 240, 0.1) !important;
  border-bottom: none !important;
  position: relative;
}
#finalCta h2,
#finalCta h2.font-serif,
#finalCta .text-neutral-900,
#finalCta .text-gold-gradient {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
}
#finalCta p,
#finalCta .text-neutral-600 {
  color: #CBD5E1 !important;
}
#finalCta a[href="#workflow"] {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(226, 232, 240, 0.2) !important;
  color: #FFFFFF !important;
}
#finalCta a[href="#workflow"]:hover {
  border-color: #F25A3A !important;
  color: #FB923C !important;
}

/* 14. FOOTER (Deep Brand Navy #07205C) */
footer {
  background-color: #07205C !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}

/* 3. CARD ELEVATION, BORDERS & DEPTH */
.journey-step-card,
.ehr-card,
.blog-card,
#conferences .grid > div,
.s26-workflow-strip {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 10px 25px -5px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s ease !important;
}

.journey-step-card:hover,
.ehr-card:hover,
.blog-card:hover,
#conferences .grid > div:hover {
  transform: translateY(-4px) !important;
  border-color: #F25A3A !important;
  box-shadow: 0 20px 40px -12px rgba(212, 90, 8, 0.18) !important;
}

#platform .s26-map-node {
  border: 1px solid #E2E8F0 !important;
}

/* Interactive Stage (#workflow) */
.tss-stage-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.tss-nav-btn.is-active {
  background: #F25A3A !important;
  border-color: #F25A3A !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px -4px rgba(212, 90, 8, 0.45) !important;
}

.tss-nav-btn:hover:not(.is-active) {
  border-color: #F25A3A !important;
  background: #F25A3A !important;
  color: #FFFFFF !important;
}

.tss-cap-card:hover {
  border-color: #F25A3A !important;
  box-shadow: 0 14px 30px -4px rgba(212, 90, 8, 0.16), 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

/* Video Section (#see-in-action) Glowing Pulse */
@keyframes saffronPlayPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(212, 90, 8, 0.55), 0 0 35px rgba(212, 90, 8, 0.45);
  }
  50% {
    box-shadow: 0 0 0 18px rgba(212, 90, 8, 0), 0 0 55px rgba(212, 90, 8, 0.75);
  }
}
.saf-play-button {
  background: #F25A3A !important;
  animation: saffronPlayPulse 2.5s infinite !important;
}

/* EHR Grid (#integration) */
.ehr-card.active-ehr {
  border: 2px solid #F25A3A !important;
  box-shadow: 0 12px 30px -6px rgba(212, 90, 8, 0.22) !important;
  transform: translateY(-2px) !important;
}

/* Editorial FAQ Accordion (#faq) */
#faq .faq-accordion-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #E2E8F0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 !important;
  margin-bottom: 0 !important;
  transition: all 0.2s ease !important;
}

#faq .faq-accordion-item[open] {
  background: transparent !important;
  border-color: #CBD5E1 !important;
  box-shadow: none !important;
}

#faq .faq-accordion-summary {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #07205C !important;
  padding: 0 !important;
}

#faq .faq-accordion-summary:hover {
  color: #F25A3A !important;
}

#faq .faq-accordion-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

#faq .faq-accordion-item[open] .faq-accordion-icon {
  transform: rotate(45deg) !important;
  background: #FFF7ED !important;
  color: #F25A3A !important;
  border-color: #FED7AA !important;
}

#faq .faq-accordion-item .mt-4 {
  border-top: none !important;
  padding-top: 10px !important;
  padding-bottom: 6px !important;
  color: #475569 !important;
  font-size: 0.975rem !important;
  line-height: 1.7 !important;
}

@keyframes ecoPulseDash {
  to {
    stroke-dashoffset: -40;
  }
}
.eco-flow-line {
  stroke-dasharray: 6 6;
  animation: ecoPulseDash 4s linear infinite;
}
  /* =========================================================
     SCOPED STYLES: WHAT WE DO CAPABILITY CAROUSEL & VIDEO
     ========================================================= */
  .saf-capability-carousel {
    position: relative;
    width: 100%;
  }
  .saf-carousel-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0 20px;
  }
  .saf-carousel-track {
    display: flex;
    gap: 20px;
    will-change: transform;
    transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .saf-cap-card {
    flex: 0 0 390px;
    max-width: 85vw;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.4s ease,
                border-color 0.4s ease,
                box-shadow 0.4s ease;
    opacity: 0.72;
    transform: scale(0.96);
    cursor: pointer;
    border-width: 1.5px;
    background: #FFFFFF;
  }
  @media (max-width: 640px) {
    .saf-cap-card {
      flex: 0 0 calc(100% - 36px);
      min-width: 290px;
    }
  }
  .saf-cap-card:hover {
    opacity: 0.95;
    transform: scale(0.98);
  }
  .saf-cap-card.is-active {
    opacity: 1;
    transform: scale(1.02);
    border-color: var(--card-accent, #F25A3A) !important;
    box-shadow: 0 20px 45px -12px rgba(16, 47, 60, 0.12),
                0 0 0 1px var(--card-accent, #F25A3A);
  }
  .saf-cap-card .saf-active-indicator {
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .saf-cap-card.is-active .saf-active-indicator {
    opacity: 1;
    transform: translateY(0);
  }
  .saf-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: #DED9D0;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    padding: 0;
  }
  .saf-carousel-dot.is-active {
    width: 28px;
    background-color: #F25A3A;
  }
  .saf-video-card {
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
  }
  .saf-play-button {
    box-shadow: 0 0 35px rgba(237, 109, 18, 0.45);
  }
  .saf-play-button:hover {
    box-shadow: 0 0 50px rgba(237, 109, 18, 0.75);
  }
  @media (prefers-reduced-motion: reduce) {
    .saf-cap-card,
    .saf-carousel-track,
    .saf-play-button {
      transition: none !important;
      transform: none !important;
      animation: none !important;
    }
  }

/* === STYLE TAG 1 === */

/* =========================================================
   THE SAFFRON SOLUTION - WHAT WE DO (UNIFIED SOLUTIONS STAGE)
   Full-width interactive 8-pillar capability architecture
========================================================= */

#workflow.tss-solutions-section {
  --ink: #07205C;
  --ink2: #173e4e;
  --navy: #07205C;
  --orange: #F25A3A;
  --burnt: #ab421d;
  --peach: #fdf2ec;
  --peach-border: #f9d5c3;
  --paper: #FAF9F6;
  --line: #E2E8F0;
  --muted: #64748B;
  --green: #10b981;
  --green-light: #ecfdf5;

  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 88px 0 96px;
  background: #FAF9F6;
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

#workflow.tss-solutions-section *,
#workflow.tss-solutions-section *::before,
#workflow.tss-solutions-section *::after {
  box-sizing: border-box;
}

/* Subtle background accent glow */
.tss-solutions-section::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,107,50,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tss-solutions-section::after {
  content: "";
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,47,60,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tss-solutions-wrap {
  width: min(1380px, calc(100% - 48px));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* SECTION HEADER */
.tss-solutions-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 52px;
}

.tss-solutions-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #F25A3A;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin-bottom: 14px;
}

.tss-solutions-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #F25A3A;
  display: inline-block;
}

.tss-solutions-title {
  color: #07205C;
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}

.tss-solutions-subtitle {
  color: #475569;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 760px;
}

/* STAGE CONTAINER */
.tss-stage-card {
  background: #FFFFFF;
  border: 1px solid #DCE3EC;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* STAGE TOP BAR */
.tss-stage-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 28px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
}

.tss-stage-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tss-stage-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #F25A3A, #ab421d);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 4px 12px rgba(233,107,50,0.28);
}

.tss-stage-brand-meta strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #07205C;
  line-height: 1.2;
}

.tss-stage-brand-meta span {
  display: block;
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}

.tss-stage-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.tss-stage-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  user-select: none;
}

.tss-stage-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  line-height: 1.2;
}

.tss-stage-stat-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1.25;
}

.tss-stage-stat-sep {
  width: 1px;
  height: 26px;
  background: #E2E8F0;
  display: none;
}
@media (min-width: 640px) {
  .tss-stage-stat-sep {
    display: block;
  }
}

.tss-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
  animation: tssGlow 2s ease-in-out infinite;
}

@keyframes tssGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* STAGE MAIN WORKSPACE */
.tss-stage-grid {
  display: grid;
  grid-template-columns: 310px 1fr;
  min-height: 620px;
}

@media (max-width: 1024px) {
  .tss-stage-grid {
    grid-template-columns: 1fr;
  }
}

/* SIDEBAR MENU (Deep Navy with Saffron Orange Active/Hover) */
.tss-stage-sidebar {
  background: #07205C;
  border-right: 1px solid #1E293B;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* DESKTOP SIDEBAR / MOBILE ACCORDION STYLES */
.tss-accordion-item {
  width: 100%;
}

.tss-accordion-collapse {
  display: none;
}

@media (min-width: 1025px) {
  .tss-accordion-collapse {
    display: none !important;
  }
}

.tss-sidebar-legend {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94A3B8;
  padding: 6px 12px 12px;
}

.tss-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #CBD5E1;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  user-select: none;
}

.tss-nav-btn:hover {
  background: #F25A3A !important;
  color: #FFFFFF !important;
  border-color: #F25A3A !important;
  box-shadow: 0 4px 14px rgba(212, 90, 8, 0.35);
  transform: translateX(3px);
}

.tss-nav-btn:hover .tss-nav-num {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.tss-nav-btn:hover .tss-nav-title {
  color: #FFFFFF !important;
}

.tss-nav-btn:hover .tss-nav-chevron {
  opacity: 1 !important;
  color: #FFFFFF !important;
  transform: translateX(0) !important;
}

.tss-nav-btn.is-active {
  background: #F25A3A !important;
  color: #FFFFFF !important;
  border-color: #F25A3A !important;
  box-shadow: 0 8px 24px -4px rgba(212, 90, 8, 0.45) !important;
  transform: translateX(4px);
  position: relative;
}

@media (min-width: 1025px) {
  .tss-nav-btn.is-active::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #F25A3A;
    pointer-events: none;
    z-index: 10;
  }
}

.tss-nav-btn-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tss-nav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.tss-nav-btn.is-active .tss-nav-num {
  background: #07205C !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tss-nav-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #E2E8F0;
}

.tss-nav-btn.is-active .tss-nav-title {
  font-weight: 700;
  color: #FFFFFF !important;
}

.tss-nav-chevron {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
  color: #FFFFFF;
}

.tss-nav-btn.is-active .tss-nav-chevron {
  opacity: 1;
  transform: translateX(0);
  color: #FFFFFF;
}

/* CONTENT CANVAS */
.tss-stage-canvas {
  background: radial-gradient(circle at 92% 10%, rgba(212, 90, 8, 0.04), transparent 45%),
              linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
  padding: 32px 40px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  border: 2px solid #F25A3A;
  border-bottom-right-radius: 23px;
}

/* MOBILE ACCORDION ADAPTATION (REPLACES HORIZONTAL TAB SCROLL) */
@media (max-width: 1024px) {
  .tss-stage-grid {
    display: block !important;
    min-height: auto !important;
  }

  .tss-stage-canvas {
    display: none !important;
  }

  .tss-stage-sidebar {
    border-right: none;
    border-bottom: none;
    flex-direction: column;
    overflow: visible;
    padding: 16px 14px;
    gap: 10px;
    border-radius: 20px;
    width: 100%;
  }

  .tss-sidebar-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px 10px;
  }

  .tss-accordion-item {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: all 0.25s ease;
  }

  .tss-accordion-item.is-active {
    border-color: #F25A3A;
    background: rgba(242, 90, 58, 0.06);
    box-shadow: 0 4px 18px rgba(242, 90, 58, 0.18);
  }

  .tss-nav-btn {
    width: 100% !important;
    white-space: normal !important;
    scroll-snap-align: none !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 14px 14px 0 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .tss-accordion-item:not(.is-active) .tss-nav-btn {
    border-radius: 14px;
  }

  .tss-accordion-item.is-active .tss-nav-btn {
    background: #F25A3A !important;
    color: #FFFFFF !important;
  }

  .tss-accordion-item.is-active .tss-nav-btn .tss-nav-title {
    color: #FFFFFF !important;
  }

  .tss-accordion-item.is-active .tss-nav-btn .tss-nav-num {
    background: #07205C !important;
    color: #FFFFFF !important;
  }

  .tss-nav-chevron {
    display: block !important;
    opacity: 0.7;
    color: #CBD5E1;
    transform: rotate(0deg);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, color 0.2s ease;
  }

  .tss-accordion-item.is-active .tss-nav-chevron {
    opacity: 1 !important;
    transform: rotate(90deg) !important;
    color: #FFFFFF !important;
  }

  .tss-accordion-collapse.is-open {
    display: block !important;
    animation: tssAccExpand 0.28s ease-out;
  }
}

@keyframes tssAccExpand {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .tss-stage-canvas {
    padding: 24px 20px 20px;
  }
}

/* HERO STRIP INSIDE CANVAS */
.tss-canvas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid #EDF2F7;
}

.tss-canvas-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F25A3A;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 10px;
}

.tss-canvas-meta-pill::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #F25A3A;
  display: inline-block;
}

.tss-canvas-title {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 800;
  color: #07205C;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.tss-canvas-desc {
  font-size: 16px;
  color: #475569;
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}

.tss-canvas-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #1E293B;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

.tss-canvas-badge-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(212, 90, 8, 0.12);
  color: #F25A3A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* 3-COLUMN CAPABILITY CARDS (Correlated with Saffron / Navy) */
.tss-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 30px;
}

@media (max-width: 900px) {
  .tss-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.tss-cap-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,0.03);
}

.tss-cap-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #F25A3A;
  opacity: 0.35;
  transition: all 0.25s ease;
}

.tss-cap-card:hover {
  border-color: #F25A3A;
  box-shadow: 0 14px 30px -4px rgba(212, 90, 8, 0.16), 0 4px 12px rgba(15, 23, 42, 0.05);
  transform: translateY(-3px);
}

.tss-cap-card:hover::before {
  opacity: 1;
  height: 4px;
  background: #F25A3A;
}

.tss-cap-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F1F5F9;
}

.tss-cap-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  color: #F25A3A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.tss-cap-card:hover .tss-cap-icon-box {
  background: #F25A3A;
  border-color: #F25A3A;
  color: #FFFFFF;
  transform: scale(1.05);
}

.tss-cap-icon-box svg {
  width: 20px;
  height: 20px;
}

.tss-cap-title {
  font-size: 17.5px;
  font-weight: 700;
  color: #07205C;
  letter-spacing: -0.01em;
  margin: 0;
}

.tss-cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tss-cap-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #334155;
  line-height: 1.55;
}

.tss-cap-item-bullet {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  color: #F25A3A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.tss-cap-card:hover .tss-cap-item-bullet {
  background: #F25A3A;
  border-color: #F25A3A;
  color: #FFFFFF;
}

.tss-cap-item-text {
  flex: 1;
  font-weight: 500;
}

/* STAGE FOOTER STRIP */
.tss-stage-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
}

.tss-footer-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: #475569;
}

.tss-footer-summary strong {
  color: #07205C;
  font-weight: 700;
}

.tss-footer-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.tss-footer-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--burnt);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.tss-footer-action:hover {
  gap: 12px;
  color: var(--orange);
}

/* FADE ANIMATION ON TAB SWITCH */
.tss-fade-enter {
  animation: tssFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tssFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === STYLE TAG 2 === */

  @keyframes borderBeamRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .border-beam-container {
    position: relative;
    overflow: hidden;
  }
  .border-beam-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, #F25A3A 320deg, #F8B179 360deg);
    animation: borderBeamRotate 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
  }
  .border-beam-container:hover::before,
  .border-beam-container.is-active::before {
    opacity: 1;
  }
  .opt1-card {
    will-change: transform, opacity;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .opt1-card.is-active {
    box-shadow: 0 12px 30px -6px rgba(242, 90, 58, 0.25);
  }
  .opt1-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -8px rgba(242, 90, 58, 0.22);
  }

/* === STYLE TAG 3 === */

/* =========================================================
   THE SAFFRON SOLUTION
   ONE PLATFORM TO POWER IT ALL
   OPTION A: UNIFIED 6-BOX SEQUENTIAL SCROLL REVEAL SECTION
========================================================= */

#platform {
  scroll-margin-top: 80px;
}

/* SVG Animated Flow Lines */
@keyframes flowLine {
  0% { stroke-dashoffset: 48; }
  100% { stroke-dashoffset: 0; }
}
.flow-dash {
  stroke-dasharray: 8 6;
  animation: flowLine 3s linear infinite;
}

/* Ambient Pulsing Glow */
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50% { transform: scale(1.08); opacity: 0.45; }
}
.pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* 360 Orbital Ring Node Cards */
.orbital-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}
.orbital-card:hover {
  border-color: #F25A3A !important;
  box-shadow: 0 16px 36px -8px rgba(242, 90, 58, 0.22);
}
.orbital-card.is-spotlight {
  border-color: #F25A3A;
  box-shadow: 0 14px 34px -6px rgba(242, 90, 58, 0.22);
}

/* Stylized Drop-Cap Initial Badge */
.drop-cap-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #07205C;
  color: #FFFFFF;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 800;
  font-size: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(7, 32, 92, 0.2);
  flex-shrink: 0;
}

/* Checkmark Badge matching Live Site */
.check-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFF0EB;
  border: 1.5px solid #F25A3A;
  color: #F25A3A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Custom subtle scrollbar for long item lists */
.suite-items-list::-webkit-scrollbar {
  width: 4px;
}
.suite-items-list::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 4px;
}
.suite-items-list::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
.suite-items-list::-webkit-scrollbar-thumb:hover {
  background: #F25A3A;
}

/* === STYLE TAG 4 === */

/* =========================================================
   AAO 2026 COMPARISON SECTION
   The Saffron Solution
   Scoped + dependency-free
   ========================================================= */

.cmp-section{
  --cmp-ink:#142B3B;
  --cmp-accent:#F25A3A;
  --cmp-burnt:#AB421D;
  --cmp-peach:#F4B295;
  --cmp-wash:#FFF0E6;
  --cmp-paper:#FAF7F2;
  --cmp-white:#FFFFFF;
  --cmp-muted:#625F5B;
  --cmp-line:#E5DDD3;
  --cmp-soft:#F7F1EA;

  position:relative;
  overflow:hidden;
  background:#EEF3F4;
  padding:92px 0;
  color:var(--cmp-ink);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  border-top:1px solid var(--cmp-line);
  border-bottom:1px solid var(--cmp-line);
}

.cmp-section *,
.cmp-section *::before,
.cmp-section *::after{
  box-sizing:border-box;
}

.cmp-section::before{
  content:"";
  position:absolute;
  top:-260px;
  right:-180px;
  width:620px;
  height:620px;
  background:
    radial-gradient(
      circle,
      rgba(233,107,50,.10) 0%,
      rgba(244,178,149,.05) 38%,
      transparent 70%
    );
  pointer-events:none;
}

.cmp-section::after{
  content:"";
  position:absolute;
  left:-230px;
  bottom:-300px;
  width:560px;
  height:560px;
  background:
    radial-gradient(
      circle,
      rgba(244,178,149,.10) 0%,
      transparent 70%
    );
  pointer-events:none;
}

.cmp-wrap{
  position:relative;
  z-index:1;
  width:min(1280px,calc(100% - 72px));
  margin-inline:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.cmp-section-header{
  text-align:center;
  max-width:830px;
  margin:0 auto;
}

.cmp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:#F25A3A;
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
  margin-bottom:14px;
}

.cmp-eyebrow::before{
  content:"";
  width:24px;
  height:2px;
  border-radius:999px;
  background:#F25A3A;
  display:inline-block;
}

.cmp-title{
  font-size:clamp(34px,4.1vw,56px);
  font-weight:580;
  color:#FFFFFF!important;
  line-height:1.08;
  letter-spacing:-.045em;
  margin:0 0 18px;
}

.cmp-title-accent{
  display:inline-block;
  color:var(--cmp-burnt)!important;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-style:italic;
}

.cmp-subtitle{
  font-size:19px;
  color:#94A3B8!important;
  max-width:720px;
  margin:0 auto 34px;
  line-height:1.75;
}


/* =========================================================
   FILTER BUTTONS
   ========================================================= */

.cmp-toggle-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:30px;
  flex-wrap:wrap;
}

.cmp-toggle-btn{
  appearance:none;
  padding:10px 20px;
  min-height:44px;
  border:1px solid #DDD2C7;
  border-radius:40px;
  background:#FFFFFF;
  color:var(--cmp-muted);
  font:inherit;
  font-size:15px;
  font-weight:650;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  box-shadow:none;
  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

.cmp-toggle-btn:hover{
  background:var(--cmp-wash);
  color:var(--cmp-burnt);
  border-color:#E8BCA3;
  transform:translateY(-1px);
}

.cmp-toggle-btn.active{
  background:var(--cmp-accent);
  color:#FFFFFF;
  border-color:var(--cmp-accent);
  box-shadow:0 6px 20px rgba(233,107,50,.18);
}

.cmp-toggle-btn:focus-visible{
  outline:3px solid rgba(233,107,50,.28);
  outline-offset:3px;
}

.cmp-glyph{
  display:inline-grid;
  place-items:center;
  min-width:16px;
  line-height:1;
  font-style:normal;
  font-weight:800;
}


/* =========================================================
   SUMMARY STRIP (UNIFIED INFORMATIONAL BAR - NON-CLICKABLE)
   ========================================================= */

.cmp-summary-strip{
  display:flex;
  justify-content:center;
  margin-bottom:34px;
  width:100%;
}

.cmp-summary-bar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  background:rgba(255, 255, 255, 0.05);
  border:1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:9999px;
  padding:8px 22px;
  box-shadow:inset 0 1px 2px rgba(255, 255, 255, 0.06);
  cursor:default;
  user-select:none;
}

.cmp-summary-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#FDBA74;
  background:rgba(249, 115, 22, 0.15);
  border:1px solid rgba(249, 115, 22, 0.3);
  padding:3px 9px;
  border-radius:9999px;
}

.cmp-badge-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#F97316;
}

.cmp-strip-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  font-size:13px;
  font-weight:600;
  box-shadow:none!important;
  cursor:default!important;
  transform:none!important;
}

.cmp-strip-item:hover{
  transform:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

.cmp-strip-divider{
  width:1px;
  height:16px;
  background:rgba(255, 255, 255, 0.18);
  display:inline-block;
}

.cmp-strip-old{
  color:#94A3B8;
  font-size:13px;
  font-weight:500;
}

.cmp-strip-arrow{
  color:#FB923C;
  font-size:13px;
  font-weight:700;
}

.cmp-strip-new{
  color:#FFFFFF;
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.cmp-strip-new .cmp-glyph{
  color:#FDBA74;
  font-size:12px;
}

@media(max-width:768px){
  .cmp-summary-bar{
    border-radius:18px;
    padding:12px 16px;
    gap:10px;
    flex-direction:column;
    text-align:center;
  }
  .cmp-strip-divider{
    display:none;
  }
}


/* =========================================================
   TABLE
   ========================================================= */

.cmp-table-wrapper{
  overflow-x:auto;
  border-radius:16px;
  background:#FFFFFF;
  border:1px solid var(--cmp-line);
  padding:7px;
  -webkit-overflow-scrolling:touch;
  scrollbar-color:var(--cmp-accent) #F2EAE2;
  box-shadow:0 25px 60px -15px rgba(0,0,0,0.6);
  outline:none;
}

.cmp-table-wrapper:focus-visible{
  box-shadow:
    0 16px 40px rgba(67,47,34,.05),
    0 0 0 3px rgba(233,107,50,.23);
}

.cmp-header-row,
.cmp-row{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.25fr;
  min-width:820px;
  gap:6px;
}

.cmp-header-row{
  margin-bottom:6px;
}

.cmp-header-row .cmp-cell{
  padding:18px 14px;
  font-size:14px;
  font-weight:720;
  text-align:center;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.cmp-comp-head small{
  display:block;
  font-size:12px;
  font-weight:500;
  margin-top:4px;
  opacity:0.75;
}

/* =========================================================
   DISTINCT COLUMN BACKGROUNDS (COLUMNS 1 TO 5)
   ========================================================= */

/* --- COLUMN 1: Capability / Features --- */
.cmp-header-row .cmp-cell:nth-child(1),
.cmp-header-row .cmp-label-cell{
  background:#F8FAFC!important;
  border:1px solid #CBD5E1!important;
  color:#07205C!important;
  font-weight:750!important;
  align-items:flex-start;
  text-align:left;
}

.cmp-row .cmp-cell:nth-child(1),
.cmp-row .cmp-label-cell{
  background:#FFFFFF!important;
  border:1px solid #E2E8F0!important;
  color:#0F172A!important;
  font-weight:650!important;
  justify-content:flex-start;
  text-align:left;
  font-size:15px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}

/* --- COLUMN 2: VA Agencies (Outsourced Staffing - Slate Tint) --- */
.cmp-header-row .cmp-cell:nth-child(2){
  background:#F1F5F9!important;
  border:1px solid #CBD5E1!important;
  color:#334155!important;
}

.cmp-row .cmp-cell:nth-child(2){
  background:#F8FAFC!important;
  border:1px solid #E2E8F0!important;
  color:#475569!important;
}

/* --- COLUMN 3: Software Platforms (Tech Add-ons - Soft Ice-Blue Tint) --- */
.cmp-header-row .cmp-cell:nth-child(3){
  background:#E0F2FE!important;
  border:1px solid #BAE6FD!important;
  color:#0369A1!important;
}

.cmp-row .cmp-cell:nth-child(3){
  background:#F0F9FF!important;
  border:1px solid #E0F2FE!important;
  color:#334155!important;
}

/* --- COLUMN 4: PE-Backed MSOs (Corporate Rollups - Warm Amber/Sand Tint) --- */
.cmp-header-row .cmp-cell:nth-child(4){
  background:#FEF3C7!important;
  border:1px solid #FDE68A!important;
  color:#92400E!important;
}

.cmp-row .cmp-cell:nth-child(4){
  background:#FFFDF5!important;
  border:1px solid #FEF3C7!important;
  color:#78350F!important;
}

/* --- COLUMN 5: The Saffron Solution (THE HERO STANDOUT TRACK) --- */
.cmp-tss-head,
.cmp-header-row .cmp-cell:nth-child(5){
  background:linear-gradient(180deg, #FFEDD5 0%, #FED7AA 100%)!important;
  border:2px solid #F97316!important;
  color:#9A3412!important;
  box-shadow:0 4px 18px rgba(249,115,22,.22)!important;
  font-weight:800!important;
  display:flex!important;
  flex-direction:row!important;
  gap:7px;
  position:relative;
  z-index:2;
}

.cmp-tss-cell,
.cmp-row .cmp-cell:nth-child(5){
  background:#FFF7ED!important;
  border:2px solid #FB923C!important;
  color:#1E293B!important;
  box-shadow:0 0 16px rgba(249,115,22,.09)!important;
  position:relative;
  z-index:2;
}

/* Highlight chips in Saffron column */
.cmp-tss-cell .cmp-chip{
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

/* Row Hover Dynamics */
.cmp-row:hover .cmp-cell:nth-child(1){
  background:#F8FAFC!important;
}
.cmp-row:hover .cmp-cell:nth-child(2){
  background:#F1F5F9!important;
}
.cmp-row:hover .cmp-cell:nth-child(3){
  background:#E0F2FE!important;
}
.cmp-row:hover .cmp-cell:nth-child(4){
  background:#FEF3C7!important;
}
.cmp-row:hover .cmp-tss-cell,
.cmp-row:hover .cmp-cell:nth-child(5){
  background:#FFEDD5!important;
  border-color:#EA580C!important;
  box-shadow:0 4px 20px rgba(234,88,12,.18)!important;
  transform:scale(1.015);
}

/* =========================================================
   GROUPS
   ========================================================= */

.cmp-group-section{
  display:none;
}

.cmp-group-section.active{
  display:block;
  animation:cmpFade .28s ease both;
}

@keyframes cmpFade{
  from{
    opacity:.25;
    transform:translateY(7px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.cmp-group-label{
  font-size:13px;
  font-weight:740;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#837A72;
  padding:20px 17px 9px;
  display:flex;
  align-items:center;
  gap:8px;
}

.cmp-group-label .cmp-glyph{
  color:var(--cmp-accent);
}

/* =========================================================
   ROWS
   ========================================================= */

.cmp-row{
  margin-bottom:6px;
  border-radius:10px;
  background:transparent!important;
}

.cmp-row-highlight{
  background:transparent!important;
}

.cmp-row .cmp-cell{
  padding:16px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  border-radius:10px;
  text-align:center;
  transition:all .2s ease;
}

.cmp-row-icon{
  color:var(--cmp-accent);
  margin-right:9px;
  flex:none;
}


/* =========================================================
   STATUS CHIPS
   ========================================================= */

.cmp-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border-radius:20px;
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.chip-green{
  background:#EDF8F1;
  color:#34704A;
  border:1px solid #CDE5D5;
}

.chip-yellow{
  background:#FFF7DE;
  color:#8B6814;
  border:1px solid #ECDEAD;
}

.chip-red{
  background:#FFF0EC;
  color:#A54B39;
  border:1px solid #F0CEC6;
}

.chip-tss{
  background:linear-gradient(
    135deg,
    #FFE8D8,
    #FFF3EB
  );
  color:var(--cmp-burnt);
  border:1px solid #EFC2A6;
  font-weight:700;
}

.cmp-row:hover .cmp-tss-cell .cmp-chip{
  transform:scale(1.025);
}


/* =========================================================
   BOTTOM CTA (WITH -10PX HOVER LIFT)
   ========================================================= */

.cmp-takeaway{
  text-align:center;
  margin-top:42px;
  padding:34px 24px;
  background:
    linear-gradient(
      135deg,
      #FFF2E8 0%,
      #FFF9F4 100%
    );
  border:1px solid #EBCDBA;
  border-radius:14px;
  transition:transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s ease, border-color .3s ease;
}

.cmp-takeaway:hover{
  transform:translateY(-10px)!important;
  box-shadow:0 24px 48px -10px rgba(171,66,29,.16)!important;
  border-color:var(--cmp-accent)!important;
}

.cmp-takeaway p{
  font-size:19px;
  color:var(--cmp-muted);
  margin:0 0 20px;
  line-height:1.65;
}

.cmp-takeaway strong{
  color:var(--cmp-ink);
}

.cmp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--cmp-burnt);
  color:#FFFFFF!important;
  font-weight:720;
  font-size:16px;
  min-height:50px;
  border:0;
  border-radius:7px;
  padding:13px 24px;
  box-shadow:0 7px 22px rgba(171,66,29,.18);
  position:relative;
  overflow:hidden;
  text-decoration:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.cmp-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 11px 28px rgba(171,66,29,.24);
  background:#8B3518;
  color:#FFFFFF!important;
}

.cmp-btn:focus-visible{
  outline:3px solid rgba(233,107,50,.30);
  outline-offset:4px;
}

.cmp-btn-shimmer::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,.18) 50%,
    transparent 70%
  );
  transform:translateX(-100%);
}

.cmp-btn-shimmer:hover::after{
  animation:cmpShimmer .6s ease forwards;
}

@keyframes cmpShimmer{
  to{
    transform:translateX(100%);
  }
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.cmp-disclaimer{
  text-align:center;
  font-size:13px;
  color:#8A827A;
  margin:22px auto 0;
  line-height:1.6;
  font-style:italic;
  max-width:860px;
}



/* =========================================================
   MOBILE HORIZONTAL SCROLL CUE
   ========================================================= */

.cmp-table-shell{
  position:relative;
}

.cmp-mobile-scroll-cue{
  display:none;
}

@media(max-width:620px){

  .cmp-table-shell{
    position:relative;
    margin-inline:-4px;
  }

  .cmp-table-wrapper{
    margin-inline:0;
  }

  .cmp-mobile-scroll-cue{
    position:absolute;

    top:50%;
    right:8px;

    z-index:20;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:5px;

    min-width:48px;
    min-height:48px;

    padding:0 11px;

    border:1px solid rgba(233,107,50,.28);
    border-radius:999px;

    background:
      rgba(255,255,255,.96);

    color:var(--cmp-burnt);

    box-shadow:
      0 8px 24px rgba(20,43,59,.14);

    transform:
      translateY(-50%);

    cursor:pointer;

    font:inherit;

    -webkit-tap-highlight-color:transparent;

    transition:
      opacity .22s ease,
      transform .22s ease,
      visibility .22s ease;
  }

  .cmp-mobile-scroll-cue::before{
    content:"Swipe";

    font-size:10px;
    line-height:1;
    font-weight:800;

    letter-spacing:.07em;
    text-transform:uppercase;
  }

  .cmp-mobile-scroll-cue svg{
    width:17px;
    height:17px;

    flex:none;

    fill:none;

    stroke:currentColor;
    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;

    animation:
      cmpSwipeArrow 1.25s ease-in-out infinite;
  }

  .cmp-mobile-scroll-cue.is-hidden{
    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
      translateY(-50%)
      translateX(8px);
  }

  .cmp-table-shell::after{
    content:"";

    position:absolute;

    top:0;
    right:0;
    bottom:0;

    width:62px;

    z-index:10;

    pointer-events:none;

    background:
      linear-gradient(
        90deg,
        rgba(238,243,244,0) 0%,
        rgba(238,243,244,.62) 72%,
        rgba(238,243,244,.88) 100%
      );

    border-radius:
      0 16px 16px 0;

    transition:
      opacity .22s ease;
  }

  .cmp-table-shell.is-at-end::after{
    opacity:0;
  }

}

@keyframes cmpSwipeArrow{

  0%,
  100%{
    transform:translateX(0);
  }

  50%{
    transform:translateX(4px);
  }

}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:940px){

  .cmp-section{
    padding:72px 0;
  }

  .cmp-wrap{
    width:calc(100% - 56px);
  }

  .cmp-subtitle{
    font-size:18px;
  }
}

@media(max-width:620px){

  .cmp-section{
    padding:58px 0;
  }

  .cmp-wrap{
    width:calc(100% - 36px);
  }

  .cmp-title{
    font-size:34px;
  }

  .cmp-subtitle{
    font-size:17px;
    margin-bottom:27px;
  }

  .cmp-toggle-nav{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }

  .cmp-toggle-btn{
    flex:none;
  }

  .cmp-summary-strip{
    flex-direction:column;
    align-items:stretch;
    margin-bottom:28px;
  }

  .cmp-strip-item{
    justify-content:center;
  }

  .cmp-table-wrapper{
    margin-inline:-4px;
  }

  .cmp-takeaway{
    padding:25px 16px;
  }

  .cmp-takeaway p{
    font-size:17px;
  }

  .cmp-btn{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){

  .cmp-section *,
  .cmp-section *::before,
  .cmp-section *::after{
    animation:none!important;
    transition:none!important;
  }
}


/* =========================================================
   CRITICAL OVERRIDES & FIXES FOR ELEMENTOR RENDER
   ========================================================= */

/* 1. RESET HELLO ELEMENTOR BUTTON BORDERS & OUTLINES */
[type=button], [type=submit], button {
  border-color: transparent;
}

/* 2. ARROW SECTION (Clean 3-Part Visual Relationship Strip in #integration) */
.s26-workflow-strip {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 56rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: auto !important;
  background: #FFFFFF !important;
  border: 1px solid #DED9D0 !important;
  border-radius: 1rem !important;
  padding: 1rem 1.25rem !important;
  gap: 0.75rem !important;
}
.s26-workflow-strip > div {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.s26-workflow-strip .s26-arrow-divider {
  display: flex !important;
  align-items: center !important;
  color: #F25A3A !important;
  gap: 0.375rem !important;
  padding: 0 0.25rem !important;
  flex-shrink: 0 !important;
}

/* 3. CORE SOLUTIONS NAVIGATION (Sidebar Button Chevron in Single Line) */
.tss-nav-btn {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.tss-nav-btn-left {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.tss-nav-num {
  flex-shrink: 0 !important;
}
.tss-nav-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.tss-nav-chevron {
  flex-shrink: 0 !important;
  margin-left: 8px !important;
}

/* 4. EHR LOGO BOXES (Clean Rounded Corners & Natural Borders, No Red/Magenta Outline) */
.s26-ehr-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}
@media (min-width: 640px) {
  .s26-ehr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .s26-ehr-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
.s26-ehr-logo {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid #DED9D0 !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  padding: 1.5rem 1rem 1.25rem !important;
  min-height: 152px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: 0 1px 3px rgba(45, 41, 38, 0.04) !important;
  outline: none !important;
  width: 100% !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
}
.s26-ehr-logo:hover {
  transform: translateY(-3px) !important;
  border-color: #F25A3A !important;
  box-shadow: 0 10px 24px -4px rgba(242, 90, 58, 0.15), 0 4px 8px -2px rgba(45, 41, 38, 0.03) !important;
}
.s26-ehr-logo[aria-pressed="true"],
.s26-ehr-logo.is-selected {
  border-color: #F25A3A !important;
  background: #FFFDF9 !important;
  box-shadow: 0 0 0 1.5px #F25A3A, 0 8px 22px -4px rgba(242, 90, 58, 0.16) !important;
}
.s26-ehr-logo[aria-pressed="true"] strong,
.s26-ehr-logo.is-selected strong {
  color: #C04300 !important;
}
.s26-ehr-logo.s26-ehr-other {
  border: 1.5px dashed #DED9D0 !important;
  background: #FAF8F5 !important;
}
.s26-ehr-logo.s26-ehr-other:hover {
  border-color: #F25A3A !important;
  background: #FFF9F5 !important;
  border-style: solid !important;
}

/* 5. THE DIFFERENCE (Filter Buttons Pill Shape with White Background) */
.cmp-toggle-nav {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 2rem !important;
}
.cmp-toggle-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 10px 24px !important;
  min-height: 44px !important;
  border: 1px solid #DDD2C7 !important;
  border-radius: 9999px !important; /* True pill shape */
  background: #FFFFFF !important; /* Pure white background */
  color: #4A4641 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.22s ease !important;
}
.cmp-toggle-btn:hover {
  background: #FFF7ED !important;
  color: #C04300 !important;
  border-color: #F25A3A !important;
  transform: translateY(-1px) !important;
}
.cmp-toggle-btn.active,
.cmp-toggle-btn[aria-pressed="true"] {
  background: #F25A3A !important;
  color: #FFFFFF !important;
  border-color: #F25A3A !important;
  box-shadow: 0 6px 20px rgba(242, 90, 58, 0.28) !important;
}

/* 6. CONFERENCES SECTION (Clean Card Layout, Exact Reference Match) */
#conferences {
  background-color: #FFFFFF !important;
}
#conferences h2 {
  font-family: 'Cinzel', Georgia, serif !important;
}
#conferences .text-gold-gradient {
  background: linear-gradient(135deg, #07205C 0%, #D97706 45%, #F25A3A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}
#conferenceFeatureCard {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
#conferenceFeatureCard:hover {
  border-color: #F25A3A !important;
  box-shadow: 0 8px 30px rgba(242, 90, 58, 0.12) !important;
}
#conferences .grid > div {
  transform: none !important; /* Prevent column breakdown on hover */
}
#conferenceFeatureCard .lg\:col-span-5 {
  position: relative !important;
  min-height: 380px !important;
  width: 100% !important;
  background-color: #F8F9FA !important;
}
@media (min-width: 1024px) {
  #conferenceFeatureCard .lg\:col-span-5 {
    height: 100% !important;
  }
}
#conferenceBannerImg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}
#conferenceFeatureCard:hover #conferenceBannerImg {
  transform: scale(1.04) !important;
}
#conferenceFeatureCard h3 {
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  color: #07205C !important;
  line-height: 1.25 !important;
}
#conferenceFeatureCard p {
  color: #4B5563 !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
}
#conferenceFeatureCard .text-neutral-700 {
  color: #374151 !important;
}
#conferenceFeatureCard button {
  background: linear-gradient(135deg, #F25A3A 0%, #D97706 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.85rem 2.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 18px 0 rgba(242, 90, 58, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}
#conferenceFeatureCard button:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px 0 rgba(242, 90, 58, 0.5) !important;
}

/* 7. BLOG BUTTON STYLING & HOVER */
.blog-card a.inline-flex,
.blog-card .group\/btn,
#blog .blog-card a[href*="thesaffronsolution.com/blogs/"],
#blog .blog-card a.bg-\[\#F25A3A\],
#blog a.group\/btn {
  /* background-color: #F25A3A !important; */
    /* color: #FFFFFF !important; */
    /* border: none !important; */
    /* border-radius: 12px !important; */
    /* padding: 10px 20px !important; */
    /* display: inline-flex !important; */
    /* align-items: center !important; */
    /* justify-content: center !important; */
    /* gap: 8px !important; */
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    /* letter-spacing: 0.05em !important; */
    /* box-shadow: 0 2px 6px rgba(242, 90, 58, 0.2) !important; */
    /* transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.blog-card a.inline-flex:hover,
.blog-card .group\/btn:hover,
#blog .blog-card a[href*="thesaffronsolution.com/blogs/"]:hover,
#blog .blog-card a.bg-\[\#F25A3A\]:hover,
#blog a.group\/btn:hover {
  background-color: #07205C !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(7, 32, 92, 0.28) !important;
}
.blog-card a.inline-flex:hover i,
.blog-card .group\/btn:hover i,
#blog a.group\/btn:hover i {
  transform: translateX(4px) !important;
}

/* 8. SPECIALIZED APPLICATIONS CARDS */
.opt1-card {
  will-change: transform, opacity;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.opt1-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -8px rgba(242, 90, 58, 0.25) !important;
  border-color: #F25A3A !important;
}
.opt1-card.is-active {
  border-color: #F25A3A !important;
  box-shadow: 0 12px 30px -6px rgba(242, 90, 58, 0.25) !important;
}
.opt1-card.is-active .border-slate-200\/90 {
  border-color: rgba(242, 90, 58, 0.4) !important;
}

/* 9. PLATFORM / ONE PLATFORM TO POWER IT ALL */
.orbital-card {
  will-change: transform, opacity;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.orbital-card:hover {
  border-color: #F25A3A !important;
  box-shadow: 0 16px 36px -8px rgba(242, 90, 58, 0.22) !important;
}
.orbital-card.is-spotlight {
  border-color: #F25A3A !important;
  box-shadow: 0 14px 34px -6px rgba(242, 90, 58, 0.22) !important;
}

/* =========================================================
   HOMEPAGE APPLICATION / PLATFORM SCROLL STABILITY
   ScrollTrigger pins the stage wrappers on desktop and reserves
   their scroll space with pinSpacing. Keep normal-flow defaults
   here so GSAP can apply its temporary pin styles safely.
   ========================================================= */
#patient-journey #specAppsStageWrapper,
#platform #row1StageWrapper,
#platform #row2StageWrapper {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Do not force target cards visible here: GSAP owns their initial hidden state
   and reveals them as ScrollTrigger progress advances. */