/* Local Fonts */
      @font-face {
        font-family: 'TT Firs Neue';
        src: url('fonts/TTFirsNeueSS01-Bold.otf') format('opentype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: 'Inter';
        src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
      }

      :root {
        /* Paradigm Brand Colors */
        --teal-accent: #12ead2;
        --teal-accent-dark: #0bc4b0;
        --teal-accent-light: rgba(18, 234, 210, 0.1);

        --blue-primary: #003598;
        --blue-heading: #0f2678;
        --blue-dark: #000e41;

        /* WCAG AA compliant text colors (4.5:1+ contrast ratio) */
        --text-body: #3d4d7a;
        --text-muted: #5c6a9a;
        --teal-text: #0a7a6d; /* Darker teal for text labels */

        /* Neutral Backgrounds */
        --bg-white: #ffffff;
        --bg-light: #f4f8ff;
        --bg-gray: #f0f4fa;
        --bg-gray-medium: #dbe3f0;
        --border-color: #c0ccde;

        /* Status Colors */
        --success-green: #10b981;
        --success-green-bg: rgba(16, 185, 129, 0.1);
        --warning-amber: #f59e0b;
        --warning-amber-bg: rgba(245, 158, 11, 0.1);
        --action-red: #ef4444;
        --action-red-bg: rgba(239, 68, 68, 0.1);
        --processing-blue: #3b82f6;
        --processing-blue-bg: rgba(59, 130, 246, 0.1);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family:
          'Inter',
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          sans-serif;
        background: var(--bg-white);
        color: var(--text-body);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }

      /* Navigation */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 1rem 3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(192, 204, 222, 0.5);
        transition: all 0.3s ease;
      }

      nav.scrolled {
        padding: 0.75rem 3rem;
        box-shadow: 0 4px 20px rgba(0, 14, 65, 0.08);
      }

      /* Scroll Progress Indicator */
      .scroll-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--teal-accent) 0%, var(--blue-primary) 100%);
        width: 0%;
        transition: width 0.1s linear;
      }

      .logo {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
      }

      .logo-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-heading) 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-shadow:
          0 2px 8px rgba(0, 14, 65, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
      }

      .logo:hover .logo-icon {
        box-shadow:
          0 4px 14px rgba(0, 53, 152, 0.28),
          0 0 0 1px rgba(18, 234, 210, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
      }

      .logo-icon svg {
        width: 75%;
        height: 75%;
        position: relative;
        z-index: 1;
      }

      /* Option K: Focus → Lens Animation - Header Logo */
      .logo-icon .focus-then-collapse {
        filter: blur(6px);
        animation: focusThenStay 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
      }
      .logo-icon .fc-dot {
        transform-origin: 256px 256px;
      }
      .logo-icon .fc-top {
        animation: fcCollapseTop 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
      }
      .logo-icon .fc-bottom {
        animation: fcCollapseBottom 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
      }
      .logo-icon .fc-left {
        animation: fcCollapseLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
      }
      .logo-icon .fc-right {
        animation: fcCollapseRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
      }
      .logo-icon .fc-center {
        opacity: 0;
        transform-origin: 256px 256px;
        animation: fcCenterGrow 0.4s cubic-bezier(0.34, 1.3, 0.64, 1) 1.7s forwards;
      }
      .logo-icon .fc-ring-outer {
        fill: none;
        stroke: white;
        stroke-width: 14;
        opacity: 0;
        transform-origin: 256px 256px;
        animation: fcRingExpand 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) 1.8s forwards;
      }
      .logo-icon .fc-ring-inner {
        fill: none;
        stroke: white;
        stroke-width: 10;
        opacity: 0;
        transform-origin: 256px 256px;
        animation: fcRingExpandInner 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) 1.85s forwards;
      }

      @keyframes focusThenStay {
        0% { filter: blur(6px); }
        100% { filter: blur(0); }
      }
      @keyframes fcCollapseTop {
        0% { transform: translateY(0); opacity: 1; }
        100% { transform: translateY(145.1px); opacity: 0; }
      }
      @keyframes fcCollapseBottom {
        0% { transform: translateY(0); opacity: 1; }
        100% { transform: translateY(-145.1px); opacity: 0; }
      }
      @keyframes fcCollapseLeft {
        0% { transform: translateX(0); opacity: 1; }
        100% { transform: translateX(145.1px); opacity: 0; }
      }
      @keyframes fcCollapseRight {
        0% { transform: translateX(0); opacity: 1; }
        100% { transform: translateX(-145.1px); opacity: 0; }
      }
      @keyframes fcCenterGrow {
        0% { opacity: 0; transform: scale(0.5); }
        100% { opacity: 1; transform: scale(1); }
      }
      @keyframes fcRingExpand {
        0% { opacity: 0; transform: scale(0.6); }
        100% { opacity: 0.7; transform: scale(1); }
      }
      @keyframes fcRingExpandInner {
        0% { opacity: 0; transform: scale(0.6); }
        100% { opacity: 0.5; transform: scale(1); }
      }

      .logo-text {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--blue-heading);
        letter-spacing: -0.02em;
      }

      .logo-text span {
        color: var(--text-muted);
        font-weight: 500;
        font-size: 0.875rem;
        margin-left: 0.5rem;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 0.25rem;
      }

      .nav-link {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-body);
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.2s ease;
        position: relative;
      }

      .nav-link:hover {
        color: var(--blue-heading);
        background: var(--bg-gray);
      }

      .nav-link.active {
        color: var(--blue-primary);
        background: var(--bg-light);
      }

      .nav-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.15rem 0.4rem;
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: 4px;
        margin-left: 0.35rem;
        vertical-align: middle;
      }

      /* Features Dropdown */
      .nav-dropdown {
        position: relative;
      }

      .nav-dropdown-trigger {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-body);
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.2s ease;
        cursor: pointer;
        background: transparent;
        border: none;
        font-family: inherit;
      }

      .nav-dropdown-trigger:hover,
      .nav-dropdown.open .nav-dropdown-trigger {
        color: var(--blue-heading);
        background: var(--bg-gray);
      }

      .nav-dropdown-trigger svg {
        width: 12px;
        height: 12px;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .nav-dropdown.open .nav-dropdown-trigger svg {
        transform: rotate(180deg);
      }

      .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        min-width: 420px;
        background: white;
        border-radius: 16px;
        box-shadow:
          0 25px 50px -12px rgba(0, 14, 65, 0.15),
          0 0 0 1px rgba(192, 204, 222, 0.3);
        padding: 1.25rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 200;
      }

      .nav-dropdown.open .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
      }

      .nav-dropdown-section {
        margin-bottom: 1rem;
      }

      .nav-dropdown-section:last-child {
        margin-bottom: 0;
      }

      .nav-dropdown-section-label {
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        padding: 0 0.75rem 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .nav-dropdown-section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--bg-gray-medium);
      }

      .nav-dropdown-section.coming-soon .nav-dropdown-section-label {
        color: #6366f1;
      }

      .nav-dropdown-items {
        display: grid;
        gap: 0.25rem;
      }

      .nav-dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 0.75rem;
        border-radius: 10px;
        text-decoration: none;
        color: var(--text-body);
        transition: all 0.15s ease;
      }

      .nav-dropdown-item:hover {
        background: var(--bg-light);
        color: var(--blue-heading);
      }

      .nav-dropdown-item:hover .nav-dropdown-item-icon {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 53, 152, 0.15);
      }

      .nav-dropdown-item-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s ease;
      }

      .nav-dropdown-item-icon svg {
        width: 18px;
        height: 18px;
      }

      .nav-dropdown-item-icon.receivables {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        color: #15803d;
      }

      .nav-dropdown-item-icon.authorizations {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #b45309;
      }

      .nav-dropdown-item-icon.bill-to-paradigm {
        background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
        color: #4338ca;
      }

      .nav-dropdown-item-icon.action-center {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #dc2626;
      }

      .nav-dropdown-item-icon.eligibility {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #047857;
      }

      .nav-dropdown-item-icon.support {
        background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
        color: #4338ca;
      }

      .nav-dropdown-item-content {
        flex: 1;
        min-width: 0;
      }

      .nav-dropdown-item-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--blue-heading);
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .nav-dropdown-item:hover .nav-dropdown-item-title {
        color: var(--blue-primary);
      }

      .nav-dropdown-item-desc {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.125rem;
        line-height: 1.4;
      }

      .nav-dropdown-item .nav-badge {
        margin-left: 0;
      }

      /* Help dropdown */
      .nav-dropdown-menu.compact {
        min-width: 200px;
        padding: 0.5rem;
      }

      .nav-dropdown-menu.compact .nav-dropdown-item {
        padding: 0.625rem 0.75rem;
      }

      .nav-dropdown-menu.compact .nav-dropdown-item-icon {
        width: 28px;
        height: 28px;
      }

      .nav-dropdown-menu.compact .nav-dropdown-item-icon svg {
        width: 14px;
        height: 14px;
      }

      .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--teal-accent);
        border-radius: 50%;
      }

      .nav-cta {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: white;
        background: var(--blue-primary);
        text-decoration: none;
        border-radius: 10px;
        transition: all 0.2s ease;
        margin-left: 1rem;
        border: none;
        cursor: pointer;
        font-family: inherit;
      }

      .nav-cta:hover {
        background: var(--blue-heading);
        transform: translateY(-1px);
      }

      .nav-cta:focus-visible {
        outline: 3px solid var(--teal-accent);
        outline-offset: 2px;
      }

      /* Hero Section */
      .hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 8rem 2rem 5rem;
        background: var(--bg-white);
        position: relative;
        overflow: hidden;
      }

      /* Animated gradient orbs */
      .hero::before {
        content: '';
        position: absolute;
        top: -20%;
        right: -10%;
        width: 70%;
        height: 70%;
        background: radial-gradient(
          ellipse at center,
          rgba(18, 234, 210, 0.15) 0%,
          rgba(0, 53, 152, 0.08) 40%,
          transparent 70%
        );
        pointer-events: none;
        animation: float-slow 20s ease-in-out infinite;
        filter: blur(40px);
      }

      .hero::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -15%;
        width: 60%;
        height: 70%;
        background: radial-gradient(
          ellipse at center,
          rgba(0, 53, 152, 0.12) 0%,
          rgba(18, 234, 210, 0.08) 50%,
          transparent 70%
        );
        pointer-events: none;
        animation: float-slow 25s ease-in-out infinite reverse;
        filter: blur(60px);
      }

      @keyframes float-slow {
        0%, 100% {
          transform: translate(0, 0) scale(1);
        }
        33% {
          transform: translate(30px, -20px) scale(1.05);
        }
        66% {
          transform: translate(-20px, 20px) scale(0.95);
        }
      }

      /* Subtle grid pattern overlay */
      .hero-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(0, 53, 152, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 53, 152, 0.03) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
        mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
        -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
      }

      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.5rem 1rem 0.5rem 0.5rem;
        background: var(--bg-white);
        border: 1px solid var(--border-color);
        border-radius: 100px;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-body);
        margin-bottom: 2.5rem;
        box-shadow: 0 2px 12px rgba(0, 14, 65, 0.06);
        position: relative;
        z-index: 1;
      }

      .hero-badge-icon {
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, var(--teal-accent) 0%, var(--teal-accent-dark) 100%);
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .hero-badge-icon svg {
        width: 14px;
        height: 14px;
        fill: var(--blue-dark);
      }

      .hero-title {
        font-family: 'TT Firs Neue', 'Inter', sans-serif;
        font-size: clamp(2.5rem, 5vw, 3.25rem);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.04em;
        max-width: 800px;
        margin-bottom: 2rem;
        color: var(--blue-heading);
        position: relative;
        z-index: 1;
      }

      .hero-title .highlight {
        position: relative;
        display: inline-block;
      }

      .hero-title .highlight::after {
        content: '';
        position: absolute;
        bottom: 0.1em;
        left: 0;
        right: 0;
        height: 0.3em;
        background: var(--teal-accent);
        opacity: 0.3;
        z-index: -1;
        border-radius: 4px;
      }

      .hero-subtitle {
        font-size: 1.1875rem;
        color: var(--text-body);
        max-width: 580px;
        margin-bottom: 3rem;
        line-height: 1.7;
        letter-spacing: -0.01em;
        position: relative;
        z-index: 1;
      }

      .hero-cta {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        z-index: 1;
      }

      /* Platform Support Indicator */
      .platform-support {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 2rem;
        font-size: 0.8125rem;
        color: var(--text-muted);
        position: relative;
        z-index: 1;
      }

      .platform-support-label {
        opacity: 0.7;
      }

      .platform-logo {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.625rem;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid var(--border-color);
        border-radius: 6px;
      }

      .platform-logo img {
        height: 20px;
        width: auto;
      }

      .platform-more {
        font-size: 0.75rem;
        color: var(--text-muted);
        opacity: 0.6;
        font-style: italic;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.875rem 1.75rem;
        font-size: 0.9375rem;
        font-weight: 600;
        border-radius: 12px;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        border: none;
        font-family: inherit;
        position: relative;
        overflow: hidden;
      }

      .btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.2) 0%,
          transparent 50%
        );
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .btn:hover::before {
        opacity: 1;
      }

      .btn-primary {
        background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-heading) 100%);
        color: white;
        box-shadow:
          0 4px 14px rgba(0, 53, 152, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
      }

      .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow:
          0 8px 25px rgba(0, 53, 152, 0.35),
          0 0 0 1px rgba(18, 234, 210, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .btn-primary:active {
        transform: translateY(-1px);
      }

      .btn-secondary {
        background: var(--bg-white);
        color: var(--blue-heading);
        border: 1.5px solid var(--border-color);
      }

      .btn-secondary:hover {
        background: var(--bg-gray);
        border-color: var(--blue-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 14, 65, 0.1);
      }

      /* Teal accent button */
      .btn-accent {
        background: linear-gradient(135deg, var(--teal-accent) 0%, var(--teal-accent-dark) 100%);
        color: var(--blue-dark);
        box-shadow: 0 4px 14px rgba(18, 234, 210, 0.3);
      }

      .btn-accent:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(18, 234, 210, 0.4);
      }

      /* User Personas Section */
      .personas {
        padding: 6rem 2rem;
        background: var(--bg-gray);
      }

      .section-header {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 3.5rem;
      }

      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--teal-text);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 1rem;
        padding: 0.375rem 0.875rem;
        background: linear-gradient(135deg, rgba(18, 234, 210, 0.12) 0%, rgba(0, 53, 152, 0.08) 100%);
        border-radius: 100px;
        border: 1px solid rgba(18, 234, 210, 0.2);
      }

      .section-title {
        font-family: 'TT Firs Neue', 'Inter', sans-serif;
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--blue-heading);
        margin-bottom: 1rem;
      }

      .section-description {
        font-size: 1rem;
        color: var(--text-body);
        line-height: 1.7;
      }

      .personas-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
        max-width: 1200px;
        margin: 0 auto;
      }

      .persona-card {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(192, 204, 222, 0.5);
        border-radius: 20px;
        padding: 2rem;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }

      .persona-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--teal-accent) 0%, var(--blue-primary) 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .persona-card::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(
          circle at center,
          rgba(18, 234, 210, 0.08) 0%,
          transparent 50%
        );
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
      }

      .persona-card:hover {
        border-color: rgba(18, 234, 210, 0.5);
        box-shadow:
          0 20px 40px rgba(0, 14, 65, 0.12),
          0 0 0 1px rgba(18, 234, 210, 0.1);
        transform: translateY(-6px);
      }

      .persona-card:hover::before {
        opacity: 1;
      }

      .persona-card:hover::after {
        opacity: 1;
      }

      .persona-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
      }

      .persona-icon svg {
        flex-shrink: 0;
      }

      .persona-icon.biller {
        background: var(--success-green-bg);
        color: var(--success-green);
      }

      .persona-icon.manager {
        background: var(--processing-blue-bg);
        color: var(--processing-blue);
      }

      .persona-icon.admin {
        background: var(--warning-amber-bg);
        color: var(--warning-amber);
      }

      .persona-title {
        font-family: 'TT Firs Neue', 'Inter', sans-serif;
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--blue-heading);
        margin-bottom: 0.625rem;
      }

      .persona-description {
        font-size: 0.9375rem;
        color: var(--text-body);
        line-height: 1.6;
        margin-bottom: 1.5rem;
      }

      .persona-benefits {
        list-style: none;
      }

      .persona-benefits li {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        font-size: 0.875rem;
        color: var(--text-body);
        margin-bottom: 0.75rem;
        line-height: 1.5;
      }

      .persona-benefits li::before {
        content: '';
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        background: var(--teal-accent);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
          center/contain no-repeat;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
          center/contain no-repeat;
        margin-top: 0.125rem;
      }

      /* Features Section */
      .features {
        padding: 6rem 0;
        background: linear-gradient(
          180deg,
          var(--bg-gray) 0%,
          var(--bg-white) 5%,
          var(--bg-white) 95%,
          var(--bg-gray) 100%
        );
      }

      .feature {
        padding: 5rem 2rem;
        max-width: 1400px;
        margin: 0 auto;
      }

      .feature:not(:last-child) {
        border-bottom: 1px solid var(--bg-gray-medium);
      }

      .feature-inner {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 5rem;
        align-items: center;
      }

      .feature:nth-child(even) .feature-inner {
        direction: rtl;
      }

      .feature:nth-child(even) .feature-inner > * {
        direction: ltr;
      }

      .feature-content {
        max-width: 480px;
      }

      .feature-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--teal-accent) 0%, var(--teal-accent-dark) 100%);
        color: var(--blue-dark);
        font-size: 0.9375rem;
        font-weight: 700;
        border-radius: 10px;
        margin-bottom: 1.5rem;
        box-shadow: 0 4px 12px rgba(18, 234, 210, 0.3);
        position: relative;
      }

      .feature-number::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
      }

      .feature-title {
        font-family: 'TT Firs Neue', 'Inter', sans-serif;
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--blue-heading);
        margin-bottom: 1rem;
        line-height: 1.25;
      }

      .coming-soon-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.3rem 0.75rem;
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        border-radius: 4px;
        margin-left: 0.75rem;
        vertical-align: middle;
        border: 1px solid rgba(99, 102, 241, 0.25);
        position: relative;
        overflow: hidden;
      }

      .coming-soon-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(99, 102, 241, 0.2) 50%,
          transparent 100%
        );
        animation: badge-shimmer 4s ease-in-out infinite;
      }

      @keyframes badge-shimmer {
        0% {
          left: -100%;
        }
        50%, 100% {
          left: 100%;
        }
      }

      .feature-description {
        font-size: 1rem;
        color: var(--text-body);
        margin-bottom: 1.75rem;
        line-height: 1.7;
      }

      .feature-bullets {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
      }

      .feature-bullets li {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        font-size: 0.9375rem;
        color: var(--text-body);
        line-height: 1.6;
        opacity: 0;
        transform: translateX(-10px);
        animation: bullet-slide-in 0.5s ease forwards;
      }

      .feature-bullets li:nth-child(1) { animation-delay: 0.1s; }
      .feature-bullets li:nth-child(2) { animation-delay: 0.2s; }
      .feature-bullets li:nth-child(3) { animation-delay: 0.3s; }
      .feature-bullets li:nth-child(4) { animation-delay: 0.4s; }
      .feature-bullets li:nth-child(5) { animation-delay: 0.5s; }

      @keyframes bullet-slide-in {
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .feature-bullets li::before {
        content: '';
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        background: var(--teal-accent);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
          center/contain no-repeat;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
          center/contain no-repeat;
        margin-top: 2px;
      }

      .feature-bullets li .bullet-content {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .feature-bullets li strong {
        color: var(--blue-heading);
        display: block;
        font-size: 0.9375rem;
      }

      .feature-bullets li span {
        color: var(--text-body);
        font-size: 0.875rem;
      }

      .feature-demo {
        position: relative;
        border-radius: 20px;
        /* overflow: hidden; REMOVED to allow tooltips to escape */
        background: var(--bg-white);
        border: 1px solid rgba(192, 204, 222, 0.6);
        box-shadow:
          0 8px 40px rgba(0, 14, 65, 0.08),
          0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .feature-demo:hover {
        box-shadow:
          0 20px 60px rgba(0, 14, 65, 0.12),
          0 0 0 1px rgba(18, 234, 210, 0.15),
          0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        transform: translateY(-4px);
      }

      .demo-browser-bar {
        display: flex;
        border-radius: 20px 20px 0 0; /* Apply rounded corners here */
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        background: var(--bg-gray);
        border-bottom: 1px solid var(--border-color);
      }

      .browser-dots {
        display: flex;
        gap: 8px;
      }

      .browser-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
      }

      .browser-dot:nth-child(1) {
        background: #ff5f57;
      }
      .browser-dot:nth-child(2) {
        background: #ffbd2e;
      }
      .browser-dot:nth-child(3) {
        background: #28c940;
      }

      .browser-url {
        flex: 1;
        margin-left: 1rem;
        padding: 0.5rem 1rem;
        background: var(--bg-white);
        border-radius: 8px;
        font-size: 0.75rem;
        color: var(--text-muted);
        font-family: 'SF Mono', Monaco, 'Consolas', monospace;
        border: 1px solid var(--border-color);
      }

      .feature-demo img {
        width: 100%;
        height: auto;
        display: block;
      }

      /* Chat illustration for Account Manager feature */
      .demo-illustration {
        padding: 2rem;
        background: var(--bg-gray);
        min-height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .demo-chat-preview {
        background: var(--bg-white);
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 14, 65, 0.1);
        width: 100%;
        max-width: 360px;
        overflow: hidden;
      }

      .chat-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        background: var(--blue-heading);
        color: white;
      }

      .chat-avatar {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .chat-avatar svg {
        width: 22px;
        height: 22px;
        stroke: white;
      }

      .chat-info {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
      }

      .chat-name {
        font-weight: 600;
        font-size: 0.9375rem;
      }

      .chat-status {
        font-size: 0.75rem;
        opacity: 0.8;
        color: var(--teal-accent);
      }

      .chat-messages {
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-height: 200px;
      }

      .chat-bubble {
        max-width: 85%;
        padding: 0.75rem 1rem;
        border-radius: 16px;
        font-size: 0.875rem;
        line-height: 1.5;
      }

      .chat-bubble p {
        margin: 0;
      }

      .chat-bubble-received {
        background: var(--bg-gray);
        color: var(--text-body);
        border-bottom-left-radius: 4px;
        align-self: flex-start;
      }

      .chat-bubble-sent {
        background: var(--blue-primary);
        color: white;
        border-bottom-right-radius: 4px;
        align-self: flex-end;
      }

      .chat-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--border-color);
        color: var(--text-muted);
        font-size: 0.875rem;
      }

      .chat-input svg {
        width: 20px;
        height: 20px;
        stroke: var(--teal-accent);
      }

      /* ========================================
           INTERACTIVE DEMO MOCKUPS
           ======================================== */

      /* Z-index scale for Lens UI elements */
      :root {
        --z-ams-content: 1;
        --z-lens-fab: 50;
        --z-lens-action-center: 60;
        --z-lens-widget: 70;
        --z-lens-tooltip: 1000;
      }

      .interactive-demo {
        position: relative;
        border-radius: 0 0 16px 16px;
        overflow: visible; /* Changed from hidden to allow tooltips to escape */
        background: #e8ecf3;
        min-height: 560px; /* Increased to accommodate tooltips */
      }

      /* Generic AMS Background */
      .ams-mockup {
        background: #f5f7fa;
        height: 100%;
        min-height: 560px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 13px;
        color: #374151;
        border-radius: 0 0 16px 16px;
        overflow: visible;
      }

      .ams-header {
        background: linear-gradient(135deg, #475569 0%, #334155 100%);
        padding: 0.75rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .ams-logo {
        color: white;
        font-weight: 600;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .ams-logo-icon {
        width: 24px;
        height: 24px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
      }

      .ams-nav {
        display: flex;
        gap: 0.25rem;
      }

      .ams-nav-item {
        padding: 0.375rem 0.75rem;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        border-radius: 4px;
        cursor: default;
      }

      .ams-nav-item.active {
        background: rgba(255, 255, 255, 0.15);
        color: white;
      }

      .ams-subnav {
        background: white;
        padding: 0.625rem 1.25rem;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        gap: 1.5rem;
        font-size: 12px;
      }

      .ams-subnav-item {
        color: #6b7280;
        cursor: default;
      }

      .ams-subnav-item.active {
        color: #1f2937;
        font-weight: 500;
        border-bottom: 2px solid #475569;
        padding-bottom: 0.5rem;
        margin-bottom: -0.625rem;
      }

      .ams-content {
        padding: 1.25rem;
        padding-bottom: 5rem; /* Extra space for tooltips */
      }

      .ams-page-title {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1rem;
      }

      /* Generic Table Styling */
      .ams-table {
        width: 100%;
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        font-size: 12px;
        border-collapse: collapse;
        overflow: visible;
      }

      .ams-table th {
        background: #f9fafb;
        padding: 0.625rem 0.875rem;
        text-align: left;
        font-weight: 500;
        color: #6b7280;
        border-bottom: 1px solid #e5e7eb;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      .ams-table td {
        padding: 0.75rem 0.875rem;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: middle;
      }

      .ams-table tr:last-child td {
        border-bottom: none;
      }

      .ams-table tbody tr {
        position: relative;
        z-index: var(--z-ams-content);
      }

      .ams-table tr:hover,
      .ams-table tr:focus-within {
        background: #f9fafb;
        z-index: 100; /* Elevate row when interacting */
      }

      .ams-client-name {
        font-weight: 500;
        color: #1f2937;
      }

      .ams-invoice-id {
        color: #3b82f6;
        font-weight: 500;
      }

      .ams-amount {
        font-weight: 600;
        color: #1f2937;
      }

      .ams-date {
        color: #6b7280;
      }

      .ams-payer {
        color: #6b7280;
        font-size: 11px;
      }

      /* Lens Status Badge (in table) */
      .lens-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem; /* Increased for better touch target */
        border-radius: 100px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        position: relative;
        min-height: 28px; /* Ensure minimum height */
      }

      /* Expand touch target invisibly */
      .lens-badge::after {
        content: '';
        position: absolute;
        top: -6px;
        right: -6px;
        bottom: -6px;
        left: -6px;
      }

      .lens-badge::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
      }

      .lens-badge:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      /* Keyboard focus visibility */
      .lens-badge:focus {
        outline: none;
      }

      .lens-badge:focus-visible {
        outline: 3px solid var(--teal-accent);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(18, 234, 210, 0.25);
      }

      .lens-badge.paid {
        background: #dcfce7;
        color: #15803d;
      }

      .lens-badge.processing {
        background: #dbeafe;
        color: #1d4ed8;
      }

      .lens-badge.action-needed {
        background: #fee2e2;
        color: #dc2626;
      }

      /* Lens Tooltip */
      .lens-tooltip {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 14, 65, 0.2);
        padding: 1rem;
        width: 220px;
        z-index: var(--z-lens-tooltip); /* Use z-index scale */
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        font-family: 'Inter', sans-serif;
      }

      .lens-tooltip::before {
        content: '';
        position: absolute;
        top: -6px;
        right: 20px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
      }

      .lens-badge:hover .lens-tooltip {
        opacity: 1;
        visibility: visible;
      }

      .lens-tooltip-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e5e7eb;
      }

      .lens-tooltip-status {
        font-size: 13px;
        font-weight: 600;
      }

      .lens-tooltip-status.paid {
        color: #15803d;
      }
      .lens-tooltip-status.processing {
        color: #1d4ed8;
      }
      .lens-tooltip-status.action-needed {
        color: #dc2626;
      }

      .lens-tooltip-logo {
        width: 20px;
        height: 20px;
        background: var(--blue-heading);
        border-radius: 4px;
      }

      .lens-tooltip-row {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        margin-bottom: 0.375rem;
      }

      .lens-tooltip-label {
        color: #6b7280;
      }

      .lens-tooltip-value {
        font-weight: 500;
        color: #1f2937;
      }

      .lens-tooltip-link {
        display: block;
        text-align: center;
        margin-top: 0.75rem;
        padding: 0.5rem;
        background: var(--blue-primary);
        color: white;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
      }

      .lens-tooltip-link:hover {
        background: var(--blue-heading);
      }

      /* Lens Floating Action Center */
      .lens-action-center {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        width: 340px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 10px 50px rgba(0, 14, 65, 0.2);
        font-family: 'Inter', sans-serif;
        overflow: hidden;
        z-index: var(--z-lens-action-center); /* Use z-index scale */
      }

      .lens-ac-header {
        background: var(--blue-heading);
        padding: 0.875rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: white;
      }

      .lens-ac-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 14px;
        font-weight: 600;
      }

      .lens-ac-title-icon {
        width: 24px;
        height: 24px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .lens-ac-close {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0.7;
        font-size: 18px;
      }

      .lens-ac-close:hover {
        opacity: 1;
      }

      .lens-ac-tabs {
        display: flex;
        border-bottom: 1px solid #e5e7eb;
      }

      .lens-ac-tab {
        flex: 1;
        padding: 0.75rem;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: #6b7280;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.15s ease;
      }

      .lens-ac-tab:hover {
        color: var(--blue-heading);
      }

      .lens-ac-tab.active {
        color: var(--blue-heading);
        border-bottom-color: var(--blue-heading);
      }

      .lens-ac-tab-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        background: #fee2e2;
        color: #dc2626;
        border-radius: 100px;
        font-size: 10px;
        font-weight: 700;
        margin-left: 0.375rem;
      }

      .lens-ac-tab.alerts .lens-ac-tab-count {
        background: #fef3c7;
        color: #d97706;
      }

      .lens-ac-content {
        padding: 0.75rem;
        max-height: 280px; /* Slightly increased */
        overflow-y: auto;
      }

      .lens-ac-item {
        background: #f9fafb;
        border-radius: 10px;
        padding: 0.875rem;
        margin-bottom: 0.5rem;
      }

      .lens-ac-item:last-child {
        margin-bottom: 0;
      }

      .lens-ac-item-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 0.5rem;
      }

      .lens-ac-item-type {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #dc2626;
        background: #fee2e2;
        padding: 0.125rem 0.375rem;
        border-radius: 4px;
      }

      .lens-ac-item-type.warning {
        color: #d97706;
        background: #fef3c7;
      }

      .lens-ac-item-client {
        font-size: 13px;
        font-weight: 600;
        color: #1f2937;
      }

      .lens-ac-item-detail {
        font-size: 11px;
        color: #6b7280;
        margin-bottom: 0.625rem;
      }

      .lens-ac-item-impact {
        font-size: 11px;
        color: #dc2626;
        font-weight: 500;
      }

      .lens-ac-item-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.625rem;
      }

      .lens-ac-btn {
        flex: 1;
        padding: 0.375rem 0.5rem;
        font-size: 11px;
        font-weight: 600;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .lens-ac-btn-primary {
        background: var(--blue-primary);
        color: white;
      }

      .lens-ac-btn-primary:hover {
        background: var(--blue-heading);
      }

      .lens-ac-btn-secondary {
        background: white;
        color: #6b7280;
        border: 1px solid #e5e7eb;
      }

      .lens-ac-btn-secondary:hover {
        background: #f3f4f6;
        color: #1f2937;
      }

      /* Lens Dashboard Widget */
      .lens-widget {
        position: relative;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 14, 65, 0.08);
        font-family: 'Inter', sans-serif;
        overflow: hidden;
        border: 2px solid var(--teal-accent);
        z-index: var(--z-lens-widget); /* Use z-index scale */
      }

      .lens-widget-header {
        background: var(--bg-gray);
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e5e7eb;
      }

      .lens-widget-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 13px;
        font-weight: 600;
        color: var(--blue-heading);
      }

      .lens-widget-icon {
        width: 20px;
        height: 20px;
        background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-heading) 100%);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .lens-widget-icon svg {
        width: 75%;
        height: 75%;
      }

      .lens-widget-tabs {
        display: flex;
        border-bottom: 1px solid #e5e7eb;
        padding: 0 0.5rem;
      }

      .lens-widget-tab {
        padding: 0.625rem 0.75rem;
        font-size: 11px;
        font-weight: 500;
        color: #6b7280;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
      }

      .lens-widget-tab.active {
        color: var(--blue-heading);
        border-bottom-color: var(--blue-heading);
      }

      .lens-widget-content {
        padding: 0.75rem;
      }

      .lens-widget-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0.75rem;
        background: #f9fafb;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        font-size: 12px;
      }

      .lens-widget-item:last-child {
        margin-bottom: 0;
      }

      .lens-widget-item-left {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
      }

      .lens-widget-item-name {
        font-weight: 500;
        color: #1f2937;
      }

      .lens-widget-item-sub {
        font-size: 10px;
        color: #6b7280;
      }

      .lens-widget-item-badge {
        font-size: 10px;
        font-weight: 600;
        padding: 0.25rem 0.5rem;
        border-radius: 100px;
      }

      .lens-widget-item-badge.expires-soon {
        background: #fef3c7;
        color: #d97706;
      }

      .lens-widget-item-badge.expired {
        background: #fee2e2;
        color: #dc2626;
      }

      .lens-widget-item-badge.ok {
        background: #dcfce7;
        color: #15803d;
      }

      /* ========================================
           BILL TO PARADIGM MODAL
           ======================================== */

      .bill-paradigm-modal {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 24px rgba(0, 14, 65, 0.15);
        font-family: 'Inter', sans-serif;
        overflow: hidden;
      }

      .bill-paradigm-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.875rem 1rem;
        background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-heading) 100%);
        color: white;
      }

      .bill-paradigm-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        font-size: 0.875rem;
      }

      .bill-paradigm-close {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0.8;
        font-size: 1.25rem;
        line-height: 1;
      }

      .bill-paradigm-summary {
        display: flex;
        justify-content: space-around;
        padding: 1rem;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
      }

      .bill-paradigm-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
      }

      .bill-paradigm-stat .stat-value {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--blue-heading);
      }

      .bill-paradigm-stat .stat-label {
        font-size: 0.625rem;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .bill-paradigm-sections {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        max-height: 320px;
        overflow-y: auto;
        scrollbar-width: thin;
      }

      .bill-paradigm-sections::-webkit-scrollbar {
        width: 6px;
      }

      .bill-paradigm-sections::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
      }

      .bill-paradigm-sections::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
      }

      .bill-paradigm-sections::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
      }

      .bill-paradigm-section {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
      }

      .bill-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0.75rem;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
      }

      .bill-section-header.va {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border-bottom-color: #bfdbfe;
      }

      .bill-section-header.medicaid {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-bottom-color: #bbf7d0;
      }

      .section-badge {
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.125rem 0.375rem;
        border-radius: 4px;
      }

      .bill-section-header.va .section-badge {
        background: #1e40af;
        color: white;
      }

      .bill-section-header.medicaid .section-badge {
        background: #15803d;
        color: white;
      }

      .section-count {
        font-size: 0.6875rem;
        color: #6b7280;
      }

      .section-items {
        padding: 0.375rem 0;
      }

      .section-item {
        display: flex;
        align-items: center;
        padding: 0.375rem 0.75rem;
        gap: 0.5rem;
        font-size: 0.75rem;
      }

      .section-item:hover {
        background: #f9fafb;
      }

      .item-check {
        width: 14px;
        height: 14px;
        border-radius: 3px;
        background: var(--teal-accent);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.5rem;
        font-weight: bold;
        flex-shrink: 0;
      }

      .item-name {
        flex: 1;
        color: #374151;
      }

      .item-amount {
        color: #6b7280;
        font-weight: 500;
      }

      .bill-paradigm-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: #f8fafc;
        border-top: 1px solid #e5e7eb;
      }

      .bill-btn-secondary,
      .bill-btn-primary {
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.15s ease;
      }

      .bill-btn-secondary {
        background: white;
        color: #6b7280;
        border: 1px solid #e5e7eb;
      }

      .bill-btn-secondary:hover {
        background: #f9fafb;
        border-color: #d1d5db;
      }

      .bill-btn-primary {
        background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-heading) 100%);
        color: white;
        box-shadow: 0 2px 4px rgba(0, 53, 152, 0.2);
      }

      .bill-btn-primary:hover {
        box-shadow: 0 4px 8px rgba(0, 53, 152, 0.3);
        transform: translateY(-1px);
      }

      /* Bill to Paradigm Success State */
      .bill-paradigm-modal.submitting .bill-paradigm-sections,
      .bill-paradigm-modal.submitting .bill-paradigm-footer {
        opacity: 0.5;
        pointer-events: none;
      }

      .bill-paradigm-modal.success .bill-paradigm-sections,
      .bill-paradigm-modal.success .bill-paradigm-footer {
        display: none;
      }

      .bill-paradigm-success {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        text-align: center;
        gap: 0.75rem;
      }

      .bill-paradigm-modal.success .bill-paradigm-success {
        display: flex;
      }

      .success-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
      }

      .success-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--blue-heading);
      }

      .success-message {
        font-size: 0.75rem;
        color: #6b7280;
        max-width: 200px;
      }

      /* ========================================
           ELIGIBILITY DEMO STYLES
           ======================================== */

      .eligibility-banner {
        background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
        border: 1px solid #86efac;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .eligibility-banner:hover {
        background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
        border-color: #4ade80;
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
      }

      .eligibility-banner-content {
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }

      .eligibility-banner-icon {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, var(--teal-accent) 0%, var(--teal-accent-dark) 100%);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        flex-shrink: 0;
      }

      .eligibility-banner-info {
        flex: 1;
      }

      .eligibility-banner-label {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #15803d;
        font-weight: 600;
        margin-bottom: 0.125rem;
      }

      .eligibility-banner-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        color: #334155;
      }

      .eligibility-status-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.125rem 0.5rem;
        border-radius: 4px;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      .eligibility-status-badge.eligible {
        background: #dcfce7;
        color: #15803d;
      }

      .eligibility-status-badge.not-eligible {
        background: #fee2e2;
        color: #dc2626;
      }

      .eligibility-status-badge.unknown {
        background: #f3f4f6;
        color: #6b7280;
      }

      .eligibility-payer {
        font-weight: 500;
      }

      .eligibility-separator {
        color: #94a3b8;
      }

      .eligibility-member-id {
        color: #64748b;
        font-size: 0.75rem;
      }

      .eligibility-banner-chevron {
        color: #64748b;
        transition: transform 0.2s ease;
      }

      .eligibility-banner.expanded .eligibility-banner-chevron {
        transform: rotate(180deg);
      }

      /* Eligibility Popover */
      .eligibility-popover {
        display: none;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        margin-top: 0.5rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }

      .eligibility-popover.visible {
        display: block;
      }

      .eligibility-popover-header {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 0;
      }

      .eligibility-popover-tabs {
        display: flex;
      }

      .eligibility-tab {
        flex: 1;
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 2px solid transparent;
      }

      .eligibility-tab:hover {
        color: #334155;
        background: #f1f5f9;
      }

      .eligibility-tab.active {
        color: var(--teal-accent-dark);
        border-bottom-color: var(--teal-accent);
        background: white;
      }

      .eligibility-popover-content {
        max-height: 280px;
        overflow-y: auto;
      }

      .eligibility-panel {
        display: none;
        padding: 0.75rem;
      }

      .eligibility-panel.active {
        display: block;
      }

      /* Payer Cards */
      .eligibility-payer-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
      }

      .eligibility-payer-card:last-child {
        margin-bottom: 0;
      }

      .eligibility-payer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
      }

      .eligibility-payer-name {
        font-weight: 600;
        font-size: 0.8125rem;
        color: #1e293b;
      }

      .eligibility-payer-details {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .eligibility-detail-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
      }

      .eligibility-detail-label {
        color: #64748b;
      }

      .eligibility-detail-value {
        color: #334155;
        font-weight: 500;
      }

      .eligibility-detail-value.denial {
        color: #dc2626;
      }

      /* History Tab */
      .eligibility-history-item {
        padding: 0.5rem 0;
        border-bottom: 1px solid #e2e8f0;
      }

      .eligibility-history-item:last-child {
        border-bottom: none;
      }

      .eligibility-history-date {
        font-size: 0.6875rem;
        color: #94a3b8;
        margin-bottom: 0.25rem;
      }

      .eligibility-history-entry {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        color: #334155;
      }

      .eligibility-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .eligibility-status-dot.eligible {
        background: #22c55e;
      }

      .eligibility-status-dot.not-eligible {
        background: #ef4444;
      }

      .eligibility-history-status {
        margin-left: auto;
        font-weight: 600;
        color: #15803d;
      }

      .eligibility-history-status.denial {
        color: #dc2626;
      }

      /* ========================================
           AUTHORIZATION WIZARD STYLES
           ======================================== */

      .lens-ac-item-type.add-ams {
        background: linear-gradient(135deg, var(--teal-accent) 0%, var(--teal-accent-dark) 100%);
        color: white;
      }

      .lens-ac-item-services {
        display: flex;
        gap: 0.375rem;
        margin: 0.375rem 0;
        flex-wrap: wrap;
      }

      .service-tag {
        display: inline-flex;
        padding: 0.125rem 0.375rem;
        background: #f0fdf4;
        color: #15803d;
        font-size: 0.625rem;
        border-radius: 3px;
        border: 1px solid #86efac;
      }

      .auth-wizard-modal {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 14, 65, 0.85);
        z-index: 100;
        padding: 1rem;
        overflow: hidden;
      }

      .auth-wizard-modal.visible {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .auth-wizard-content {
        background: white;
        border-radius: 10px;
        width: 100%;
        max-width: 600px;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: hidden;
      }

      .auth-wizard-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-dark) 100%);
        color: white;
      }

      .auth-wizard-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
      }

      .auth-wizard-title .lens-widget-icon {
        width: 24px;
        height: 24px;
      }

      .auth-wizard-close {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0.7;
        font-size: 1.25rem;
        transition: opacity 0.2s;
      }

      .auth-wizard-close:hover {
        opacity: 1;
      }

      .auth-wizard-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }

      /* PDF Preview Panel */
      .auth-wizard-pdf {
        background: #f1f5f9;
        border-right: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .auth-wizard-pdf-header {
        padding: 0.5rem 0.75rem;
        background: #e2e8f0;
        font-size: 0.6875rem;
        font-weight: 600;
        color: #475569;
        display: flex;
        align-items: center;
        gap: 0.375rem;
      }

      .pdf-icon {
        font-size: 0.75rem;
      }

      .auth-wizard-pdf-preview {
        flex: 1;
        padding: 0.75rem;
        overflow: auto;
      }

      .pdf-mockup {
        background: white;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        font-size: 0.6875rem;
      }

      .pdf-header-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: linear-gradient(135deg, #003598 0%, #001e5c 100%);
        border-radius: 4px 4px 0 0;
      }

      .pdf-logo {
        width: 24px;
        height: 24px;
        background: white;
        border-radius: 4px;
      }

      .pdf-title-text {
        color: white;
      }

      .pdf-title-text div:first-child {
        color: white !important;
        font-size: 0.75rem;
      }

      .pdf-title-text div:last-child {
        color: rgba(255,255,255,0.8) !important;
      }

      .pdf-content-mockup {
        padding: 0.75rem;
      }

      .pdf-row {
        display: flex;
        margin-bottom: 0.25rem;
      }

      .pdf-label {
        color: #64748b;
        width: 50px;
        flex-shrink: 0;
      }

      .pdf-value {
        color: #1e293b;
        font-weight: 500;
      }

      .pdf-divider {
        height: 1px;
        background: #e2e8f0;
        margin: 0.5rem 0;
      }

      .pdf-section-title {
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.375rem;
        font-size: 0.625rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      .pdf-service-line {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0;
        border-bottom: 1px solid #f1f5f9;
      }

      .pdf-service-line:last-child {
        border-bottom: none;
      }

      .pdf-service-line span:first-child {
        color: #6366f1;
        font-family: monospace;
        font-size: 0.625rem;
      }

      .pdf-service-line span:last-child {
        color: #475569;
      }

      /* Services Panel */
      .auth-wizard-services {
        display: flex;
        flex-direction: column;
        padding: 0.75rem;
        overflow: auto;
      }

      .auth-wizard-client-info {
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e2e8f0;
      }

      .client-name {
        font-weight: 600;
        color: #1e293b;
        font-size: 0.9375rem;
      }

      .client-auth-num {
        color: #6366f1;
        font-size: 0.75rem;
        font-family: monospace;
        margin-top: 0.125rem;
      }

      .client-dates {
        color: #64748b;
        font-size: 0.6875rem;
        margin-top: 0.125rem;
      }

      .auth-wizard-services-title {
        font-size: 0.6875rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.5rem;
      }

      .auth-wizard-service-cards {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .auth-service-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 0.625rem;
        transition: all 0.2s ease;
      }

      .auth-service-card:hover:not(.added) {
        border-color: var(--teal-accent);
        box-shadow: 0 2px 8px rgba(18, 234, 210, 0.15);
      }

      .auth-service-card.added {
        background: #f0fdf4;
        border-color: #86efac;
      }

      .service-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.25rem;
      }

      .service-card-name {
        font-weight: 600;
        color: #1e293b;
        font-size: 0.8125rem;
      }

      .service-card-status {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
        background: #dbeafe;
        color: #2563eb;
        border-radius: 3px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      .service-card-status.added {
        background: #dcfce7;
        color: #15803d;
      }

      .service-card-code {
        font-family: monospace;
        font-size: 0.625rem;
        color: #6366f1;
        margin-bottom: 0.125rem;
      }

      .service-card-hours {
        font-size: 0.6875rem;
        color: #64748b;
        margin-bottom: 0.375rem;
      }

      .service-card-btn {
        width: 100%;
        padding: 0.375rem 0.5rem;
        background: linear-gradient(135deg, var(--teal-accent) 0%, var(--teal-accent-dark) 100%);
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 0.6875rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .service-card-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(18, 234, 210, 0.3);
      }

      .service-card-btn:disabled {
        background: #e2e8f0;
        color: #94a3b8;
        cursor: not-allowed;
      }

      /* Footer */
      .auth-wizard-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
        border-top: 1px solid #e2e8f0;
        background: #f8fafc;
      }

      .auth-wizard-btn-secondary,
      .auth-wizard-btn-primary {
        padding: 0.375rem 0.75rem;
        border-radius: 4px;
        font-size: 0.6875rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .auth-wizard-btn-secondary {
        background: white;
        border: 1px solid #d1d5db;
        color: #64748b;
      }

      .auth-wizard-btn-secondary:hover {
        background: #f9fafb;
        border-color: #9ca3af;
      }

      .auth-wizard-btn-primary {
        background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-dark) 100%);
        border: none;
        color: white;
      }

      .auth-wizard-btn-primary:hover {
        box-shadow: 0 2px 8px rgba(0, 53, 152, 0.3);
      }

      /* Success state */
      .auth-wizard-success {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-align: center;
      }

      .auth-wizard-content.success .auth-wizard-body,
      .auth-wizard-content.success .auth-wizard-footer {
        visibility: hidden;
      }

      .auth-wizard-content.success .auth-wizard-success {
        display: flex;
      }

      /* ========================================
           INTERACTIVE DEMO ANIMATIONS
           ======================================== */

      /* Tab content panels */
      .lens-ac-panel,
      .lens-widget-panel {
        display: none;
      }

      .lens-ac-panel.active,
      .lens-widget-panel.active {
        display: block;
      }

      /* Action item completion animation */
      .lens-ac-item {
        transition: all 0.4s ease;
      }

      .lens-ac-item.completing {
        background: #dcfce7;
        transform: scale(0.98);
      }

      .lens-ac-item.completing::before {
        content: '✓';
        position: absolute;
        top: 0.875rem;
        right: 0.875rem;
        color: #15803d;
        font-size: 16px;
        font-weight: bold;
      }

      .lens-ac-item.hiding {
        opacity: 0;
        transform: translateX(20px) scale(0.95);
        max-height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
      }

      .lens-ac-item.returning {
        opacity: 0;
        transform: translateX(-20px);
      }

      /* Widget item animations */
      .lens-widget-item {
        transition: all 0.3s ease;
      }

      .lens-widget-item.highlighting {
        background: #dbeafe;
        transform: scale(1.02);
      }

      /* Lens Floating Icon */
      .lens-fab {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        width: 48px;
        height: 48px;
        background: var(--blue-heading);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0, 14, 65, 0.3);
        transition: all 0.2s ease;
        z-index: var(--z-lens-fab); /* Use z-index scale */
      }

      .lens-fab:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 24px rgba(0, 14, 65, 0.4);
      }

      .lens-fab svg {
        width: 24px;
        height: 24px;
        stroke: white;
      }

      .lens-fab-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 20px;
        height: 20px;
        background: #dc2626;
        color: white;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
      }

      /* Status Pills */
      .status-pills {
        display: flex;
        gap: 0.625rem;
        margin-top: 2rem;
        flex-wrap: wrap;
      }

      .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.875rem;
        border-radius: 100px;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        transition: all 0.3s ease;
        position: relative;
      }

      .status-pill::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        animation: pulse-dot 3s ease-in-out infinite;
      }

      @keyframes pulse-dot {
        0%, 100% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.2);
          opacity: 0.8;
        }
      }

      .status-pill.paid {
        background: var(--success-green-bg);
        color: var(--success-green);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
      }

      .status-pill.paid:hover {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
        transform: translateY(-1px);
      }

      .status-pill.processing {
        background: var(--processing-blue-bg);
        color: var(--processing-blue);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
      }

      .status-pill.processing:hover {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
        transform: translateY(-1px);
      }

      .status-pill.action {
        background: var(--action-red-bg);
        color: var(--action-red);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
      }

      .status-pill.action:hover {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
        transform: translateY(-1px);
      }

      .status-pill.warning {
        background: var(--warning-amber-bg);
        color: var(--warning-amber);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
      }

      .status-pill.warning:hover {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
        transform: translateY(-1px);
      }

      /* CTA Section */
      .cta-section {
        padding: 6rem 2rem;
        background: linear-gradient(
          135deg,
          var(--blue-heading) 0%,
          var(--blue-primary) 25%,
          #1a4fc9 50%,
          var(--blue-primary) 75%,
          var(--blue-heading) 100%
        );
        background-size: 400% 400%;
        animation: gradient-shift 15s ease infinite;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      @keyframes gradient-shift {
        0%, 100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      .cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
      }

      .cta-section::after {
        content: '';
        position: absolute;
        bottom: -30%;
        right: -10%;
        width: 50%;
        height: 80%;
        background: radial-gradient(ellipse at center, var(--teal-accent) 0%, transparent 60%);
        opacity: 0.15;
        pointer-events: none;
      }

      .cta-content {
        position: relative;
        z-index: 1;
        max-width: 600px;
        margin: 0 auto;
      }

      .cta-title {
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        font-weight: 700;
        color: white;
        margin-bottom: 1rem;
        letter-spacing: -0.02em;
      }

      .cta-description {
        font-size: 1.0625rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 2rem;
        line-height: 1.7;
      }

      .cta-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
      }

      .btn-white {
        background: white;
        color: var(--blue-primary);
      }

      .btn-white:hover {
        background: var(--bg-gray);
        transform: translateY(-2px);
      }

      .btn-outline-white {
        background: transparent;
        color: white;
        border: 1.5px solid rgba(255, 255, 255, 0.3);
      }

      .btn-outline-white:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.5);
      }

      /* FAQ Section */
      .faq-section {
        padding: 6rem 2rem;
        background: var(--bg-gray);
      }

      .faq-container {
        max-width: 800px;
        margin: 0 auto;
        counter-reset: faq-counter;
      }

      .faq-item {
        counter-increment: faq-counter;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(192, 204, 222, 0.5);
        border-radius: 16px;
        margin-bottom: 1rem;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .faq-item:hover {
        border-color: rgba(18, 234, 210, 0.4);
        box-shadow:
          0 8px 30px rgba(0, 14, 65, 0.1),
          0 0 0 1px rgba(18, 234, 210, 0.1);
        transform: translateY(-2px);
      }

      .faq-item.open {
        border-color: rgba(18, 234, 210, 0.5);
        box-shadow: 0 8px 30px rgba(0, 14, 65, 0.1);
      }

      .faq-question {
        width: 100%;
        padding: 1.5rem;
        padding-left: 4rem;
        background: none;
        border: none;
        text-align: left;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        font-family: inherit;
        font-size: 1rem;
        font-weight: 600;
        color: var(--blue-heading);
        transition: background 0.2s ease;
        position: relative;
      }

      .faq-question::before {
        content: counter(faq-counter);
        position: absolute;
        left: 1.5rem;
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, var(--teal-accent) 0%, var(--teal-accent-dark) 100%);
        color: var(--blue-dark);
        font-size: 0.8125rem;
        font-weight: 700;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .faq-question:hover {
        background: var(--bg-light);
      }

      .faq-question svg {
        width: 20px;
        height: 20px;
        stroke: var(--text-muted);
        stroke-width: 2.5;
        flex-shrink: 0;
        transition: transform 0.3s ease;
      }

      .faq-item.open .faq-question svg {
        transform: rotate(180deg);
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.3s ease,
          padding 0.3s ease;
      }

      .faq-item.open .faq-answer {
        max-height: 1000px;
      }

      .faq-answer-content {
        padding: 0 1.5rem 1.5rem 4rem;
        font-size: 0.9375rem;
        color: var(--text-body);
        line-height: 1.7;
      }

      .faq-answer-content p {
        margin-bottom: 1rem;
      }

      .faq-answer-content p:last-child {
        margin-bottom: 0;
      }

      .faq-answer-content ol,
      .faq-answer-content ul {
        margin: 1rem 0;
        padding-left: 1.5rem;
      }

      .faq-answer-content li {
        margin-bottom: 0.75rem;
      }

      .faq-answer-content a {
        color: var(--blue-primary);
        font-weight: 500;
        text-decoration: none;
      }

      .faq-answer-content a:hover {
        text-decoration: underline;
      }

      .faq-answer-content .step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        background: var(--teal-accent);
        color: var(--blue-dark);
        font-size: 0.75rem;
        font-weight: 700;
        border-radius: 50%;
        margin-right: 0.625rem;
      }

      .faq-answer-content .code-text {
        font-family: 'SF Mono', Monaco, 'Courier New', monospace;
        background: var(--bg-gray);
        padding: 0.125rem 0.5rem;
        border-radius: 4px;
        font-size: 0.875rem;
        color: var(--blue-heading);
      }

      .faq-answer-content .tip-box {
        background: var(--teal-accent-light);
        border-left: 3px solid var(--teal-accent);
        padding: 1rem;
        border-radius: 0 8px 8px 0;
        margin: 1rem 0;
      }

      .faq-answer-content .tip-box strong {
        color: var(--teal-text);
      }

      /* Footer */
      footer {
        padding: 3rem 2rem;
        text-align: center;
        background: var(--bg-white);
        border-top: 1px solid var(--border-color);
      }

      .footer-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        margin-bottom: 1rem;
      }

      .footer-logo-icon {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-heading) 100%);
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 2px 6px rgba(0, 14, 65, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }

      .footer-logo-icon svg {
        width: 85%;
        height: 85%;
      }

      /* Footer logo Aperture animation - paused until visible */
      .footer-logo-icon .aperture-ring,
      .footer-logo-icon .core-dot,
      .footer-logo-icon .aperture-emerge {
        animation-play-state: paused;
      }
      .footer-logo-icon.animate .aperture-ring,
      .footer-logo-icon.animate .core-dot,
      .footer-logo-icon.animate .aperture-emerge {
        animation-play-state: running;
      }
      .footer-logo-icon .aperture-ring {
        fill: none;
        stroke: white;
        stroke-width: 6;
        opacity: 0.5;
        transform-origin: 256px 256px;
        animation: apertureContract 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
      }
      .footer-logo-icon .core-dot {
        transform-origin: 256px 256px;
        animation: coreFadeOut 0.4s ease 0.5s forwards;
      }
      .footer-logo-icon .aperture-emerge {
        opacity: 0;
        transform-origin: 256px 256px;
      }
      .footer-logo-icon .ap-top {
        animation: apEmergeTop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
      }
      .footer-logo-icon .ap-bottom {
        animation: apEmergeBottom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
      }
      .footer-logo-icon .ap-left {
        animation: apEmergeLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
      }
      .footer-logo-icon .ap-right {
        animation: apEmergeRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
      }

      @keyframes apertureContract {
        0% { transform: scale(1); opacity: 0.5; }
        100% { transform: scale(0); opacity: 0; }
      }
      @keyframes coreFadeOut {
        0% { opacity: 1; }
        100% { opacity: 0; }
      }
      @keyframes apEmergeTop {
        0% { opacity: 1; transform: translateY(145.1px); }
        100% { opacity: 1; transform: translateY(0); }
      }
      @keyframes apEmergeBottom {
        0% { opacity: 1; transform: translateY(-145.1px); }
        100% { opacity: 1; transform: translateY(0); }
      }
      @keyframes apEmergeLeft {
        0% { opacity: 1; transform: translateX(145.1px); }
        100% { opacity: 1; transform: translateX(0); }
      }
      @keyframes apEmergeRight {
        0% { opacity: 1; transform: translateX(-145.1px); }
        100% { opacity: 1; transform: translateX(0); }
      }

      .footer-text {
        font-size: 0.875rem;
        color: var(--text-muted);
      }

      .footer-text a {
        color: var(--blue-primary);
        font-weight: 600;
        text-decoration: none;
      }

      .footer-text a:hover {
        text-decoration: underline;
      }

      /* External link indicator */
      .external-link::after {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-left: 4px;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E")
          center/contain no-repeat;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E")
          center/contain no-repeat;
        vertical-align: middle;
      }

      /* Animations */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .animate-in {
        animation: fadeInUp 0.7s ease forwards;
      }

      .delay-1 {
        animation-delay: 0.1s;
      }
      .delay-2 {
        animation-delay: 0.2s;
      }
      .delay-3 {
        animation-delay: 0.3s;
      }

      .delay-4 {
        animation-delay: 0.4s;
      }

      /* Focus indicators for accessibility */
      .btn:focus-visible,
      .nav-link:focus-visible,
      .nav-cta:focus-visible,
      .logo:focus-visible,
      a:focus-visible {
        outline: 3px solid var(--teal-accent);
        outline-offset: 3px;
        border-radius: 4px;
      }

      button:focus:not(:focus-visible),
      a:focus:not(:focus-visible) {
        outline: none;
      }

      /* Skip link for screen readers */
      .skip-link {
        position: absolute;
        top: -100px;
        left: 16px;
        padding: 12px 24px;
        background: var(--blue-primary);
        color: white;
        font-weight: 600;
        border-radius: 8px;
        z-index: 1000;
        transition: top 0.2s ease;
        text-decoration: none;
      }

      .skip-link:focus {
        top: 16px;
      }

      /* Mobile hamburger menu */
      .nav-hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        background: none;
        border: none;
        cursor: pointer;
        border-radius: 8px;
        transition: background 0.2s ease;
      }

      .nav-hamburger:hover {
        background: var(--bg-gray);
      }

      .nav-hamburger span {
        width: 24px;
        height: 2.5px;
        background: var(--blue-heading);
        border-radius: 2px;
        transition:
          transform 0.2s ease,
          opacity 0.2s ease;
      }

      .nav-hamburger[aria-expanded='true'] span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }

      .nav-hamburger[aria-expanded='true'] span:nth-child(2) {
        opacity: 0;
      }

      .nav-hamburger[aria-expanded='true'] span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
      }

      /* Reduced motion support */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }

        html {
          scroll-behavior: auto;
        }

        .logo-icon::before {
          animation: none;
        }

        .reveal {
          opacity: 1;
          transform: none;
        }
      }

      /* Scroll reveal */
      .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* Responsive */
      @media (max-width: 1024px) {
        .feature-inner,
        .feature:nth-child(even) .feature-inner {
          grid-template-columns: 1fr;
          gap: 3rem;
          direction: ltr;
        }

        .feature:nth-child(even) .feature-inner > * {
          direction: ltr;
        }

        .feature-content {
          max-width: 100%;
        }

        nav {
          padding: 0.875rem 1.5rem;
        }

        .nav-hamburger {
          display: flex;
        }

        .nav-links {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          flex-direction: column;
          background: var(--bg-white);
          padding: 1rem 1.5rem 2rem;
          border-bottom: 1px solid var(--border-color);
          box-shadow: 0 4px 12px rgba(0, 14, 65, 0.1);
          gap: 0.25rem;
          min-height: calc(100vh - 64px);
        }

        .nav-links.open {
          display: flex;
        }

        .nav-link {
          padding: 0.875rem 1rem;
          min-height: 44px;
          display: flex;
          align-items: center;
        }

        .nav-cta {
          margin-left: 0;
          margin-top: 0.5rem;
          text-align: center;
          justify-content: center;
          min-height: 44px;
        }

        /* Interactive demo responsive - tablet */
        .interactive-demo,
        .ams-mockup {
          min-height: 440px;
        }
      }

      @media (max-width: 640px) {
        .hero {
          padding: 7rem 1.5rem 4rem;
        }

        .hero-cta {
          flex-direction: column;
          width: 100%;
          max-width: 300px;
        }

        .btn {
          justify-content: center;
        }

        .platform-support {
          flex-direction: column;
          gap: 0.375rem;
          margin-top: 1.5rem;
        }

        .platform-more {
          margin-top: 0.125rem;
        }

        .personas-grid {
          grid-template-columns: 1fr;
        }

        .feature {
          padding: 3rem 1.5rem;
        }

        .cta-buttons {
          flex-direction: column;
          align-items: center;
        }

        /* Interactive demo responsive - mobile */
        .interactive-demo,
        .ams-mockup {
          min-height: 400px;
        }

        .ams-mockup {
          font-size: 11px;
        }

        .ams-table th,
        .ams-table td {
          padding: 0.5rem 0.625rem;
          font-size: 10px;
        }

        .lens-badge {
          font-size: 9px;
          padding: 0.25rem 0.5rem;
        }

        .lens-tooltip {
          width: 200px;
          padding: 0.625rem;
          font-size: 11px;
        }

        .lens-action-center {
          width: 280px;
          right: 0.5rem;
          bottom: 0.5rem;
        }

        .lens-ac-item-client {
          font-size: 12px;
        }

        .lens-ac-item-detail,
        .lens-ac-item-impact {
          font-size: 10px;
        }
      }

      /* ========================================
         INSTALLATION WIZARD - Light Futuristic
         ======================================== */
      .install-wizard-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 14, 65, 0.25);
        backdrop-filter: blur(12px) saturate(120%);
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .install-wizard-overlay.open {
        opacity: 1;
        visibility: visible;
      }

      .install-wizard {
        background: white;
        border-radius: 24px;
        max-width: 480px;
        width: 100%;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        box-shadow:
          0 0 0 1px rgba(0, 53, 152, 0.04),
          0 1px 2px rgba(0, 53, 152, 0.02),
          0 8px 40px rgba(0, 53, 152, 0.08);
        transform: scale(0.98) translateY(8px);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .install-wizard-overlay.open .install-wizard {
        transform: scale(1) translateY(0);
      }

      /* Clean header */
      .wizard-header {
        padding: 1.75rem 2rem 1.25rem;
        position: relative;
        flex-shrink: 0;
        text-align: center;
      }

      .wizard-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: #94a3b8;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
      }

      .wizard-close:hover {
        background: #f1f5f9;
        color: #64748b;
      }

      .wizard-close svg {
        width: 18px;
        height: 18px;
      }

      .wizard-title {
        font-family: 'TT Firs Neue', 'Inter', sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--blue-heading);
        margin-bottom: 0.25rem;
        letter-spacing: -0.02em;
      }

      .wizard-subtitle {
        font-size: 0.875rem;
        color: #64748b;
      }

      .wizard-step-counter {
        display: inline-block;
        margin-top: 0.625rem;
        padding: 0.25rem 0.625rem;
        background: #f1f5f9;
        border-radius: 6px;
        font-size: 0.6875rem;
        font-weight: 600;
        color: #64748b;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }

      /* Minimal progress dots */
      .wizard-progress {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 0 2rem 1.25rem;
        flex-shrink: 0;
      }

      .wizard-progress-step {
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
      }

      .wizard-progress-step span:last-child {
        display: none;
      }

      .wizard-progress-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #e2e8f0;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .wizard-progress-step.active .wizard-progress-dot {
        width: 20px;
        border-radius: 10px;
        background: var(--teal-accent);
      }

      .wizard-progress-step.completed .wizard-progress-dot {
        background: var(--teal-accent);
      }

      .wizard-progress-line {
        width: 6px;
        height: 1px;
        background: #e2e8f0;
        transition: background 0.3s ease;
      }

      .wizard-progress-line.completed {
        background: var(--teal-accent);
      }

      /* Content */
      .wizard-content {
        padding: 0 2rem 1.5rem;
        min-height: 240px;
        max-height: calc(85vh - 180px);
        overflow-y: auto;
        flex: 1;
      }

      .wizard-step {
        display: none;
        animation: wizardSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .wizard-step.active {
        display: block;
      }

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

      .wizard-step-icon {
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, rgba(18, 234, 210, 0.12) 0%, rgba(18, 234, 210, 0.04) 100%);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
      }

      .wizard-step-icon svg {
        width: 26px;
        height: 26px;
        stroke: var(--teal-text);
        stroke-width: 1.75;
      }

      .wizard-step-title {
        font-family: 'TT Firs Neue', 'Inter', sans-serif;
        font-size: 1.0625rem;
        font-weight: 600;
        color: var(--blue-heading);
        text-align: center;
        margin-bottom: 0.375rem;
        letter-spacing: -0.01em;
      }

      .wizard-step-description {
        font-size: 0.875rem;
        color: #64748b;
        text-align: center;
        line-height: 1.55;
        margin-bottom: 1.25rem;
      }

      .wizard-step-image {
        background: #f8fafc;
        border-radius: 10px;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        text-align: center;
      }

      .wizard-step-image img {
        max-width: 100%;
        border-radius: 6px;
      }

      /* Clean instruction cards */
      .wizard-instruction-box {
        background: #f8fafc;
        border: none;
        border-radius: 10px;
        padding: 0.75rem 0.875rem;
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
      }

      .wizard-instruction-number {
        width: 20px;
        height: 20px;
        background: var(--teal-accent);
        color: var(--blue-dark);
        font-size: 0.6875rem;
        font-weight: 700;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
      }

      .wizard-instruction-text {
        font-size: 0.8125rem;
        color: #475569;
        line-height: 1.5;
      }

      .wizard-instruction-text strong {
        color: var(--blue-heading);
        font-weight: 600;
      }

      /* Subtle tip */
      .wizard-tip {
        background: #f8fafc;
        border-radius: 8px;
        padding: 0.625rem 0.75rem;
        margin-top: 1rem;
        font-size: 0.75rem;
        color: #64748b;
        line-height: 1.5;
      }

      .wizard-tip strong {
        color: #475569;
        font-weight: 600;
      }

      /* Footer */
      .wizard-footer {
        padding: 1rem 2rem 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-shrink: 0;
      }

      .wizard-btn {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.15s ease;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
      }

      .wizard-btn-back {
        background: transparent;
        color: #94a3b8;
        border: none;
        padding-left: 0;
      }

      .wizard-btn-back:hover {
        color: #64748b;
      }

      .wizard-btn-back:disabled {
        opacity: 0;
        pointer-events: none;
      }

      .wizard-btn-back svg {
        width: 14px;
        height: 14px;
      }

      .wizard-btn-next {
        background: var(--blue-heading);
        color: white;
        border: none;
      }

      .wizard-btn-next:hover {
        background: var(--blue-primary);
      }

      .wizard-btn-next svg {
        width: 14px;
        height: 14px;
      }

      .wizard-btn-cta {
        background: var(--teal-accent);
        color: var(--blue-dark);
        border: none;
      }

      .wizard-btn-cta:hover {
        filter: brightness(0.95);
      }

      /* Focus styles */
      .wizard-btn:focus-visible {
        outline: 2px solid var(--teal-accent);
        outline-offset: 2px;
      }

      .wizard-close:focus-visible {
        outline: 2px solid var(--blue-primary);
        outline-offset: 2px;
      }

      /* Mobile */
      @media (max-width: 640px) {
        .install-wizard-overlay {
          padding: 0;
          align-items: flex-end;
        }

        .install-wizard {
          max-height: 90vh;
          border-radius: 20px 20px 0 0;
          max-width: 100%;
        }

        .wizard-header {
          padding: 1.5rem 1.5rem 1rem;
        }

        .wizard-progress {
          padding: 0 1.5rem 1rem;
        }

        .wizard-content {
          padding: 0 1.5rem 1.25rem;
          min-height: auto;
        }

        .wizard-footer {
          padding: 0.875rem 1.5rem 1.5rem;
        }

        .wizard-btn {
          padding: 0.75rem 1.125rem;
          min-height: 44px;
        }

        .wizard-close {
          width: 44px;
          height: 44px;
        }
      }