:root {
        --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --ink: #1c2024;
        --ink-secondary: #3f434a;
        --ink-muted: #60646c;
        --ink-subtle: #80838d;
        --line: #e4e5e9;
        --line-light: #ededf0;
        --line-subtle: #f0f0f2;
        --brand: #1875ee;
        --brand-hover: #1263cb;
        --brand-light: #eff6ff;
        --brand-ring: rgba(24, 117, 238, 0.25);
        --bg-body: #ffffff;
        --bg-subtle: #fafafc;
        --bg-muted: #f4f5f7;
        --wa-green: #25D366;
        --wa-dark: #128C7E;
        --purple-brand: #7353ba;
        --purple-light: #f5f2fc;
        --shadow-sm: 0 1px 2px rgba(28, 32, 36, 0.05);
        --shadow-md: 0 4px 12px -2px rgba(28, 32, 36, 0.08), 0 2px 6px -1px rgba(28, 32, 36, 0.04);
        --shadow-lg: 0 12px 32px -8px rgba(28, 32, 36, 0.12), 0 4px 12px -2px rgba(28, 32, 36, 0.04);
        --shadow-xl: 0 24px 48px -12px rgba(28, 32, 36, 0.14), 0 8px 24px -4px rgba(28, 32, 36, 0.06);
      }

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

      html {
        font-family: var(--font-sans);
        color: var(--ink);
        background-color: var(--bg-body);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }

      h1, h2, h3, h4, .font-display {
        font-family: var(--font-display);
        letter-spacing: -0.03em;
        font-weight: 700;
      }

      body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        color: var(--ink);
        background-color: var(--bg-body);
        line-height: 1.5;
        overflow-x: hidden;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      svg.icon, .icon {
        display: inline-block;
        vertical-align: middle;
        flex-shrink: 0;
        max-width: 100%;
        max-height: 100%;
      }

      /* Chatwoot-Style Frame and Grid Alignment */
      .cw-frame {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        border-color: rgb(240 240 242 / var(--tw-border-opacity, 1));
        border-left: 1px solid rgb(240 240 242);
        border-right: 1px solid rgb(240 240 242);
      }

      .max-w-frame {
        max-width: 1200px;
      }

      .cw-frame-bordered {
        border-left: 1px solid rgb(240, 240, 242);
        border-right: 1px solid rgb(240, 240, 242);
      }

      .cw-grid-bg {
        background-image: 
          linear-gradient(90deg, rgba(240, 241, 243, 0.9) 1px, transparent 1px),
          linear-gradient(180deg, rgba(240, 241, 243, 0.9) 1px, transparent 1px);
        background-size: 32px 32px;
        background-position: center top;
      }

      .cw-dots-bg {
        background-image: radial-gradient(rgba(28, 32, 36, 0.07) 1px, transparent 1px);
        background-size: 16px 16px;
      }

      /* Buttons modeled after chatwoot.com design system */
      .cw-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 36px;
        padding: 0 16px;
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.07px;
        border-radius: 6px;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        outline: none;
      }

      .cw-btn:active {
        transform: scale(0.98);
      }

      .cw-btn-lg {
        height: 48px;
        padding: 0 20px;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.08px;
        border-radius: 8px;
      }

      .cw-btn-primary {
        background-color: var(--brand);
        color: #ffffff !important;
        box-shadow: none;
      }

      .cw-btn-primary:hover {
        background-color: var(--brand-hover);
      }

      .cw-btn-secondary {
        background-color: #ffffff;
        color: var(--ink) !important;
        border: none;
        box-shadow: inset 0 0 0 1px #d9dbe0, 0 1px 2px rgba(28, 32, 36, 0.06);
      }

      .cw-btn-secondary:hover {
        background-color: #fbfcfd;
      }

      /* =========================================================================
         Hero Showcase & Interactive Product Tour (Chatwoot 1:1 Architecture)
         ========================================================================= */
      .hero-section {
        position: relative;
        isolation: isolate;
        background-color: #ffffff;
        overflow: hidden;
        padding: 0;
      }

      .hero-cobalt {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        display: block;
        pointer-events: none;
        image-rendering: pixelated;
      }

      .hero-inner {
        position: relative;
        padding-bottom: clamp(40px, 5vw, 64px);
      }

      .hero-content {
        position: relative;
        padding: clamp(44px, 5.4vw, 76px) 24px clamp(36px, 4vw, 56px) 24px;
      }

      /* Announcement Pill */
      .hero-announcement-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        margin-left: -8px;
        padding: 6px 14px 6px 10px;
        border-radius: 9999px;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: var(--ink);
        background-color: #ffffff;
        border: 1px solid var(--line);
        text-decoration: none;
        transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
        box-shadow: 0 1px 2px rgba(28, 32, 36, 0.04);
      }
      .hero-announcement-pill:hover {
        background-color: #f2f3f5;
        border-color: #d1d5db;
      }
      .hero-pill-icon-wrap {
        position: relative;
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }
      .hero-pill-icon {
        width: 17px;
        height: 17px;
        color: var(--ink);
      }
      .hero-blink {
        position: absolute;
        top: -1px;
        right: -2px;
        width: 6px;
        height: 6px;
        border-radius: 9999px;
        background-color: #3DBD8C;
        box-shadow: 0 0 0 2px #ffffff;
        animation: hero-blink 1.4s steps(1) infinite;
      }
      @keyframes hero-blink {
        0%, 49% { opacity: 1; }
        50%, 100% { opacity: 0.2; }
      }
      .hero-pill-arrow {
        width: 16px;
        height: 16px;
        color: var(--ink);
        transition: transform 0.15s ease;
      }
      .hero-announcement-pill:hover .hero-pill-arrow {
        transform: translateX(2px);
      }

      /* Headline */
      .hero-headline {
        margin: 0 0 16px 0;
        font-family: var(--font-display);
        font-size: clamp(34px, 5vw, 64px);
        line-height: 1.02;
        letter-spacing: -0.045em;
        font-weight: 800;
        color: var(--ink);
      }
      .hero-headline-line {
        display: block;
      }

      /* Subtitle */
      .hero-subheading {
        margin: 0 0 28px 0;
        max-width: 820px;
        font-size: clamp(17px, 1.55vw, 20px);
        line-height: 1.5;
        color: var(--ink-secondary);
        text-wrap: pretty;
      }

      /* CTA Row */
      .hero-cta-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        margin-top: 28px;
      }
      .hero-micro-trust {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: 6px;
        font-size: 13px;
        color: var(--ink-muted);
      }
      .trust-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
      }
      .trust-dot {
        color: #d1d5db;
      }

      /* Showcase Container Box */
      .hero-showcase-card {
        position: relative;
        z-index: 4;
        margin: 0 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        border-radius: 12px;
        background-color: #ffffff;
        box-shadow: inset 0 0 0 1px #E4E5E9, 0 8px 32px -4px rgba(28, 32, 36, 0.08);
      }

      /* Floating Badges */
      .hero-floating-badges {
        position: absolute;
        top: -40px;
        right: 24px;
        z-index: 6;
        display: flex;
        align-items: center;
        gap: 20px;
        pointer-events: none;
      }
      .hero-float {
        animation: hero-float 4.5s ease-in-out infinite;
      }
      .hero-float--late {
        animation-delay: 0.8s;
      }
      @keyframes hero-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
      }
      .hero-badge {
        box-shadow: 0 0 0 1.5px #0f1113, 0 4px 14px rgba(0, 0, 0, 0.08);
        filter: drop-shadow(3px 3px 0 #0f1113);
        border-radius: 8px;
        background: #ffffff;
        padding: 6px 12px 6px 8px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .badge-meta {
        transform: rotate(-3deg) translateY(2px);
      }
      .badge-ai {
        transform: rotate(3deg) translateY(-3px);
      }
      .badge-icon-box {
        flex-shrink: 0;
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 5px;
        color: #ffffff;
      }
      .badge-icon-box svg {
        width: 16px;
        height: 16px;
        display: block;
      }
      .bg-wa {
        background-color: #25D366;
      }
      .bg-purple {
        background-color: #7353ba;
      }
      .badge-text-box {
        display: flex;
        flex-direction: column;
        gap: 1px;
      }
      .badge-label-top {
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6E7279;
        line-height: 1;
      }
      .badge-label-main {
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        white-space: nowrap;
        line-height: 1.2;
      }

      /* 4 Product Tour Tabs */
      .hero-tour-tabs {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        border-radius: 8px;
        overflow: hidden;
        background-color: #E6E8EB;
        box-shadow: 0 0 0 1px #E6E8EB;
      }
      .hero-tab-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        min-width: 0;
        padding: 12px 16px;
        background-color: #FBFCFD;
        border: none;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.2s ease-out;
        outline: none;
      }
      .hero-tab-btn::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background-color: transparent;
        transition: background-color 0.2s ease-out;
      }
      .hero-tab-btn.active::after {
        background-color: #E6E8EB;
      }
      .hero-tab-btn:hover {
        background-color: #ffffff;
      }
      .hero-tab-btn.active {
        background-color: #ffffff;
      }
      .hero-tab-indicator {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        opacity: 0;
        z-index: 1;
        transform: scaleX(0);
        transform-origin: left center;
        transition: opacity 0.2s ease-out;
      }
      html[dir="rtl"] .hero-tab-indicator {
        transform-origin: right center;
      }
      .hero-tab-btn.active .hero-tab-indicator {
        opacity: 1;
        animation: hero-tab-progress 6s linear forwards;
      }
      #hero-showcase-frame:hover .hero-tab-btn.active .hero-tab-indicator {
        animation-play-state: paused;
      }
      @keyframes hero-tab-progress {
        0% { transform: scaleX(0); }
        100% { transform: scaleX(1); }
      }

      /* Indicator colors by tab */
      .hero-tab-btn[data-tab="conversations"] .hero-tab-indicator { background-color: #1875EE; }
      .hero-tab-btn[data-tab="captain"] .hero-tab-indicator { background-color: #7E5BDC; }
      .hero-tab-btn[data-tab="contacts"] .hero-tab-indicator { background-color: #12946A; }
      .hero-tab-btn[data-tab="help-center"] .hero-tab-indicator { background-color: #C98A0E; }

      .hero-tab-tile {
        flex-shrink: 0;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background-color: #EEEFF2;
        color: #80838D;
        transition: background 0.25s ease-out, transform 0.25s ease-out, box-shadow 0.25s ease-out, color 0.25s ease-out;
      }
      .hero-tab-tile svg {
        width: 16px;
        height: 16px;
        display: block;
      }
      .hero-tab-btn.active[data-tab="conversations"] .hero-tab-tile {
        background-color: #1875EE;
        color: #ffffff;
        box-shadow: 2px 2px 0 #0F2459;
        transform: rotate(-5deg);
      }
      .hero-tab-btn.active[data-tab="captain"] .hero-tab-tile {
        background-color: #7E5BDC;
        color: #ffffff;
        box-shadow: 2px 2px 0 #2C1D52;
        transform: rotate(5deg);
      }
      .hero-tab-btn.active[data-tab="contacts"] .hero-tab-tile {
        background-color: #12946A;
        color: #ffffff;
        box-shadow: 2px 2px 0 #0B3527;
        transform: rotate(-5deg);
      }
      .hero-tab-btn.active[data-tab="help-center"] .hero-tab-tile {
        background-color: #C98A0E;
        color: #ffffff;
        box-shadow: 2px 2px 0 #5C3D05;
        transform: rotate(5deg);
      }

      .hero-tab-label {
        min-width: 0;
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.015em;
        line-height: 1.2;
        color: #80838D;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.2s ease-out;
      }
      .hero-tab-btn.active .hero-tab-label {
        color: var(--ink);
      }

      /* Viewport and 3020x1710 Aspect Ratio Container */
      .hero-viewport-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 3020 / 1710;
        border-radius: 8px;
        overflow: hidden;
        background-color: #ffffff;
        box-shadow: 0 0 0 1px #E0E2E6;
      }
      .hero-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        transform: scale(0.995);
        pointer-events: none;
      }
      .hero-panel.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        pointer-events: auto;
      }
      .hero-panel img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
      }

      @media (max-width: 768px) {
        .hero-tab-btn {
          padding: 10px 8px;
          justify-content: center;
        }
        .hero-tab-label {
          display: none;
        }
        .hero-floating-badges {
          display: none;
        }
        .hero-showcase-card {
          margin: 0 12px;
          padding: 8px;
        }
        .hero-content {
          padding-left: 12px;
          padding-right: 12px;
        }
      }

      /* 2. Client Logo Marquee Strip */
      .marquee-section {
        background-color: #ffffff;
      }
      .marquee-divider {
        background-color: #ffffff;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .marquee-frame {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding-top: 26px;
        padding-bottom: 28px;
        padding-left: 0;
        padding-right: 0;
        border-left: 1px solid var(--line-subtle);
        border-right: 1px solid var(--line-subtle);
        background-color: #ffffff;
        overflow: hidden;
      }
      .marquee-label {
        position: relative;
        margin: 0;
        padding-inline: 24px;
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        color: var(--ink-subtle);
      }
      .logo-dots {
        position: absolute;
        inset: 6px;
        pointer-events: none;
        background-image: radial-gradient(#e9ebee 0.8px, transparent 1.2px);
        background-repeat: space;
        background-size: 6px 6px;
      }
      .logo-mask {
        position: relative;
        width: 100%;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
      }
      .logo-track {
        display: flex;
        align-items: center;
        width: max-content;
        animation: logo-marquee 54s linear infinite;
        will-change: transform;
      }
      .logo-track:hover {
        animation-play-state: paused;
      }
      .logo-img {
        box-sizing: content-box;
        display: block;
        filter: grayscale(1) contrast(1.15);
        flex-shrink: 0;
        height: 40px;
        max-width: none;
        opacity: 0.85;
        padding-inline-end: 28px;
        width: auto;
      }
      @keyframes logo-marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
      html[dir="rtl"] .logo-track {
        animation-name: logo-marquee-rtl;
      }
      @keyframes logo-marquee-rtl {
        0% { transform: translateX(0); }
        100% { transform: translateX(50%); }
      }
      @media (prefers-reduced-motion: reduce) {
        .logo-track {
          animation: none;
        }
      }

      /* Micro badges */
      .cw-eyebrow {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--brand);
      }

      /* Navigation (1:1 with chatwoot.com) */
      .cw-navbar {
        position: sticky;
        top: 0;
        z-index: 100;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(16px) saturate(1.8);
        -webkit-backdrop-filter: blur(16px) saturate(1.8);
        border-bottom: 1px solid var(--line-light);
      }

      .navbar-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 24px;
        min-height: 60px;
        padding: 8px 24px;
      }

      .brand-logo {
        flex-shrink: 0;
      }

      .brand-logo .logo-image {
        height: 24px;
        width: auto;
        display: block;
      }

      .nav-divider {
        display: none;
        width: 1px;
        height: 22px;
        background-color: var(--line-light);
      }

      @media (min-width: 1024px) {
        .nav-divider {
          display: block;
        }
      }

      .nav-menu {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1;
        min-width: 0;
      }

      .nav-link {
        font-size: 13.5px;
        font-weight: 500;
        line-height: 20.25px;
        color: var(--ink-muted);
        padding: 6px 10px;
        border-radius: 7px;
        transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .nav-link:hover {
        color: var(--ink);
        background-color: #f4f4f6;
      }

      .nav-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-inline-start: auto;
      }

      /* Mega-menu dropdown (1:1 with chatwoot.com) */
      .nav-dropdown {
        position: static;
      }

      .nav-dropdown-trigger {
        display: flex;
        align-items: center;
        gap: 5px;
        background: transparent;
        border: none;
        font-family: inherit;
        cursor: pointer;
      }

      .nav-chevron {
        flex-shrink: 0;
        transition: transform 0.15s ease;
      }

      .nav-dropdown-trigger[aria-expanded="true"] .nav-chevron {
        transform: rotate(180deg);
      }

      .nav-panel {
        position: fixed;
        inset-inline: 0;
        top: 61px;
        z-index: 30;
        width: 100%;
      }

      .nav-panel[hidden] {
        display: none;
      }

      .nav-panel-inner {
        overflow: hidden;
        background-color: #ffffff;
        border-bottom: 1px solid var(--line-light);
        box-shadow: 0 24px 48px -24px rgba(16, 24, 40, 0.18);
      }

      .nav-panel-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .nav-panel-grid--2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      }

      .nav-panel-items--2up {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 8px;
      }

      .nav-panel-col {
        padding: 28px 12px;
        border-inline-start: 1px solid var(--line-light);
      }

      .nav-panel-col:first-child {
        border-inline-start: none;
      }

      .nav-panel-group + .nav-panel-group {
        margin-top: 20px;
      }

      .nav-eyebrow {
        padding: 0 12px 8px;
        font-size: 10px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #6e7279;
      }

      .nav-panel-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 6px;
        transition: background-color 0.15s ease;
      }

      .nav-panel-item:hover {
        background-color: #f6f6f8;
      }

      .nav-panel-icon {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border-radius: 6px;
        background-color: #ffffff;
        color: var(--ink);
        box-shadow: inset 0 0 0 1px #e6e8eb;
        transition: color 0.15s ease;
      }

      .nav-panel-item:hover .nav-panel-icon {
        color: var(--brand);
      }

      .nav-panel-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        flex: 1;
        padding-top: 1px;
      }

      .nav-panel-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .nav-panel-title {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.375;
        color: var(--ink);
      }

      .nav-panel-desc {
        font-size: 13px;
        line-height: 1.375;
        color: var(--ink-muted);
      }

      .nav-model-badge {
        display: inline-flex;
        align-items: center;
        padding: 0 6px;
        font-size: 10px;
        font-weight: 600;
        line-height: 16px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #0f1113;
        background-color: #ffffff;
        border: 1px solid #0f1113;
        border-radius: 4px;
        box-shadow: 1.5px 1.5px 0 #0f1113;
      }

      .nav-signin {
        display: inline-block;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 20.25px;
        color: var(--ink-muted);
        padding: 7px 8px;
        transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .nav-signin:hover {
        color: var(--ink);
      }

      /* Mobile Menu Toggle Button */
      .mobile-menu-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        padding: 8px;
        background: transparent;
        border: none;
        border-radius: 7px;
        color: var(--ink-muted);
        cursor: pointer;
        gap: 4px;
        margin-inline-end: -8px;
        transition: background-color 0.15s ease, color 0.15s ease;
      }

      .mobile-menu-toggle:hover {
        background-color: #f4f4f6;
        color: var(--ink);
      }

      .hamburger-bar {
        width: 20px;
        height: 2px;
        background-color: currentColor;
        border-radius: 1px;
        transition: transform 0.25s ease, opacity 0.25s ease;
      }

      .mobile-menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      .mobile-menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
        opacity: 0;
      }

      .mobile-menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* Mobile Menu Drawer */
      .mobile-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.12);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
        opacity: 0;
      }

      .mobile-menu.open {
        max-height: calc(100vh - 61px);
        overflow-y: auto;
        opacity: 1;
      }

      .mobile-menu-inner {
        padding: 16px 24px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .mobile-nav-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .mobile-nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        font-size: 15px;
        font-weight: 500;
        color: var(--ink);
        border-radius: 8px;
        text-decoration: none;
        transition: background-color 0.15s ease, color 0.15s ease;
      }

      .mobile-nav-link:hover, .mobile-nav-link:focus {
        background-color: var(--bg-muted);
        color: var(--brand);
      }

      .mobile-nav-link.active {
        color: var(--brand);
        font-weight: 600;
        background-color: rgba(24, 117, 238, 0.08);
      }

      .mobile-nav-link .chevron-icon {
        color: var(--ink-subtle);
        transition: transform 0.15s ease, color 0.15s ease;
      }

      .mobile-nav-link:hover .chevron-icon {
        color: var(--brand);
        transform: translateX(3px);
      }

      .mobile-nav-group > summary {
        cursor: pointer;
        list-style: none;
      }

      .mobile-nav-group > summary::-webkit-details-marker {
        display: none;
      }

      .mobile-nav-group[open] > summary .chevron-icon {
        transform: rotate(90deg);
        color: var(--brand);
      }

      .mobile-nav-sublinks {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 2px 0 6px;
      }

      .mobile-nav-sublink {
        display: block;
        padding: 9px 14px 9px 26px;
        font-size: 14px;
        font-weight: 500;
        color: var(--ink-subtle);
        border-radius: 8px;
        text-decoration: none;
        transition: background-color 0.15s ease, color 0.15s ease;
      }

      .mobile-nav-sublink:hover, .mobile-nav-sublink:focus {
        background-color: var(--bg-muted);
        color: var(--brand);
      }

      .mobile-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--line-light);
      }

      .cw-badge-ai {
        display: inline-flex;
        align-items: center;
        padding: 2px 6px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.05em;
        background: linear-gradient(135deg, #1875ee 0%, #7c3aed 100%);
        color: #ffffff;
        border-radius: 4px;
      }

      /* Visually Hidden Screen Reader Only */
      .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border-width: 0 !important;
      }

      /* =========================================================================
         Footer (Chatwoot 1:1 Architecture)
         ========================================================================= */
      .cw-footer-wrap {
        position: relative;
        z-index: 20;
        background-color: #ffffff;
        border-top: 1px solid var(--line, #EDEDF0);
        margin-top: auto;
      }

      .footer-top-grid {
        display: grid;
        gap: 32px 28px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 48px 24px 32px;
      }
      @media (min-width: 640px) {
        .footer-top-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @media (min-width: 992px) {
        .footer-top-grid {
          grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr));
        }
      }

      .footer-brand-col {
        grid-column: span 2 / span 2;
        display: flex;
        flex-direction: column;
        gap: 18px;
        min-width: 0;
      }
      @media (min-width: 640px) and (max-width: 991px) {
        .footer-brand-col {
          grid-column: span 3 / span 3;
          padding-bottom: 8px;
        }
      }
      @media (min-width: 992px) {
        .footer-brand-col {
          grid-column: span 1 / span 1;
        }
      }

      .footer-brand-logo {
        display: inline-flex;
        align-items: center;
        height: 28px;
        align-self: flex-start;
      }
      .footer-logo-img {
        height: 28px;
        width: auto;
        display: block;
      }

      .footer-brand-desc {
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        color: #60646C;
        max-width: 270px;
      }

      .footer-social-row {
        display: flex;
        width: fit-content;
        border: 1px solid var(--line, #EDEDF0);
        border-radius: 8px;
        overflow: hidden;
      }
      .footer-social-row > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        color: #60646C;
        border-inline-end: 1px solid var(--line, #EDEDF0);
        text-decoration: none;
        transition: background-color 0.15s ease, color 0.15s ease;
      }
      .footer-social-row > a:last-child {
        border-inline-end: none;
      }
      .footer-social-row > a:hover {
        background-color: #F4F4F6;
        color: #0F1113;
      }
      .footer-social-icon {
        width: 15px;
        height: 15px;
      }

      .footer-col-eyebrow {
        font-family: var(--font-label, sans-serif);
        font-size: 10.5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #60646C;
        margin: 0 0 12px 0;
        display: block;
      }

      .footer-link-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
      .footer-link-list a {
        font-size: 13.5px;
        line-height: 1.5;
        color: #60646C;
        text-decoration: none;
        transition: color 0.15s ease;
      }
      .footer-link-list a:hover {
        color: #0F1113;
      }

      /* 2. Bottom Legal & Language Bar */
      .footer-bottom-bar {
        border-top: 1px solid var(--line, #EDEDF0);
        padding: 16px 24px 36px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 18px;
        font-family: var(--font-label, sans-serif);
        font-size: 10.5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #60646C;
      }
      .footer-bottom-bar a {
        color: #60646C;
        text-decoration: none;
        transition: color 0.15s ease;
      }
      .footer-bottom-bar a:hover {
        color: #0F1113;
      }

      .footer-bottom-copy {
        color: #60646C;
      }

      .footer-bottom-right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 18px;
        margin-inline-start: auto;
      }

      .footer-lang-wrap {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding-inline-start: 14px;
        border-inline-start: 1px solid var(--line, #EDEDF0);
      }
      .footer-lang-globe {
        width: 13px;
        height: 13px;
        color: #60646C;
        flex-shrink: 0;
      }
      .footer-lang-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: transparent;
        color: #60646C;
        font-family: var(--font-label, sans-serif);
        font-size: 10.5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        border: 0;
        outline: none;
        padding-inline-end: 14px;
        padding-inline-start: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%2360646C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right center;
        transition: color 0.15s ease;
      }
      .footer-lang-select:hover {
        color: #0F1113;
      }

      /* RTL Layout Support */
      html[dir="rtl"] body {
        direction: rtl;
        text-align: right;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      }
      html[dir="rtl"] .nav-actions {
        flex-direction: row-reverse;
      }
      html[dir="rtl"] .hero-ctas {
        flex-direction: row-reverse;
      }
      html[dir="rtl"] .footer-top-grid {
        text-align: start;
      }
      html[dir="rtl"] .footer-lang-select {
        background-position: left center;
      }

      /* Announcement Bar */
      .announcement-bar {
        background-color: #fafafc;
        border-bottom: 1px solid var(--line-light);
        padding: 8px 0;
        font-size: 13px;
      }
      .announcement-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        text-align: center;
      }
      .announcement-badge {
        background-color: var(--brand);
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        letter-spacing: 0.05em;
      }
      .announcement-text {
        color: var(--ink-secondary);
      }
      .announcement-link {
        color: var(--brand);
        font-weight: 600;
        text-decoration: none;
      }
      .announcement-link:hover {
        text-decoration: underline;
      }

      @media (max-width: 1023px) {
        .nav-menu {
          display: none;
        }
        .mobile-menu-toggle {
          display: flex;
        }
        .mobile-menu {
          display: block;
        }
      }

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

      @media (max-width: 639px) {
        .nav-signin,
        .nav-actions .cw-btn-primary {
          display: none;
        }
      }

      /* =========================================================================
         ADDITIONAL PAGE SECTIONS (AI, CHANNELS, WORKFLOWS, PRICING, FAQ)
         ========================================================================= */
/* Landing Global Layout */
  .landing-page {
    width: 100%;
    color: var(--ink);
    background-color: #ffffff;
    overflow-x: hidden;
  }

  .cw-pixel-band {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    position: relative;
    height: 40px;
    background-color: #ffffff;
    background-image: url("/images/home/pixel-band.svg");
    background-size: 240px 40px;
    background-repeat: repeat;
    background-position: 0 0;
    border: 1px solid #EDEDF0;
  }

  /* Section Pennant Tag (1:1 with chatwoot.com) */
  .section-tag {
    display: inline-flex;
    text-decoration: none;
    filter: drop-shadow(3px 3px 0 var(--tag-ink, #2C1D52));
    transition: transform 0.2s ease-out;
  }
  .section-tag--link:hover {
    transform: rotate(-3.5deg);
  }
  .section-tag__outline {
    display: flex;
    padding: 2px;
    background: var(--tag-ink, #2C1D52);
    border-start-start-radius: 2px;
    border-end-start-radius: 2px;
  }
  .section-tag__face {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding-left: 4px;
    padding-right: 23px;
    background: #ffffff;
    font-family: var(--font-label, var(--font-sans));
    font-weight: 600;
    font-size: 15px;
    color: #0F1113;
    border-start-start-radius: 2px;
    border-end-start-radius: 2px;
    white-space: nowrap;
  }
  .section-tag__face,
  .section-tag__outline {
    clip-path: polygon(0 0, calc(100% - 11px) 0, calc(100% - 0.6px) calc(50% - 1px), calc(100% - 0.6px) calc(50% + 1px), calc(100% - 11px) 100%, 0 100%);
  }
  html[dir="rtl"] .section-tag__face,
  html[dir="rtl"] .section-tag__outline {
    clip-path: polygon(100% 0, 11px 0, 0.6px calc(50% - 1px), 0.6px calc(50% + 1px), 11px 100%, 100% 100%);
  }
  html[dir="rtl"] .section-tag {
    filter: drop-shadow(-3px 3px 0 var(--tag-ink, #2C1D52));
  }
  html[dir="rtl"] .section-tag--link:hover {
    transform: rotate(3.5deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .section-tag {
      transition: none;
    }
  }

  /* Tag Color Themes */
  .section-tag--purple { --tag-ink: #2C1D52; }
  .section-tag--blue { --tag-ink: #0F2459; }
  .section-tag--green { --tag-ink: #0B3527; }
  .section-tag--yellow { --tag-ink: #5C3D05; }
  .section-tag--dark { --tag-ink: #0F1113; }
  .section-tag--brown { --tag-ink: #3C2B10; }

  .cap-tag-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    background-color: #7E5BDC;
    color: #ffffff;
  }
  .cap-tag-icon svg {
    width: 14px;
    height: 14px;
    color: #ffffff;
  }

  .chan-tag-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    background-color: #1875EE;
    color: #ffffff;
  }
  .chan-tag-icon svg {
    width: 14px;
    height: 14px;
    color: #ffffff;
  }

  .cap-intro {
    position: relative;
    max-width: 820px;
    padding-inline: 1.5rem;
    padding-top: clamp(32px, 3.4vw, 44px);
    padding-bottom: clamp(22px, 2.4vw, 28px);
  }
  .cap-heading {
    margin-top: 18px;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--ink);
    text-wrap: balance;
  }
  .cap-subheading {
    margin: 0;
    max-width: 60ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  /* Captain 2-Column Split: Accordion + Diagram Stage */
  .cap-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background-color: var(--line-light, #ededf0);
    border-top: 1px solid var(--line-light, #ededf0);
  }
  .cap-step-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 2 1 300px;
    padding: 12px 0;
    background-color: #ffffff;
  }
  .cap-step-list:hover .cap-progress {
    animation-play-state: paused;
  }
  .cap-step {
    position: relative;
    display: block;
    width: 100%;
    padding: 38px 32px 38px 24px;
    text-align: start;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
  }
  .cap-step:focus-visible {
    box-shadow: inset 0 0 0 2px #7353BA;
  }
  .cap-step-divider {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background-color: var(--line-light, #ededf0);
    pointer-events: none;
  }
  .cap-step__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .cap-step__num {
    color: #60646c;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    transition: color 0.18s ease-out;
    width: 22px;
    flex-shrink: 0;
  }
  .cap-step__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: #3f434a;
    transition: color 0.18s ease-out;
  }
  .cap-step__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out;
  }
  .cap-step__reveal-inner {
    overflow: hidden;
  }
  .cap-step__text {
    display: block;
    color: #80838d;
    font-size: 14px;
    line-height: 1.6;
    padding-top: 3px;
    padding-inline-start: 36px;
    transition: color 0.18s ease-out;
    text-wrap: pretty;
  }
  .cap-step.is-active .cap-step__title,
  .cap-step:hover .cap-step__title {
    color: #1c2024;
  }
  .cap-step.is-active .cap-step__num {
    color: #7353ba;
  }
  .cap-step.is-active .cap-step__text {
    color: #60646c;
  }
  .cap-step.is-active .cap-step__reveal {
    grid-template-rows: 1fr;
  }
  .cap-progress-wrap {
    position: absolute;
    inset-inline-start: 24px;
    inset-inline-end: 32px;
    bottom: -1px;
    z-index: 1;
    height: 2px;
    overflow: hidden;
  }
  .cap-progress {
    position: absolute;
    inset: 0;
    background-color: #7353BA;
    animation: cap-progress-step 6s linear forwards;
    transform-origin: 0 50%;
  }
  html[dir="rtl"] .cap-progress {
    transform-origin: 100% 50%;
  }
  @keyframes cap-progress-step {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }

  /* Captain Visual Canvas / Diagram Stage */
  .cap-stage-col {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 360px;
    padding: 24px;
    background-color: #ffffff;
    flex: 3 1 600px;
  }
  @media (min-width: 640px) {
    .cap-stage-col {
      min-height: 580px;
    }
  }
  .cap-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 44px;
    z-index: 5;
    pointer-events: none;
    animation: cap-float 4.5s ease-in-out infinite;
  }
  .cap-badge__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 6px;
    background: #ffffff;
    transform: rotate(4deg);
    box-shadow: 0 0 0 1.5px #2C1D52;
    filter: drop-shadow(3px 3px 0 #2C1D52);
  }
  .cap-badge__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background-color: #7E5BDC;
    color: #ffffff;
  }
  .cap-badge__icon svg {
    width: 15px;
    height: 15px;
    color: #ffffff;
  }
  html[dir="rtl"] .cap-badge__pill {
    transform: rotate(-4deg);
    filter: drop-shadow(-3px 3px 0 #2C1D52);
  }
  .cap-badge__content {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .cap-badge__eyebrow {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6E7279;
    line-height: 1.15;
  }
  .cap-badge__title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: #0F1113;
    white-space: nowrap;
    line-height: 1.2;
  }
  @keyframes cap-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0, -5px); }
  }
  .cap-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .cap-stage-wrap {
    position: relative;
    flex: 1 1 0%;
    border-radius: 6px;
    background-color: transparent;
  }
  .cap-stage-inner {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    height: 100%;
    padding: 24px;
  }
  .cap-fit-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 500px;
  }
  .cap-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 560px;
    height: 500px;
    transform-origin: top left;
  }
  .cap-wires-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .cap-corner-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    pointer-events: none;
    border-radius: 0;
  }
  .cap-wire {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s ease-in-out;
  }
  .cap-wire.is-active {
    stroke-dashoffset: 0;
  }
  .cap-anchor {
    position: absolute;
    z-index: 4;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    margin-inline-start: -4px;
    border-radius: 9999px;
    background-color: #ffffff;
    border: 1.5px solid #C9CCD2;
    transition: border-color 0.4s ease-out;
  }
  .cap-anchor.is-active {
    border-color: #2C1D52;
  }
  .cap-anchor-sources { left: 21.429%; top: calc(43.2% - 17px); }
  .cap-anchor-conversations { left: 50%; top: calc(79.8% - 17px); }
  .cap-anchor-details { left: 78.571%; top: calc(43.2% - 17px); }
  .cap-anchor-details-bot { left: 78.571%; top: calc(60% + 17px); }
  .cap-anchor-faq-loop-r { left: calc(50% + 110px); top: 88.2%; }
  .cap-anchor-faq-loop-l { left: calc(50% - 110px); top: 88.2%; }
  .cap-anchor-faq-bot { left: 21.429%; top: calc(60% + 17px); }

  .cap-node-center {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background-color: #7E5BDC;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px rgba(44, 29, 82, 0.1), 0 12px 24px -10px rgba(44, 29, 82, 0.45);
  }
  .cap-node-center svg {
    width: 32px;
    height: 32px;
    color: #ffffff;
    fill: currentColor;
  }

  .cap-chip {
    position: absolute;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    color: var(--ink);
    box-shadow: 0 0 0 1px #E3E4E8, 0 4px 10px -8px rgba(44, 29, 82, 0.12);
    transition: box-shadow 0.4s ease-out;
  }
  .cap-chip-h {
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    white-space: nowrap;
  }
  .cap-chip-h svg {
    width: 15px;
    height: 15px;
    color: #7353BA;
    flex-shrink: 0;
  }
  .cap-chip--late {
    transition: background 0.4s ease-out 0.5s, box-shadow 0.4s ease-out 0.5s;
  }
  .cap-chip.is-active {
    box-shadow: 0 0 0 1px rgba(126, 91, 220, 0.5), 0 8px 18px -8px rgba(44, 29, 82, 0.28);
  }
  .cap-chip-source-1 { left: 4%; top: 43.2%; }
  .cap-chip-source-2 { left: 4%; top: 51.6%; }
  .cap-chip-source-faq { left: 4%; top: 60%; }
  .cap-chip-memory {
    left: 78.571%;
    top: calc(43.2% - 17px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 134px;
    height: calc(16.8% + 34px);
    padding: 12px 14px;
  }
  .cap-chip-memory svg {
    width: 13px;
    height: 13px;
    color: #7353BA;
    flex-shrink: 0;
  }
  .cap-chip-msg {
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    width: 220px;
    height: 34px;
    padding-inline-start: 6px;
    padding-inline-end: 12px;
    white-space: nowrap;
  }
  .cap-msg-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    color: var(--ink);
  }
  .cap-msg-avatar--mr { background-color: #FFE7A0; }
  .cap-msg-avatar--jl { background-color: #D2E1FA; }
  .cap-msg-avatar--sk { background-color: #DCCFFF; }
  .cap-chip-msg-1 { left: 50%; top: 79.8%; }
  .cap-chip-msg-2 { left: 50%; top: 88.2%; }
  .cap-chip-msg-3 { left: 50%; top: 96.6%; }

  .cap-label {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    background: #fff;
    color: #3F434A;
    box-shadow: inset 0 0 0 1px #E0E2E6;
    transition: background 0.4s ease-out, color 0.4s ease-out, box-shadow 0.4s ease-out;
  }
  .cap-label.is-active {
    background: #5B3FA8;
    color: #ffffff;
    box-shadow: none;
  }
  .cap-label-learns { left: 35%; top: 28.8%; }
  .cap-label-responds { left: 50%; top: 56%; }
  .cap-label-remembers { left: 65%; top: 28.8%; }
  .cap-label-fills-gaps { left: 21.429%; top: 73%; }
  .cap-label-camera {
    left: 78.571%;
    top: 73%;
    display: grid;
    place-items: center;
    padding: 5px 8px;
    background-color: #F0F0F3;
    color: #3F434A;
  }
  html[dir="rtl"] .cap-chip { direction: rtl; }

  /* Middle Funnel Rules Banner */
  .home-rules {
    height: 25px;
    background-image:
      linear-gradient(var(--rule, #CBB8FF), var(--rule, #CBB8FF)),
      linear-gradient(var(--rule, #CBB8FF), var(--rule, #CBB8FF)),
      linear-gradient(var(--rule, #CBB8FF), var(--rule, #CBB8FF)),
      linear-gradient(var(--rule, #CBB8FF), var(--rule, #CBB8FF));
    background-repeat: no-repeat;
  }
  .home-rules--in {
    background-position: 0 0, 0 5px, 0 11px, 0 19px;
    background-size: 100% 1px, 100% 2px, 100% 4px, 100% 6px;
  }
  .home-rules--out {
    background-position: 0 0, 0 10px, 0 18px, 0 24px;
    background-size: 100% 6px, 100% 4px, 100% 2px, 100% 1px;
  }
  .h-\[25px\] { height: 25px; }
  .cap-funnel-rules {
    position: relative;
    margin-inline: auto;
    max-width: 1200px;
    height: 25px;
    border-inline: 1px solid var(--line);
  }
  .cap-banner-wrap {
    position: relative;
    z-index: 3;
  }
  .cap-banner-wings {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  .cap-banner-wing-start {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    justify-content: flex-end;
    overflow: hidden;
  }
  .cap-banner-wing-end {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
  }
  .cap-banner-stripe {
    flex-shrink: 0;
    width: 100%;
    max-width: 1200px;
    background-color: #CBB8FF;
  }
  .cap-banner-frame {
    border-inline: 1px solid rgba(44, 29, 82, 0.18) !important;
  }
  .cap-pixels {
    display: block;
    flex-shrink: 0;
    width: 80px;
    height: 100%;
    background-size: 80px 32px;
  }
  .cap-pixels--start {
    background-image: url(/images/home/redesign/captain/pixel-column-start.svg);
  }
  .cap-pixels--end {
    background-image: url(/images/home/redesign/captain/pixel-column-end.svg);
  }
  .cap-pennant {
    position: absolute;
    inset-inline-start: -10px;
    top: -27px;
    z-index: 5;
    display: flex;
    border-radius: 2px;
    filter: drop-shadow(3px 3px 0 #2c1d52);
    transform: rotate(-3.5deg);
    transition: transform 0.2s ease-out;
    text-decoration: none;
  }
  .cap-pennant:hover {
    transform: rotate(-7deg);
  }
  .cap-pennant:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #2C1D52;
  }
  .cap-pennant__outline {
    display: flex;
    padding: 1.5px;
    background-color: #2C1D52;
    border-radius: 2px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, calc(100% - 0.6px) calc(50% - 1px), calc(100% - 0.6px) calc(50% + 1px), calc(100% - 10px) 100%, 0 100%);
  }
  .cap-pennant__face {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding-inline-start: 10px;
    padding-inline-end: 22px;
    background-color: #ffffff;
    border-end-start-radius: 2.5px;
    border-start-start-radius: 2.5px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, calc(100% - 0.6px) calc(50% - 1px), calc(100% - 0.6px) calc(50% + 1px), calc(100% - 10px) 100%, 0 100%);
  }
  .cap-pennant__mark {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: #2C1D52;
  }
  .cap-pennant__mark svg {
    width: 18px;
    height: 18px;
  }
  .cap-pennant__brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16.5px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #2C1D52;
    white-space: nowrap;
  }
  .cap-grid {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    pointer-events: none;
    background-image:
      linear-gradient(90deg, rgba(44, 29, 82, 0.07) 1px, transparent 0),
      linear-gradient(rgba(44, 29, 82, 0.07) 1px, transparent 0);
    background-size: 80px 80px;
    inset-inline-start: calc(40% + 0.6px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
    mask-image: linear-gradient(90deg, transparent, #000 60%);
  }
  .cap-text-rule {
    position: absolute;
    inset-inline-end: -1px;
    top: -6px;
    bottom: -6px;
    width: 1px;
    pointer-events: none;
    background: rgba(44, 29, 82, 0.28);
  }
  .cap-banner-body {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1px;
  }
  .cap-banner-text-col {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    flex: 2 1 300px;
    padding: 24px;
  }
  .cap-banner-text-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 320px;
  }
  .cap-banner-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: #2C1D52;
    text-wrap: balance;
  }
  .cap-banner-desc {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: #2C1D52;
    max-width: 32ch;
    text-wrap: pretty;
  }
  .cap-banner-funnel-col {
    position: relative;
    min-width: 0;
    flex: 3 1 420px;
    padding-top: clamp(32px, 3.4vw, 40px);
    padding-bottom: clamp(26px, 3vw, 34px);
    padding-inline-start: 0;
    padding-inline-end: clamp(40px, 5vw, 64px);
  }
  .cap-funnel-stage {
    position: relative;
    height: 150px;
  }
  .cap-funnel-stage svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  html[dir="rtl"] .cap-funnel-stage svg {
    transform: scaleX(-1);
  }
  .cap-funnel-pill {
    position: absolute;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 8px;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(44, 29, 82, 0.12), 0 4px 10px -6px rgba(44, 29, 82, 0.35);
    font-family: var(--font-sans);
    font-size: 12px;
    color: #2C1D52;
    white-space: nowrap;
  }
  .cap-funnel-pill-1 { inset-inline-start: 18px; top: 33%; }
  .cap-funnel-pill-2 { inset-inline-end: calc(50% + 18px); top: 90.5%; }
  .cap-funnel-pill-3 { inset-inline-start: calc(50% + 18px); top: 37.5%; }
  .cap-funnel-pill-4 { inset-inline-end: 18px; top: 88.5%; }
  html[dir="rtl"] .cap-pennant {
    filter: drop-shadow(-3px 3px 0 #2c1d52);
    transform: rotate(3.5deg);
  }
  html[dir="rtl"] .cap-pennant:hover {
    transform: rotate(7deg);
  }
  html[dir="rtl"] .cap-pennant__face,
  html[dir="rtl"] .cap-pennant__outline {
    clip-path: polygon(100% 0, 10px 0, 0.6px calc(50% - 1px), 0.6px calc(50% + 1px), 10px 100%, 100% 100%);
  }
  html[dir="rtl"] .cap-grid {
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 60%);
    mask-image: linear-gradient(270deg, transparent, #000 60%);
  }

  /* Bottom 3 Bento Cards */
  .cap-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    padding: 24px 24px clamp(40px, 4vw, 56px) 24px;
    position: relative;
    overflow: hidden;
  }
  .cap-card-col {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .cap-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #E0E2E6;
    background-color: #ffffff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(28, 32, 36, 0.04), 0 8px 24px -12px rgba(28, 32, 36, 0.12);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    outline: none;
  }
  .cap-card:hover {
    box-shadow: 0 1px 2px rgba(126, 86, 240, 0.1), 0 6px 14px -6px rgba(126, 86, 240, 0.14), 0 18px 36px -14px rgba(126, 86, 240, 0.22);
    transform: translateY(-4px);
  }
  .cap-card:focus-visible {
    box-shadow: 0 0 0 2px #7E5BDC;
  }
  .cap-card__header {
    display: flex;
    align-items: stretch;
    height: 36px;
    box-shadow: inset 0 -1px 0 #E6E8EB;
  }
  .cap-card__accent {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0 24px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.1em;
    color: #1c2024;
    transition: color 0.2s ease-out;
  }
  .cap-card__arrow-box {
    display: grid;
    place-items: center;
    width: 36px;
    box-shadow: inset 1px 0 0 #E6E8EB;
  }
  html[dir="rtl"] .cap-card__arrow-box {
    box-shadow: inset -1px 0 0 #E6E8EB;
  }
  .cap-card__arrow {
    color: #80838d;
    transition: color 0.2s ease-out;
  }
  html[dir="rtl"] .cap-card__arrow {
    transform: scaleX(-1);
  }
  .cap-card:hover .cap-card__accent,
  .cap-card:hover .cap-card__arrow {
    color: #8e6cf0;
  }
  .cap-card__preview {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    height: 184px;
    padding: 14px;
    overflow: hidden;
    box-shadow: inset 0 -1px 0 #E6E8EB;
  }
  .cap-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px 24px 24px;
  }
  .cap-card__title {
    margin: 0;
    max-width: 250px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-wrap: balance;
  }
  .cap-card__desc {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-muted, #60646c);
    text-wrap: pretty;
  }
  .cap-card-preview-head {
    position: relative;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 11.5px;
    color: var(--ink-muted);
  }
  .cap-monitor-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding-inline-start: 6px;
    padding-inline-end: 12px;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #E3E4E8, 0 4px 10px -6px rgba(28, 32, 36, 0.16);
  }
  .cap-monitor-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #E6E8EB;
  }
  .cap-monitor-icon svg {
    width: 15px;
    height: 15px;
  }
  .cap-monitor-icon--green { color: #12946A; }
  .cap-monitor-icon--red { color: #E54666; }
  .cap-monitor-icon--amber { color: #C98A0E; }
  .cap-monitor-label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
  }
  .cap-monitor-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cap-monitor-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: #12946A;
  }
  .cap-monitor-count {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .cap-copilot-bubble {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #E3E4E8, 0 6px 14px -8px rgba(44, 29, 82, 0.22);
  }
  .cap-copilot-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 12px;
    color: #5B3FA8;
  }
  .cap-copilot-text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
    text-wrap: pretty;
  }
  .cap-copilot-btn {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 4px;
    background-color: #7E5BDC;
    color: #ffffff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 11.5px;
  }
  .cap-scenarios-preview {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
  }
  .cap-scenarios-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 32px);
    max-width: 300px;
  }
  .cap-scenario-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding-inline-start: 10px;
    padding-inline-end: 12px;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #E3E4E8, 0 4px 10px -6px rgba(28, 32, 36, 0.16);
  }
  .cap-scenario-num {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background-color: #F1ECFF;
    color: #7353BA;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 10.5px;
  }
  .cap-scenario-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cap-scenario-tag {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 12px;
    color: #7353BA;
  }
  .cap-dots {
    background-color: #ffffff;
    background-image: radial-gradient(rgba(28, 32, 36, 0.06) 0.8px, transparent 1.2px);
    background-size: 6px 6px;
  }
  .cap-hatch {
    height: 36px;
    box-shadow: inset 0 1px 0 #E6E8EB;
    background-image: repeating-linear-gradient(90deg, #eeeff2 0 1px, transparent 1px 12px);
    background-repeat: no-repeat;
    background-position: 12px 0;
    background-size: calc(100% - 24px) 100%;
  }
  .cap-hatch--copilot {
    background-position: 12px 0;
    background-size: calc(100% - 24px) 100%;
  }
  .cap-hatch--scenarios {
    background-image: repeating-linear-gradient(270deg, #eeeff2 0 1px, transparent 1px 12px);
    background-position: right 12px top 0;
  }
  .home-card-rules {
    background-image:
      linear-gradient(#e6e8eb, #e6e8eb),
      linear-gradient(#e6e8eb, #e6e8eb),
      linear-gradient(#e6e8eb, #e6e8eb),
      linear-gradient(#e6e8eb, #e6e8eb);
    background-position: 0 20%, 0 40%, 0 60%, 0 80%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    bottom: 0;
    top: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    width: 100vw;
    z-index: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .cap-badge, .cap-progress {
      animation: none;
    }
    .cap-step__num, .cap-step__reveal, .cap-step__text, .cap-step__title,
    .cap-card, .cap-card__accent, .cap-card__arrow, .cap-pennant {
      transition: none;
    }
  }

/* 4. Connected Channels (#channels) */
  .chan-section {
    position: relative;
    background-color: #ffffff;
    border-bottom: 1px solid var(--line-light, #EDEDF0);
    scroll-margin-top: 80px;
  }
  .chan-header-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    border-bottom: 1px solid var(--line-light, #EDEDF0);
    background-color: var(--line-light, #EDEDF0);
  }
  .chan-header-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 256px;
    min-width: 0;
    flex: 3 1 420px;
    background-color: #ffffff;
    padding: clamp(36px, 4vw, 48px) 36px clamp(32px, 3.5vw, 40px);
  }
  .chan-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 0 14px 0 10px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #086DE0;
    background: #ffffff;
    color: #086DE0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(8, 109, 224, 0.08);
    position: relative;
  }
  .chan-tag:hover {
    background-color: #f0f7ff;
  }
  .chan-title {
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 700;
    color: #1c2024;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 14px 0 8px;
  }
  .chan-subtitle {
    font-size: 15px;
    color: #60646c;
    line-height: 1.5;
    margin: 0;
    max-width: 54ch;
    text-wrap: pretty;
  }
  .chan-radar-col {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    flex: 2 1 300px;
    background-color: #ffffff;
    padding: 32px 24px;
    overflow: hidden;
    min-height: 256px;
  }
  .chan-radar-backdrop {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(90deg, #F0F1F3 1px, transparent 0),
      linear-gradient(#F0F1F3 1px, transparent 0);
    background-size: 32px 32px;
    background-position: center center;
  }
  .chan-diamond-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 38px);
    grid-template-rows: repeat(5, 38px);
    gap: 8px;
    width: 230px;
    height: 230px;
    align-content: center;
    justify-content: center;
  }
  .chan-diamond-item {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px #E0E2E6;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    cursor: default;
  }
  .chan-diamond-item:hover {
    transform: translateY(-2px) scale(1.08);
  }
  .chan-diamond-item--sms { grid-row: 1; grid-column: 3; color: #1875EE; }
  .chan-diamond-item--mail { grid-row: 2; grid-column: 2; color: #60646C; }
  .chan-diamond-item--wa {
    grid-row: 2;
    grid-column: 3;
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.5), 0 0 0 4px rgba(37, 211, 102, 0.12), 0 10px 24px -6px rgba(37, 211, 102, 0.5) !important;
  }
  .chan-diamond-item--ig {
    grid-row: 2;
    grid-column: 4;
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(225, 48, 108, 0.5), 0 0 0 4px rgba(225, 48, 108, 0.12), 0 10px 24px -6px rgba(225, 48, 108, 0.5) !important;
  }
  .chan-diamond-item--fb {
    grid-row: 3;
    grid-column: 1;
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(24, 119, 242, 0.5), 0 0 0 4px rgba(24, 119, 242, 0.12), 0 10px 24px -6px rgba(24, 119, 242, 0.5) !important;
  }
  .chan-diamond-item--msg {
    grid-row: 3;
    grid-column: 2;
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(0, 132, 255, 0.5), 0 0 0 4px rgba(0, 132, 255, 0.12), 0 10px 24px -6px rgba(0, 132, 255, 0.5) !important;
    color: #0084FF;
  }
  .chan-diamond-item--hub {
    grid-row: 3;
    grid-column: 3;
    background: #1875EE !important;
    box-shadow: 0 0 0 4px #E4ECFB, 0 10px 20px -8px rgba(24, 117, 238, 0.45) !important;
  }
  .chan-diamond-item--tg { grid-row: 3; grid-column: 4; color: #229ED9; }
  .chan-diamond-item--x { grid-row: 3; grid-column: 5; color: #1C2024; }
  .chan-diamond-item--line { grid-row: 4; grid-column: 2; color: #06C755; }
  .chan-diamond-item--tiktok { grid-row: 4; grid-column: 3; color: #1C2024; }
  .chan-diamond-item--phone { grid-row: 4; grid-column: 4; color: #12946A; }
  .chan-diamond-item--api { grid-row: 5; grid-column: 3; color: #1875EE; }

  .chan-diamond-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
  }

  /* Showcase Row (Stage + Accordion) */
  .chan-showcase-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background-color: var(--line-light, #EDEDF0);
  }
  .chan-stage-col {
    position: relative;
    display: flex;
    min-height: 580px;
    min-width: 0;
    flex: 3 1 420px;
    background-color: #ffffff;
    padding: 32px;
    overflow: hidden;
  }
  .chan-pix-canvas {
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  html[dir="rtl"] .chan-pix-canvas {
    transform: scaleX(-1);
  }
  .chan-stage-viewport {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 516px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(24, 117, 238, 0.2);
    box-shadow: 0 4px 20px -4px rgba(24, 117, 238, 0.12);
    overflow: hidden;
  }
  .chan-corner-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  .chan-corner-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    pointer-events: none;
  }
  .chan-stage-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
  }
  .chan-stage-view.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Accordion Steps Column */
  .chan-steplist-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 2 1 300px;
    background-color: #ffffff;
    padding: 12px 0;
  }
  .chan-steplist-col:hover .chan-progress {
    animation-play-state: paused;
  }
  .chan-step {
    position: relative;
    display: block;
    width: 100%;
    padding: 38px 32px 38px 24px;
    text-align: start;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
  }
  .chan-step:focus-visible {
    box-shadow: inset 0 0 0 2px #1875EE;
  }
  .chan-step-divider {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background-color: var(--line-light, #EDEDF0);
    pointer-events: none;
  }
  .chan-step__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .chan-step__num {
    color: #60646c;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    transition: color 0.18s ease-out;
    width: 22px;
    flex-shrink: 0;
  }
  .chan-step__title {
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: #3f434a;
    transition: color 0.18s ease-out;
  }
  .chan-step.is-active .chan-step__title,
  .chan-step:hover .chan-step__title {
    color: #1c2024;
  }
  .chan-step.is-active .chan-step__num {
    color: #2b59c3;
  }
  .chan-step__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out;
  }
  .chan-step.is-active .chan-step__reveal {
    grid-template-rows: 1fr;
  }
  .chan-step__reveal-inner {
    overflow: hidden;
  }
  .chan-step__text {
    display: block;
    color: #60646c;
    font-size: 14px;
    line-height: 1.6;
    padding-top: 3px;
    padding-inline-start: 36px;
    transition: color 0.18s ease-out;
    text-wrap: pretty;
  }
  .chan-step__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #1875EE;
    text-decoration: none;
    margin-top: 6px;
    margin-inline-start: 36px;
    transition: color 0.15s ease-out;
  }
  .chan-step__link:hover {
    color: #086DE0;
    text-decoration: underline;
  }
  .chan-progress-wrap {
    position: absolute;
    inset-inline-start: 24px;
    inset-inline-end: 32px;
    bottom: -1px;
    z-index: 1;
    height: 2px;
    overflow: hidden;
  }
  .chan-progress {
    position: absolute;
    inset: 0;
    background-color: #2B59C3;
    animation: chan-progress-step 6s linear forwards;
    transform-origin: 0 50%;
  }
  html[dir="rtl"] .chan-progress {
    transform-origin: 100% 50%;
  }
  @keyframes chan-progress-step {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }

  /* 3 Bottom Bento Cards */
  .feature-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #E0E2E6;
    background-color: #ffffff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(28, 32, 36, 0.04), 0 8px 24px -12px rgba(28, 32, 36, 0.12);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    outline: none;
  }
  .feature-card:hover {
    box-shadow: 0 1px 2px rgba(24, 117, 238, 0.1), 0 6px 14px -6px rgba(24, 117, 238, 0.14), 0 18px 36px -14px rgba(24, 117, 238, 0.22);
    transform: translateY(-4px);
  }
  .feature-card:focus-visible {
    box-shadow: 0 0 0 2px #1875EE;
  }
  .card-dots {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    height: 184px;
    padding: 16px;
    box-shadow: inset 0 -1px 0 #E6E8EB;
    overflow: hidden;
    background-image: radial-gradient(rgba(28, 32, 36, 0.12) 1px, transparent 1px);
    background-size: 16px 16px;
  }
  .card-ticks {
    height: 36px;
    box-shadow: inset 0 1px 0 #EDEDF0;
    background-image: linear-gradient(90deg, #EDEDF0 1px, transparent 0);
    background-size: 16px 100%;
  }
  .home-card-rules {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #EDEDF0;
    pointer-events: none;
  }
  @media (max-width: 900px) {
    .chan-showcase-row {
      flex-direction: column;
    }
    .chan-stage-col {
      min-height: 440px;
    }
  }

  /* =========================================================================
     6. Help Center Showcase (#helpcenter) - 1:1 with chatwoot.com
     ========================================================================= */
  #helpcenter {
    border-bottom: 1px solid var(--line);
    background: #ffffff;
  }
  .hc-head {
    padding: clamp(34px, 3.8vw, 50px) 24px clamp(24px, 2.6vw, 30px);
    border-bottom: 1px solid var(--line);
  }
  .hc-head-tagrow { display: flex; margin-bottom: 18px; }
  .hc-head-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0 0 12px;
    text-wrap: balance;
  }
  .hc-head-lede {
    margin: 0;
    max-width: 64ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-muted);
    text-wrap: pretty;
  }
  #helpcenter .hc-step {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    text-align: start;
    display: block;
    width: 100%;
    padding: 38px 32px 38px 24px;
    position: relative;
    font-family: inherit;
  }
  #helpcenter .hc-step:focus-visible {
    box-shadow: inset 0 0 0 2px var(--brand, #1875ee);
  }
  #helpcenter [role="tablist"] {
    flex: 2 1 300px;
    min-width: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 0;
  }
  #hc-panel {
    position: relative;
    flex: 3 1 420px;
    min-width: 0;
    min-height: 580px;
    padding: 24px;
    display: flex;
    background: #ffffff;
  }
  .hc-stage-center {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 56px 32px 40px;
  }
  @media (max-width: 480px) {
    .hc-stage-center {
      padding-inline: 16px;
    }
  }
  .hc-bar-wrap {
    position: absolute;
    inset-inline-start: 24px;
    inset-inline-end: 32px;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
    z-index: 1;
  }
  .hc-bar {
    background-color: #C98A0E !important;
    animation: hc-progress 6s linear forwards;
    transform-origin: left;
  }
  html[dir="rtl"] .hc-bar {
    transform-origin: right;
  }
  @keyframes hc-progress {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }
  .hc-float {
    position: absolute;
    top: 36px;
    inset-inline-end: 40px;
    z-index: 5;
    pointer-events: none;
    animation: hc-float 4.5s ease-in-out 1.6s infinite;
  }
  @keyframes hc-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .hc-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 0 0 1.5px #5c3d05;
    filter: drop-shadow(3px 3px 0 #5c3d05);
    transform: rotate(3deg);
  }
  .hc-badge-icon {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background-color: #E2A336 !important;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .hc-badge-icon svg {
    width: 15px;
    height: 15px;
    color: #ffffff !important;
    stroke: #ffffff;
  }
  .hc-badge-text { display: flex; flex-direction: column; gap: 1px; }
  .hc-badge-text .hc-badge-kicker {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6E7279;
  }
  .hc-badge-text b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  #hc-lang-pills button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
  }
  .hc-ghost {
    position: absolute;
    top: 0;
    height: 40px;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-top: 7px;
    padding-inline: 12px;
    font-size: 11.5px;
    color: #80838D;
    box-shadow: 0 0 0 1px #e0e2e6;
    transition: transform .45s ease-out, opacity .3s ease-out;
  }
  .hc-ghost svg { width: 12px; height: 12px; margin-top: 1px; }
  .hc-stage-inner { position: relative; width: 100%; min-width: 0; max-width: 500px; }
  #hc-ghost-1 {
    inset-inline: 8%;
    background: #FBFBFC;
  }
  #hc-ghost-2 {
    inset-inline: 4%;
    background: #ffffff;
  }
  .hc-window {
    position: relative;
    z-index: 2;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 0 0 1px #e3e4e8, 0 1px 2px rgba(28,32,36,.06), 0 10px 22px -14px rgba(92,61,5,.16);
  }
  /* --- Mock help-center window: explicit sizing (the layout's Tailwind subset
         does not emit arbitrary-value utilities, so these are defined here) --- */
  .hc-win-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 10px;
    box-shadow: inset 0 -1px 0 #E6E8EB;
  }
  .hc-win-url {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color .3s ease-out, box-shadow .3s ease-out;
  }
  .hc-win-url .hc-ssl {
    flex: none;
    width: 14px;
    height: 14px;
    color: #80838D;
    transition: color .3s ease-out;
  }
  .hc-win-url .hc-https { color: #80838D; }
  .hc-win-url #hc-domain-text { margin-inline-start: -6px; color: var(--ink); font-weight: 500; }
  .hc-win-url #hc-domain-path { margin-inline-start: -6px; color: #80838D; }
  .hc-win-url #hc-ssl-badge {
    margin-inline-start: auto;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 500;
    background: #E6F6EE;
    color: #0E7C58;
    transition: opacity .3s ease-out;
  }
  .hc-win-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
  }
  .hc-win-brand .hc-brand-id {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    white-space: nowrap;
  }
  .hc-win-brand .hc-brand-dot {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    background: #B7800F;
    transition: background-color .3s ease-out;
  }
  .hc-win-brand #hc-brand-text { font-weight: 600; color: var(--ink); }
  .hc-win-brand #hc-segment-text { color: #80838D; overflow: hidden; text-overflow: ellipsis; }
  #hc-lang-pills {
    flex: none;
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 6px;
    background: #F4F5F7;
    transition: opacity .3s ease-out;
  }
  #hc-lang-pills button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    display: grid;
    place-items: center;
    height: 22px;
    min-width: 28px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .25s ease-out, color .25s ease-out, box-shadow .25s ease-out;
  }
  #hc-lang-pills button[aria-pressed="true"] {
    background: #ffffff;
    color: #5C3D05;
    box-shadow: 0 1px 2px rgba(28,32,36,.12), 0 0 0 1px rgba(28,32,36,.06);
  }
  #hc-lang-pills button[aria-pressed="false"] { background: transparent; color: #80838D; }
  .hc-win-help {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 16px 14px;
  }
  #hc-window-heading {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ink);
  }
  #hc-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    background: #ffffff;
    color: #9AA0A8;
    font-size: 13px;
    box-shadow: 0 0 0 1px #E3E4E8;
    transition: background-color .3s ease-out, box-shadow .3s ease-out;
  }
  #hc-search-box .hc-search-ico { flex: none; width: 15px; height: 15px; color: #80838D; }
  #hc-search-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hc-win-cats {
    position: relative;
    padding: 0 16px 16px;
  }
  #hc-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    transition: opacity .3s ease-out, filter .3s ease-out;
  }
  #hc-category-grid .hc-cat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    min-width: 0;
    border-radius: 6px;
    background: #FBFBFC;
    box-shadow: inset 0 0 0 1px #ECEDF0;
  }
  #hc-category-grid .hc-cat-icon {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    background: #FFF1CC;
    transition: background-color .3s ease-out;
  }
  #hc-category-grid .hc-cat-icon svg { width: 15px; height: 15px; color: #B7800F; }
  #hc-category-grid .hc-cat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  #hc-category-grid .hc-cat-title { font-size: 13px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #hc-category-grid .hc-cat-count { font-size: 11.5px; color: #80838D; }
  #hc-ai-card {
    position: absolute;
    inset-inline: 16px;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 6px;
    background: #FFF8E6;
    box-shadow: 0 0 0 1px rgba(201,138,14,.35), 0 6px 14px -10px rgba(92,61,5,.16);
    transition: opacity .35s ease-out, transform .35s ease-out;
  }
  #hc-ai-card .hc-ai-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #8A6516; }
  #hc-ai-card .hc-ai-label svg { width: 13px; height: 13px; }
  #hc-ai-card .hc-ai-answer { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
  #hc-ai-card .hc-ai-srcs { display: flex; flex-wrap: wrap; gap: 6px; }
  #hc-ai-card .hc-ai-src {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #F0E2BF;
    font-size: 12px;
    color: #3F434A;
  }
  #hc-ai-card .hc-ai-src svg { width: 13px; height: 13px; color: #80838D; }
  .hc-portal-row {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    transition: background-color .25s ease-out;
  }
  .hc-portal-row .hc-portal-ava {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #FFF1CC;
    color: #8A6516;
    font-size: 10.5px;
    font-weight: 600;
  }
  .hc-portal-row .hc-portal-name { font-size: 12.5px; font-weight: 520; color: var(--ink); white-space: nowrap; }
  .hc-portal-row .hc-portal-host {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
  }
  .hc-portal-row .hc-portal-host span { overflow: hidden; text-overflow: ellipsis; }
  .hc-portal-row .hc-portal-host svg { flex: none; width: 12px; height: 12px; color: #80838D; }
  .hc-portals-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 12px 16px;
    box-shadow: inset 0 -1px 0 #EDEDF0;
  }
  .hc-portals-head .hc-portals-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .hc-portals-head .hc-portals-title b { font-size: 14px; font-weight: 520; color: var(--ink); }
  .hc-portals-head .hc-portals-title small { font-size: 12px; color: var(--ink-muted); }
  .hc-portals-head .hc-newportal {
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: #F0F0F3;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
  }
  .hc-portals-head .hc-newportal svg { width: 13px; height: 13px; color: var(--ink-muted); }
  .hc-portals-list { display: flex; flex-direction: column; padding: 6px 0; }
  .hc-portal-row .hc-portal-check { flex: none; margin-inline-start: auto; width: 14px; height: 14px; color: #12946A; transition: opacity .25s ease-out; }
  .hc-portal-row .hc-portal-bar { position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #E2A336; transition: opacity .25s ease-out; }
  .hc-portals {
    position: absolute;
    inset-inline-end: 24px;
    bottom: 24px;
    width: 300px;
    max-width: calc(100% - 48px);
    border-radius: 12px;
    overflow: hidden;
    z-index: 6;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 0 1px #e3e4e8, 0 8px 24px -8px rgba(28,32,36,.12);
    backdrop-filter: blur(16px);
    transition: opacity .3s ease-out, transform .35s ease-out;
  }
  #hc-ai-card {
    position: absolute;
    inset-inline: 16px;
    top: 0;
    z-index: 2;
    background-color: #FFF8E6 !important;
    border: 1px solid rgba(201, 138, 14, 0.4);
    box-shadow: 0 6px 14px -10px rgba(92, 61, 5, 0.16);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity .35s ease-out, transform .35s ease-out;
  }
  .hc-step.is-active [id^="hc-num-"] {
    color: #C98A0E !important;
  }
  .hc-step.is-active [id^="hc-title-"] {
    color: var(--ink, #1c2024) !important;
  }
  .hc-step [id^="hc-num-"] {
    color: var(--ink-muted, #80838d);
    transition: color 180ms ease-out;
  }
  .hc-step [id^="hc-title-"] {
    color: #3F434A;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
    letter-spacing: -0.015em;
    transition: color 180ms ease-out;
  }
  .hc-step:hover [id^="hc-title-"] {
    color: var(--ink, #1c2024);
  }
  #helpcenter .hc-step [id^="hc-num-"] { flex: none; width: 22px; }
  #helpcenter .hc-step [id^="hc-reveal-"] > span { overflow: hidden; }
  #helpcenter .hc-step .hc-step-desc {
    display: block;
    padding-top: 3px;
    padding-inline-start: 36px;
    font-size: 14px;
    line-height: 1.6;
    color: #80838D;
    text-wrap: pretty;
    transition: color 180ms ease-out;
  }
  .bg-\[\#FFF1CC\] { background-color: #FFF1CC !important; }
  .bg-\[\#FFF8E6\] { background-color: #FFF8E6 !important; }
  .bg-\[\#E2A336\] { background-color: #E2A336 !important; }
  .text-\[\#8A6516\] { color: #8A6516 !important; }
  .text-\[\#C98A0E\] { color: #C98A0E !important; }
  #helpcenter:hover .hc-bar,
  #helpcenter:focus-within .hc-bar,
  [role="tablist"]:hover .hc-bar {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce) {
    .hc-bar, .hc-float {
      animation: none !important;
    }
  }
  @media (max-width: 900px) {
    #helpcenter .flex.flex-wrap.gap-px.bg-line {
      flex-direction: column;
    }
    #hc-panel {
      min-height: 480px;
      padding: 16px;
    }
  }

  /* 7. E-Commerce Solutions */
  .ecommerce-section {
    padding: 80px 0;
    border-bottom: 1px solid var(--line-light);
  }

  .ecommerce-tracker-card {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
    box-shadow: var(--shadow-md);
  }

  .tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
  }

  .tracker-title {
    font-size: 16px;
    color: var(--ink);
  }

  .badge-status-shipping {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
  }

  .tracker-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid var(--line);
    color: var(--ink-subtle);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-item.completed .step-circle {
    background: #dcfce7;
    border-color: #22c55e;
    color: #15803d;
  }

  .step-item.active .step-circle {
    background: #1875ee;
    border-color: #1875ee;
    color: #ffffff;
  }

  .step-circle.pulse {
    box-shadow: 0 0 0 4px rgba(24, 117, 238, 0.2);
  }

  .step-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
  }

  .step-date {
    font-size: 10.5px;
    color: var(--ink-subtle);
  }

  .step-line {
    flex: 1;
    height: 2px;
    background: var(--line);
    margin: 0 8px;
    margin-bottom: 24px;
  }

  .step-line.completed {
    background: #22c55e;
  }

  .step-line.active {
    background: #1875ee;
  }

  /* =========================================================================
     Pricing Page (1:1 chatwoot.com/pricing architecture)
     ========================================================================= */
  .pricing-hero {
    background-color: #ffffff;
  }

  .pricing-hero-inner {
    padding: clamp(44px, 5.4vw, 76px) 24px clamp(28px, 3vw, 40px);
    max-width: 820px;
  }

  .pricing-title {
    margin: 18px 0 0;
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-wrap: balance;
  }

  .pricing-subtitle {
    margin: 12px 0 0;
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.55;
    color: var(--ink);
    max-width: 58ch;
    text-wrap: pretty;
  }

  .pricing-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .pricing-hero-link:hover {
    color: #086DE0;
  }

  .pricing-table-section {
    background-color: #ffffff;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--line-light);
    border-top: 1px solid var(--line-light);
  }

  .pricing-col {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .pricing-col.is-popular {
    box-shadow: inset 0 2px 0 #2781F6;
  }

  .pricing-head {
    padding: 28px 24px 24px;
    border-bottom: 1px solid var(--line-light);
    display: flex;
    flex-direction: column;
    min-height: 224px;
  }

  .pricing-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
    margin-bottom: 16px;
  }

  .pricing-name {
    margin: 0;
    font-family: var(--font-label, var(--font-sans));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
  }

  .pricing-sticker {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 0 0 1.5px #0F1113;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0F1113;
    white-space: nowrap;
  }

  .pricing-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .pricing-price {
    font-size: clamp(34px, 3vw, 42px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
  }

  .pricing-per {
    font-size: 14px;
    font-weight: 500;
    color: #60646c;
  }

  .pricing-note {
    margin: 8px 0 0;
    font-size: 14px;
    color: #60646c;
    min-height: 20px;
  }

  .pricing-cta {
    margin-top: 20px;
    width: 100%;
  }

  .pricing-body {
    flex: 1;
    padding: 12px 24px;
  }

  .pricing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-light);
  }

  .pricing-row:last-child {
    border-bottom: none;
  }

  .pricing-label {
    font-size: 14px;
    color: #60646c;
    text-decoration: none;
  }

  .pricing-label--link {
    transition: color 0.15s ease;
  }

  .pricing-label--link:hover {
    color: var(--ink);
  }

  .pricing-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-align: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* Tooltip system */
  .cw-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  .cw-tooltip-target {
    border-bottom: 1px dashed #B9BBC6;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
  }

  .cw-tooltip-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    z-index: 60;
    pointer-events: none;
  }

  .cw-tooltip-wrap:hover .cw-tooltip-popover,
  .cw-tooltip-wrap:focus-within .cw-tooltip-popover {
    display: block;
  }

  .cw-tooltip-bubble {
    background-color: #1c2024;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px -4px rgba(16, 24, 40, 0.35);
    white-space: nowrap;
    position: relative;
  }

  .cw-tooltip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 18px;
    border-width: 6px;
    border-style: solid;
    border-color: #1c2024 transparent transparent transparent;
  }

  .cw-tooltip-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #ffffff;
  }

  .cw-tooltip-icons svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  /* Check and minus icons */
  .pricing-icon-check {
    display: inline-block;
    width: 16px;
    height: 16px;
    color: #2781F6;
    vertical-align: middle;
  }

  .pricing-icon-minus {
    display: inline-block;
    width: 16px;
    height: 16px;
    color: #B9BBC6;
    vertical-align: middle;
  }

  /* Pricing Footer & Detailed Comparison */
  .pricing-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-top: 1px solid var(--line-light);
  }

  .pricing-foot-note {
    margin: 0;
    font-size: 14px;
    color: #60646c;
  }

  .pricing-foot-note a {
    color: var(--ink);
    text-decoration: underline;
  }

  .pricing-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }

  .pricing-compare-chevron {
    transition: transform 0.2s ease;
  }

  .pricing-compare-btn.is-active .pricing-compare-chevron {
    transform: rotate(180deg);
  }

  .pricing-comparison-container {
    display: none;
    border-top: 1px solid var(--line-light);
    overflow-x: auto;
  }

  .pricing-comparison-container.is-open {
    display: block;
  }

  .pricing-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
  }

  .pricing-comparison-table th,
  .pricing-comparison-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--line-light);
    font-size: 14px;
  }

  .pricing-comparison-table thead tr th {
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
    font-family: var(--font-label, var(--font-sans));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
  }

  .pricing-comparison-table thead tr th:first-child {
    text-align: start;
    color: #60646c;
    width: 32%;
  }

  .pricing-comparison-table thead tr th:not(:first-child) {
    text-align: center;
    border-inline-start: 1px solid var(--line-light);
    width: 17%;
  }

  .pricing-comparison-cat {
    background-color: #FCFCFD;
    font-family: var(--font-label, var(--font-sans));
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2781F6;
    padding: 18px 20px 10px !important;
    text-align: start !important;
  }

  .pricing-comparison-table tbody tr:hover td,
  .pricing-comparison-table tbody tr:hover th {
    background-color: #FCFCFD;
  }

  .pricing-comparison-table tbody th {
    font-weight: normal;
    text-align: start;
    color: #60646c;
  }

  .pricing-comparison-table tbody th a {
    color: #60646c;
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .pricing-comparison-table tbody th a:hover {
    color: var(--ink);
  }

  .pricing-comparison-table tbody td {
    text-align: center;
    border-inline-start: 1px solid var(--line-light);
    color: var(--ink);
  }

  /* Sytira AI block */
  .ai-block {
    background-color: #ffffff;
  }

  .ai-block-head {
    padding: clamp(36px, 4vw, 56px) 24px clamp(20px, 2.4vw, 28px);
    max-width: 820px;
  }

  .ai-title {
    margin: 18px 0 0;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--ink);
  }

  .ai-desc {
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #60646c;
    max-width: 60ch;
  }

  .ai-block-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    border-top: 1px solid var(--line-light);
  }

  .ai-credits {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    border-inline-end: 1px solid var(--line-light);
  }

  .ai-credits-label {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6e7279;
  }

  .ai-credits-price {
    margin: 10px 0 0;
    font-size: clamp(38px, 4vw, 48px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .ai-credits-price span {
    font-size: 15px;
    font-weight: 500;
    color: #60646c;
    letter-spacing: 0;
  }

  .ai-credits-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }

  .ai-credits-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #D9DBE0;
    transition: color 0.15s ease;
  }

  .ai-credits-link:hover {
    color: #086DE0;
  }

  .ai-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--line-light);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ai-feature-card {
    background-color: #ffffff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ai-feature-icon-box {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px #E6E8EB;
    color: #7E5BDC;
  }

  .ai-feature-icon-box svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .ai-feature-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  .ai-feature-desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #60646c;
  }

  /* FAQ */
  .pricing-faq {
    background-color: #ffffff;
  }

  .faq-head {
    padding: clamp(36px, 4vw, 56px) 24px clamp(20px, 2.4vw, 28px);
    max-width: 820px;
  }

  .faq-title {
    margin: 0;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--ink);
  }

  .faq-sub {
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #60646c;
    max-width: 60ch;
  }

  .faq-sub a {
    font-weight: 500;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #D9DBE0;
    transition: color 0.15s ease;
  }

  .faq-sub a:hover {
    color: #086DE0;
  }

  .faq-list {
    border-top: 1px solid var(--line-light);
  }

  .faq-item {
    border-bottom: 1px solid var(--line-light);
  }

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

  .faq-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .faq-summary::-webkit-details-marker {
    display: none;
  }

  .faq-q {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  .faq-plus {
    flex-shrink: 0;
    margin-top: 2px;
    color: #60646c;
    transition: transform 0.2s ease;
  }

  .faq-item[open] .faq-plus {
    transform: rotate(45deg);
  }

  .faq-answer {
    padding: 0 24px 24px;
    max-width: 72ch;
  }

  .faq-answer p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #60646c;
  }

  /* Keep exploring section */
  .pricing-exploring {
    background-color: #ffffff;
    border-top: 1px solid var(--line-light);
  }

  .pricing-exploring-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 24px;
  }

  .pricing-exploring-label {
    font-size: 14px;
    color: #60646c;
    margin-inline-end: 4px;
  }

  .pricing-exploring-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px 0 6px;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px #E3E4E8;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow 0.15s ease, color 0.15s ease;
  }

  .pricing-exploring-pill:hover {
    box-shadow: inset 0 0 0 1px #C9CDD3;
  }

  .pricing-exploring-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #E6E8EB;
  }

  .pricing-exploring-arrow {
    color: #80838D;
    transition: color 0.15s ease;
  }

  .pricing-exploring-pill:hover .pricing-exploring-arrow {
    color: var(--ink);
  }

  @media (max-width: 1023px) {
    .pricing-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ai-block-grid {
      grid-template-columns: 1fr;
    }
    .ai-credits {
      border-inline-end: none;
      border-bottom: 1px solid var(--line-light);
    }
    .ai-features-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 639px) {
    .pricing-grid {
      grid-template-columns: 1fr;
    }
    .pricing-title {
      font-size: 32px;
    }
    .ai-title,
    .faq-title {
      font-size: 26px;
    }
    .ai-features-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Responsive Adjustments */
  @media (max-width: 1024px) {
    .app-ui-body {
      grid-template-columns: 1fr;
    }
    .app-channel-rail, .app-conversation-list {
      display: none;
    }
    .ai-bento-grid {
      grid-template-columns: 1fr;
    }
    .channels-bento-grid {
      grid-template-columns: 1fr;
    }
    .helpcenter-card {
      grid-template-columns: 1fr;
      padding: 32px;
    }
    .floating-badge {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .tracker-stepper {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    .step-line {
      display: none;
    }
  }
    
  /* Connected Channels Stage & Cards Utility Fallbacks */
  .cards-row .grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  @media (max-width: 900px) {
    .cards-row .grid {
      grid-template-columns: 1fr !important;
    }
  }

  .meta-float {
    animation: 4.5s ease-in-out infinite channels-float;
  }
  .meta-float--reply {
    animation-delay: 0.6s;
    animation-duration: 4.2s;
  }
  .meta-float--question {
    animation-delay: 1.4s;
    animation-duration: 4.8s;
  }
  @keyframes channels-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  /* Specific icon sizing */
  .chan-stage-viewport img[src*="whatsapp.svg"],
  .chan-stage-viewport img[src*="facebook.svg"],
  .chan-stage-viewport img[src*="instagram.svg"],
  .chan-stage-viewport img[src*="outlook.svg"],
  .chan-stage-viewport img[src*="gmail.svg"] {
    display: block;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
  }
  .chan-diamond-grid img[src*="whatsapp.svg"],
  .chan-diamond-grid img[src*="facebook.svg"],
  .chan-diamond-grid img[src*="instagram.svg"] {
    display: block;
    width: 18px !important;
    height: 18px !important;
  }
  img[src*="meta-business-partner"] {
    display: block;
    width: 138px !important;
    height: 28px !important;
  }
  img[src*="portrait-2"] {
    display: block;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px;
    object-fit: cover;
  }

  /* SVG dimensions */
  .chan-step__link svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
  }

  .chan-step__link svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
  }

  /* ==========================================================================
     Omnichannel Stage Views & Bento Cards (Section 4)
     ========================================================================== */

  /* Stage Viewport Container */
  .chan-stage-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --------------------------------------------------------------------------
     View 0: Meta Ecosystem (WhatsApp, Messenger, Instagram)
     -------------------------------------------------------------------------- */
  .chan-meta-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 380px;
    margin: 0 auto;
    z-index: 2;
  }

  /* Center Stack: WhatsApp Template Message + Call */
  .chan-meta-center-stack {
    position: absolute;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 3;
  }
  html[dir="rtl"] .chan-meta-center-stack {
    transform: translateX(50%);
  }

  /* WhatsApp Template Card */
  .chan-meta-template-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #E0E2E6;
    border-radius: 8px;
    box-shadow: 0 4px 16px -4px rgba(28, 32, 36, 0.08);
    overflow: hidden;
    margin: 0 auto;
  }
  .chan-meta-template-body {
    padding: 12px 14px 10px;
    font-size: 13px;
    color: #1C2024;
    line-height: 1.45;
  }
  .chan-meta-template-msg {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #1C2024;
  }
  .chan-meta-template-time {
    display: block;
    font-size: 11px;
    color: #80838D;
    text-align: right;
    margin-top: 4px;
  }
  html[dir="rtl"] .chan-meta-template-time {
    text-align: left;
  }
  .chan-meta-template-action {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-top: 1px solid #E6E8EB;
    color: #12946A;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
  }

  /* WhatsApp Live Call Card */
  .chan-meta-call-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #E0E2E6;
    border-radius: 8px;
    box-shadow: 0 10px 28px -6px rgba(28, 32, 36, 0.14);
    padding: 12px 14px;
    margin: 0 auto;
  }
  .chan-meta-call-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 500;
    color: #60646C;
    margin-bottom: 8px;
  }
  .chan-meta-call-wa {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .chan-icon-wa {
    width: 14px !important;
    height: 14px !important;
    display: block;
  }
  .chan-meta-call-timer {
    color: #12946A;
    font-family: monospace;
    font-weight: 600;
  }
  .chan-meta-call-content {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .chan-meta-call-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .chan-meta-call-meta {
    flex: 1;
    min-width: 0;
  }
  .chan-meta-call-name {
    font-weight: 600;
    font-size: 13px;
    color: #1C2024;
    display: block;
    line-height: 1.2;
  }
  .chan-meta-call-number {
    font-size: 11.5px;
    color: #60646C;
    display: block;
  }
  .chan-meta-call-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .chan-meta-call-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F0F0F3;
    display: grid;
    place-items: center;
    color: #1C2024;
    cursor: pointer;
    border: none;
  }
  .chan-meta-call-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
  .chan-meta-call-btn--end {
    background: #E54666;
    color: #ffffff;
  }

  /* Floating Speech Bubbles */
  .chan-meta-bubble {
    position: absolute;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    z-index: 5;
  }
  .chan-meta-bubble-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #E3E4E8;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }
  .chan-meta-bubble-avatar img {
    width: 15px !important;
    height: 15px !important;
    display: block;
  }
  .chan-meta-bubble-box {
    background: #ffffff;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.35;
    color: #1C2024;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(28, 32, 36, 0.08);
  }
  .chan-meta-bubble-sub {
    font-size: 11px;
    color: #3A5A8C;
    margin-top: 2px;
  }

  /* Instagram bubble */
  .chan-meta-bubble--ig {
    top: 38px;
    inset-inline-start: 16px;
    transform: rotate(-3deg);
    z-index: 4;
  }
  .chan-meta-bubble-box--ig {
    border: 2px solid #f7a8c8;
    border-radius: 14px 14px 14px 4px;
  }
  html[dir="rtl"] .chan-meta-bubble--ig {
    transform: rotate(3deg);
  }
  html[dir="rtl"] .chan-meta-bubble-box--ig {
    border-radius: 14px 14px 4px 14px;
  }

  /* Messenger bubble */
  .chan-meta-bubble--msg {
    top: 30px;
    inset-inline-end: 16px;
    transform: rotate(4deg);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 4;
  }
  .chan-meta-bubble-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #12946A;
    padding-inline-start: 4px;
  }
  .chan-meta-bubble-tag svg {
    width: 13px !important;
    height: 13px !important;
    stroke: #12946A;
  }
  .chan-meta-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
  }
  .chan-meta-bubble-box--msg {
    border: 2px solid #9cc2f8;
    border-radius: 14px 14px 4px 14px;
  }
  html[dir="rtl"] .chan-meta-bubble--msg {
    transform: rotate(-4deg);
  }
  html[dir="rtl"] .chan-meta-bubble-box--msg {
    border-radius: 14px 14px 14px 4px;
  }

  /* WhatsApp question bubble */
  .chan-meta-bubble--wa {
    bottom: 24px;
    inset-inline-start: 22px;
    transform: rotate(2deg);
    z-index: 4;
  }
  .chan-meta-bubble-box--wa {
    border: 2px solid #7ee6b4;
    border-radius: 14px 14px 14px 4px;
  }
  html[dir="rtl"] .chan-meta-bubble--wa {
    transform: rotate(-2deg);
  }
  html[dir="rtl"] .chan-meta-bubble-box--wa {
    border-radius: 14px 14px 4px 14px;
  }

  /* --------------------------------------------------------------------------
     View 1: Email Threaded Composer
     -------------------------------------------------------------------------- */
  .chan-email-container {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  .chan-email-box {
    position: relative;
    width: 100%;
    background: #ffffff;
    border: 1px solid #E0E2E6;
    border-radius: 8px;
    box-shadow: 0 10px 24px -12px rgba(28, 32, 36, 0.22);
  }
  .chan-email-header {
    padding: 10px 16px;
    border-bottom: 1px solid #E6E8EB;
    font-size: 13px;
  }
  .chan-email-row {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    align-items: baseline;
  }
  .chan-email-lbl {
    width: 56px;
    color: #80838D;
    flex-shrink: 0;
    font-size: 12.5px;
  }
  .chan-email-val {
    color: #1C2024;
    font-size: 13px;
  }
  .chan-email-val--ph {
    color: #B0B4BA;
  }
  .chan-email-body {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #3F434A;
    border-bottom: 1px solid #E6E8EB;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .chan-email-body p {
    margin: 0;
  }
  .chan-email-footer {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .chan-email-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #80838D;
  }
  .chan-email-tools svg {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer;
  }
  .chan-email-send {
    height: 32px;
    padding: 0 16px;
    background: #1875EE;
    color: #ffffff;
    font-weight: 500;
    font-size: 13px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    border: none;
    cursor: pointer;
  }

  /* Floating Provider Stickers */
  .chan-email-sticker {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    background: #ffffff;
    border: 1.5px solid #1C2024;
    border-radius: 6px;
    box-shadow: 2.5px 3px 0 #1C2024;
    font-size: 13px;
    font-weight: 600;
    color: #1C2024;
    z-index: 5;
    white-space: nowrap;
  }
  .chan-email-sticker img {
    width: 16px !important;
    height: 16px !important;
    display: block;
  }
  .chan-email-sticker svg {
    width: 14px !important;
    height: 14px !important;
    display: block;
    flex-shrink: 0;
  }
  .chan-email-sticker--outlook {
    top: -20px;
    inset-inline-start: -24px;
    transform: rotate(-4deg);
  }
  .chan-email-sticker--gmail {
    top: 80px;
    inset-inline-end: -28px;
    transform: rotate(3deg);
  }
  .chan-email-sticker--imap {
    bottom: -18px;
    inset-inline-start: 28%;
    transform: rotate(-5deg);
  }

  /* --------------------------------------------------------------------------
     View 2: Live Chat Widget with Brand Customizer
     -------------------------------------------------------------------------- */
  .chan-widget-container {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .chan-widget-phone {
    position: relative;
    width: 330px;
    height: 420px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(24, 117, 238, 0.22) 0%, #FAFAFB 190px);
    border: 1px solid rgba(23, 52, 120, 0.12);
    box-shadow: 0 18px 36px -16px rgba(23, 52, 120, 0.3);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  .chan-widget-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 16px;
    height: 16px;
    color: #80838D;
    cursor: pointer;
  }
  .chan-widget-body {
    padding: 34px 14px 60px;
    overflow-y: auto;
    flex: 1;
  }
  .chan-widget-brand-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #1875EE;
    display: block;
    margin-bottom: 12px;
    transition: background-color 0.25s ease;
  }
  .chan-widget-title {
    font-size: 20px;
    font-weight: 700;
    color: #1C2024;
    line-height: 1.2;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
  }
  .chan-widget-subtitle {
    font-size: 12.5px;
    color: #60646C;
    line-height: 1.4;
    margin: 0 0 14px;
  }
  .chan-widget-card {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #E6E8EB;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .chan-widget-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 12px;
  }
  .chan-widget-card-row--border {
    border-bottom: 1px solid #EDEEF0;
  }
  .chan-widget-avatars {
    display: flex;
  }
  .chan-widget-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    margin-inline-start: -6px;
    display: block;
  }
  .chan-widget-av:first-child {
    margin-inline-start: 0;
  }
  .chan-widget-av--1 { background: #DCCFFF; }
  .chan-widget-av--2 { background: #FFE7A0; }
  .chan-widget-av--3 { background: #D2E1FA; }
  .chan-widget-send-btn {
    color: #1875EE;
    cursor: pointer;
    transition: color 0.25s ease;
  }
  .chan-widget-vbar {
    width: 1px;
    height: 14px;
    background: #E6E8EB;
  }
  .chan-widget-accent-icon,
  .chan-widget-accent-link {
    color: #1875EE;
    cursor: pointer;
  }
  .chan-widget-links {
    display: flex;
    flex-direction: column;
    padding: 4px 12px 10px;
    font-size: 12px;
    gap: 8px;
    color: #1C2024;
  }
  .chan-widget-accent-item {
    color: #1875EE;
  }
  .chan-widget-bottom-nav {
    position: absolute;
    inset-inline-start: 8px;
    inset-inline-end: 8px;
    bottom: 8px;
    background: #ffffff;
    border: 1px solid #E6E8EB;
    border-radius: 12px;
    display: flex;
    align-items: center;
    height: 44px;
    box-shadow: 0 -4px 14px rgba(28, 32, 36, 0.06);
    z-index: 5;
  }
  .chan-widget-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #80838D;
    text-decoration: none;
    gap: 2px;
  }
  .chan-widget-nav-btn.is-active {
    color: #1875EE;
    font-weight: 500;
  }
  .chan-widget-nav-sep {
    width: 1px;
    height: 20px;
    background: #E6E8EB;
  }
  .chan-widget-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .chan-widget-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #E54666;
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
  }
  .chan-widget-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 16px !important;
    height: 16px !important;
    color: #80838D;
    cursor: pointer;
  }
  .chan-widget-accent-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    color: #1875EE;
    cursor: pointer;
  }
  .chan-widget-row-label {
    font-size: 12px;
    font-weight: 500;
    color: #1C2024;
  }
  .chan-widget-card-row--sub {
    color: #60646C;
    font-size: 12px;
  }
  .chan-widget-help-title {
    font-size: 12px;
    font-weight: 500;
    flex: 1;
    color: #1C2024;
  }
  .chan-widget-nav-btn svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
    flex-shrink: 0;
  }
  .chan-widget-palette-icon svg {
    width: 12px !important;
    height: 12px !important;
    display: block;
    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* Floating Palette Popup */
  .chan-widget-palette {
    position: absolute;
    top: 142px;
    inset-inline-end: -75px;
    width: 188px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(28, 32, 36, 0.1);
    box-shadow: 0 16px 32px -12px rgba(28, 32, 36, 0.25);
    z-index: 10;
    overflow: hidden;
  }
  .chan-widget-palette-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #EEEFF1;
    font-size: 12px;
    font-weight: 600;
    color: #1C2024;
  }
  .chan-widget-palette-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #1875EE;
    color: #ffffff;
    display: grid;
    place-items: center;
    transition: background-color 0.3s ease-out;
  }
  .chan-widget-palette-dots {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
  }
  .chan-color-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    padding: 0;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: box-shadow 0.15s ease;
  }
  .chan-color-btn.is-active {
    box-shadow: inset 0 0 0 1.5px #1875EE;
  }
  .chan-color-btn--blue.is-active { box-shadow: inset 0 0 0 1.5px #1875EE !important; }
  .chan-color-btn--green.is-active { box-shadow: inset 0 0 0 1.5px #12946A !important; }
  .chan-color-btn--yellow.is-active { box-shadow: inset 0 0 0 1.5px #FFC53D !important; }
  .chan-color-btn--purple.is-active { box-shadow: inset 0 0 0 1.5px #7E5BDC !important; }
  .chan-color-btn--red.is-active { box-shadow: inset 0 0 0 1.5px #E54666 !important; }

  .chan-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: block;
  }
  .chan-color-dot--blue { background: #1875EE; }
  .chan-color-dot--green { background: #12946A; }
  .chan-color-dot--yellow { background: #FFC53D; }
  .chan-color-dot--purple { background: #7E5BDC; }
  .chan-color-dot--red { background: #E54666; }

  /* --------------------------------------------------------------------------
     View 3: Open API Code Terminal
     -------------------------------------------------------------------------- */
  .chan-api-container {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  .chan-api-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(23, 52, 120, 0.12);
    border-radius: 10px;
    box-shadow: 0 18px 36px -16px rgba(23, 52, 120, 0.28);
    padding: 20px 24px;
  }
  .chan-api-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  .chan-api-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
  }
  .chan-api-dot--red { background: #EF4444; }
  .chan-api-dot--yellow { background: #EAB308; }
  .chan-api-dot--green { background: #22C55E; }
  .chan-api-code {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #1C2024;
    white-space: pre-wrap;
  }
  .chan-code-comment { color: #8B8D98; }
  .chan-code-method { color: #C2298A; font-weight: 600; }
  .chan-code-num { color: #0E7C9B; }
  .chan-code-key { color: #12946A; }
  .chan-code-str { color: #AB6400; }

  /* --------------------------------------------------------------------------
     Bottom 3 Bento Cards (MACROS, AUTOMATIONS, AUTO-TRANSLATE)
     -------------------------------------------------------------------------- */
  .chan-bottom-cards-wrap {
    position: relative;
    background: #ffffff;
    border-top: 1px solid #EDEDF0;
    padding: 40px 0 48px;
  }
  .chan-bottom-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }
  .chan-bento-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #E0E2E6;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(28, 32, 36, 0.04), 0 8px 24px -12px rgba(28, 32, 36, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
  }
  .chan-bento-card:hover {
    transform: translateY(-4px);
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px -2px rgba(24, 117, 238, 0.12), 0 16px 32px -10px rgba(24, 117, 238, 0.2);
  }
  .chan-bento-header {
    display: flex;
    align-items: stretch;
    height: 38px;
    border-bottom: 1px solid #E6E8EB;
  }
  .chan-bento-tag {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-family: var(--font-label, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1C2024;
    transition: color 0.2s ease;
  }
  .chan-bento-card:hover .chan-bento-tag {
    color: #1875EE;
  }
  .chan-bento-arrow {
    width: 38px;
    display: grid;
    place-items: center;
    border-inline-start: 1px solid #E6E8EB;
    color: #80838D;
    transition: color 0.2s ease;
  }
  .chan-bento-card:hover .chan-bento-arrow {
    color: #1875EE;
  }
  .chan-coming-soon {
    margin-inline-start: 10px;
    display: inline-flex;
    align-items: center;
    height: 18px;
    border: 1px solid #0F1113;
    background: #ffffff;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0F1113;
    box-shadow: 1.5px 1.5px 0 #0F1113;
    border-radius: 4px;
  }
  html[dir="rtl"] .chan-coming-soon {
    box-shadow: -1.5px 1.5px 0 #0F1113;
  }
  .chan-bento-dots {
    position: relative;
    height: 184px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 20px;
    background-color: #ffffff;
    background-image: radial-gradient(rgba(28, 32, 36, 0.12) 1px, transparent 1px);
    background-size: 16px 16px;
    box-shadow: inset 0 -1px 0 #E6E8EB;
    overflow: hidden;
  }
  .chan-bento-body {
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .chan-bento-title {
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: #1C2024;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .chan-bento-desc {
    margin: 0;
    font-size: 14px;
    color: #60646C;
    line-height: 1.45;
  }
  .chan-bento-ticks {
    height: 36px;
    box-shadow: inset 0 1px 0 #EDEDF0;
    background-image: linear-gradient(90deg, #EDEDF0 1px, transparent 0);
    background-size: 16px 100%;
  }

  /* Bento Mockups */
  /* 1. Macro Card */
  .chan-macro-card {
    background: #ffffff;
    border: 1px solid #E3E4E8;
    border-radius: 6px;
    box-shadow: 0 4px 10px -6px rgba(28, 32, 36, 0.16);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .chan-macro-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #1C2024;
    margin-bottom: 2px;
  }
  .chan-macro-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .chan-macro-card-title svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
  }
  .chan-macro-run-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    border-radius: 4px;
    background: #1C2024;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 0 8px;
  }
  .chan-macro-run-pill svg {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0;
  }
  .chan-macro-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    border-radius: 4px;
    background: #F7F8F8;
    padding: 0 10px;
    font-size: 11.5px;
    color: #1C2024;
  }
  .chan-macro-step svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    color: #12946A !important;
    stroke: #12946A !important;
  }

  /* 2. Automations Stack */
  .chan-auto-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .chan-auto-row {
    background: #ffffff;
    border: 1px solid #E3E4E8;
    border-radius: 6px;
    box-shadow: 0 4px 10px -6px rgba(28, 32, 36, 0.16);
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
  }
  .chan-auto-row svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    color: #12946A !important;
    stroke: #12946A !important;
    margin-inline-start: auto;
  }
  .chan-auto-badge {
    height: 18px;
    padding: 0 6px;
    border-radius: 3px;
    background: #F0F0F3;
    font-size: 10px;
    font-weight: 700;
    color: #60646C;
    letter-spacing: 0.06em;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    min-width: 44px;
  }
  .chan-auto-text {
    font-size: 12px;
    color: #1C2024;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 3. Auto-Translate Stack */
  .chan-trans-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .chan-trans-incoming {
    align-self: flex-start;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .chan-trans-outgoing {
    align-self: flex-end;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .chan-trans-card {
    background: #ffffff;
    border: 1px solid #E3E4E8;
    border-radius: 6px;
    box-shadow: 0 4px 10px -6px rgba(28, 32, 36, 0.16);
    padding: 7px 10px;
    font-size: 12px;
    color: #1C2024;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .chan-trans-badge {
    height: 18px;
    padding: 0 5px;
    border-radius: 3px;
    background: #F0F0F3;
    font-size: 10px;
    font-weight: 700;
    color: #60646C;
    display: grid;
    place-items: center;
  }
  .chan-trans-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #80838D;
    padding-inline-start: 4px;
  }
  .chan-trans-hint svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0;
    color: #80838D;
  }


  /* =========================================================================
     VOICE & VOICE-QUOTE STYLES
     ========================================================================= */
  .pointer-events-none { pointer-events: none; }
  .absolute { position: absolute; }
  .relative { position: relative; }
  .inset-0 { inset: 0px; }
  .inset-x-0 { left: 0px; right: 0px; }
  .inset-y-0 { bottom: 0px; top: 0px; }
  .bottom-0 { bottom: 0px; }
  .start-0 { inset-inline-start: 0px; }
  .start-0\.5 { inset-inline-start: 0.125rem; }
  .start-1\/2 { inset-inline-start: 50%; }
  .top-1\/2 { top: 50%; }
  .z-\[2\] { z-index: 2; }
  .z-\[3\] { z-index: 3; }
  .m-0 { margin: 0px; }
  .-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
  .mx-auto { margin-left: auto; margin-right: auto; }
  .my-1 { margin-bottom: 0.25rem; margin-top: 0.25rem; }
  .my-10 { margin-bottom: 2.5rem; margin-top: 2.5rem; }
  .-ms-1\.5 { margin-inline-start: -0.375rem; }
  .-mt-1\.5 { margin-top: -0.375rem; }
  .mb-2 { margin-bottom: 0.5rem; }
  .mb-2\.5 { margin-bottom: 0.625rem; }
  .mb-4 { margin-bottom: 1rem; }
  .ms-0 { margin-inline-start: 0px; }
  .ms-0\.5 { margin-inline-start: 0.125rem; }
  .ms-2\.5 { margin-inline-start: 0.625rem; }
  .mt-0\.5 { margin-top: 0.125rem; }
  .mt-3\.5 { margin-top: 0.875rem; }
  .mt-\[18px\] { margin-top: 18px; }
  .block { display: block; }
  .flex { display: flex; }
  .inline-flex { display: inline-flex; }
  .grid { display: grid; }
  .h-0\.5 { height: 0.125rem; }
  .h-1 { height: 0.25rem; }
  .h-1\.5 { height: 0.375rem; }
  .h-10 { height: 2.5rem; }
  .h-11 { height: 2.75rem; }
  .h-12 { height: 3rem; }
  .h-14 { height: 3.5rem; }
  .h-16 { height: 4rem; }
  .h-3 { height: 0.75rem; }
  .h-3\.5 { height: 0.875rem; }
  .h-4 { height: 1rem; }
  .h-44 { height: 11rem; }
  .h-48 { height: 12rem; }
  .h-6 { height: 1.5rem; }
  .h-7 { height: 1.75rem; }
  .h-8 { height: 2rem; }
  .h-9 { height: 2.25rem; }
  .h-\[13px\] { height: 13px; }
  .h-\[15px\] { height: 15px; }
  .h-\[19px\] { height: 19px; }
  .h-\[26px\] { height: 26px; }
  .h-\[380px\] { height: 380px; }
  .h-\[42px\] { height: 42px; }
  .h-\[7px\] { height: 7px; }
  .h-full { height: 100%; }
  .min-h-0 { min-height: 0px; }
  .min-h-\[22px\] { min-height: 22px; }
  .min-h-\[300px\] { min-height: 300px; }
  .min-h-\[436px\] { min-height: 436px; }
  .w-0 { width: 0px; }
  .w-0\.5 { width: 0.125rem; }
  .w-1\.5 { width: 0.375rem; }
  .w-10 { width: 2.5rem; }
  .w-11 { width: 2.75rem; }
  .w-12 { width: 3rem; }
  .w-20 { width: 5rem; }
  .w-3 { width: 0.75rem; }
  .w-3\.5 { width: 0.875rem; }
  .w-3\/4 { width: 75%; }
  .w-36 { width: 9rem; }
  .w-4 { width: 1rem; }
  .w-44 { width: 11rem; }
  .w-6 { width: 1.5rem; }
  .w-64 { width: 16rem; }
  .w-7 { width: 1.75rem; }
  .w-9 { width: 2.25rem; }
  .w-\[13px\] { width: 13px; }
  .w-\[15px\] { width: 15px; }
  .w-\[19px\] { width: 19px; }
  .w-\[26px\] { width: 26px; }
  .w-\[3px\] { width: 3px; }
  .w-\[560px\] { width: 560px; }
  .w-\[7px\] { width: 7px; }
  .w-full { width: 100%; }
  .min-w-0 { min-width: 0px; }
  .max-w-\[400px\] { max-width: 400px; }
  .max-w-\[48ch\] { max-width: 48ch; }
  .max-w-\[60ch\] { max-width: 60ch; }
  .max-w-\[62ch\] { max-width: 62ch; }
  .max-w-\[820px\] { max-width: 820px; }
  .max-w-frame { max-width: 1200px; }
  .max-w-full { max-width: 100%; }
  .flex-1 { flex: 1 1 0%; }
  .flex-\[0_1_560px\] { flex: 0 1 560px; }
  .flex-\[1\.4_1_480px\] { flex: 1.4 1 480px; }
  .flex-\[1_1_100\%\] { flex: 1 1 100%; }
  .flex-\[1_1_150px\] { flex: 1 1 150px; }
  .flex-\[1_1_180px\] { flex: 1 1 180px; }
  .flex-\[1_1_220px\] { flex: 1 1 220px; }
  .flex-\[1_1_320px\] { flex: 1 1 320px; }
  .flex-\[1_1_380px\] { flex: 1 1 380px; }
  .flex-\[1_1_440px\] { flex: 1 1 440px; }
  .flex-\[1_1_460px\] { flex: 1 1 460px; }
  .flex-\[1_1_520px\] { flex: 1 1 520px; }
  .flex-\[1_1_560px\] { flex: 1 1 560px; }
  .flex-\[2_1_300px\] { flex: 2 1 300px; }
  .flex-\[2_1_320px\] { flex: 2 1 320px; }
  .flex-\[2_1_340px\] { flex: 2 1 340px; }
  .flex-\[2_1_380px\] { flex: 2 1 380px; }
  .flex-\[2_1_400px\] { flex: 2 1 400px; }
  .flex-\[2_1_520px\] { flex: 2 1 520px; }
  .flex-\[3_1_420px\] { flex: 3 1 420px; }
  .flex-\[3_1_440px\] { flex: 3 1 440px; }
  .flex-\[3_1_460px\] { flex: 3 1 460px; }
  .flex-\[5_1_400px\] { flex: 5 1 400px; }
  .flex-\[6_1_460px\] { flex: 6 1 460px; }
  .flex-none { flex: 0 0 auto; }
  .flex-shrink { flex-shrink: 1; }
  .flex-shrink-0 { flex-shrink: 0; }
  .shrink-0 { flex-shrink: 0; }
  .flex-grow, .grow { flex-grow: 1; }
  .-translate-x-1\/2 { --tw-translate-x: -50%; }
  .-translate-x-1\/2, .-translate-y-1 { transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
  .-translate-y-1\/2 { --tw-translate-y: -50%; }
  .-translate-y-1\/2, .-translate-y-3 { transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0px, 1fr)); }
  .grid-cols-12 { grid-template-columns: repeat(12, minmax(0px, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .grid-cols-5 { grid-template-columns: repeat(5, minmax(0px, 1fr)); }
  .grid-cols-\[1fr_auto_1fr\] { grid-template-columns: 1fr auto 1fr; }
  .grid-cols-\[minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 1fr); }
  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)_auto\] { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) auto; }
  .grid-cols-\[repeat\(auto-fill\,minmax\(min\(300px\,100\%\)\,1fr\)\)\] { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
  .grid-cols-\[repeat\(auto-fit\,minmax\(260px\,1fr\)\)\] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .grid-cols-\[repeat\(auto-fit\,minmax\(min\(280px\,100\%\)\,1fr\)\)\] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .grid-cols-\[repeat\(auto-fit\,minmax\(min\(300px\,100\%\)\,1fr\)\)\] { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .grid-cols-\[repeat\(auto-fit\,minmax\(min\(320px\,100\%\)\,1fr\)\)\] { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
  .grid-rows-\[0fr\] { grid-template-rows: 0fr; }
  .grid-rows-\[1fr\] { grid-template-rows: 1fr; }
  .grid-rows-\[repeat\(5\,auto\)\] { grid-template-rows: repeat(5, auto); }
  .flex-col { flex-direction: column; }
  .flex-col-reverse { flex-direction: column-reverse; }
  .flex-wrap { flex-wrap: wrap; }
  .place-items-center { place-items: center; }
  .items-start { align-items: flex-start; }
  .items-end { align-items: flex-end; }
  .items-center { align-items: center; }
  .justify-end { justify-content: flex-end; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .gap-0\.5 { gap: 0.125rem; }
  .gap-1 { gap: 0.25rem; }
  .gap-1\.5 { gap: 0.375rem; }
  .gap-10 { gap: 2.5rem; }
  .gap-2 { gap: 0.5rem; }
  .gap-2\.5 { gap: 0.625rem; }
  .gap-3 { gap: 0.75rem; }
  .gap-3\.5 { gap: 0.875rem; }
  .gap-4 { gap: 1rem; }
  .gap-\[3px\] { gap: 3px; }
  .gap-\[7px\] { gap: 7px; }
  .gap-\[9px\] { gap: 9px; }
  .gap-px { gap: 1px; }
  .gap-x-12 { column-gap: 3rem; }
  .gap-y-6 { row-gap: 1.5rem; }
  .self-center { align-self: center; }
  .overflow-hidden { overflow: hidden; }
  .text-ellipsis, .truncate { text-overflow: ellipsis; }
  .whitespace-nowrap { white-space: nowrap; }
  .rounded-\[10px\] { border-radius: 10px; }
  .rounded-\[14px\] { border-radius: 14px; }
  .rounded-full { border-radius: 9999px; }
  .rounded-lg { border-radius: 0.5rem; }
  .rounded-md { border-radius: 0.375rem; }
  .rounded-sm { border-radius: 0.125rem; }
  .rounded-b-md { border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
  .rounded-s { border-end-start-radius: 0.25rem; border-start-start-radius: 0.25rem; }
  .rounded-se-sm { border-start-end-radius: 0.125rem; }
  .rounded-ss-sm { border-start-start-radius: 0.125rem; }
  .border-b, .border-y { border-bottom-width: 1px; }
  .border-b-0 { border-bottom-width: 0px; }
  .border-b-2 { border-bottom-width: 2px; }
  .border-t { border-top-width: 1px; }
  .border-line { --tw-border-opacity: 1; border-color: rgb(237 237 240/var(--tw-border-opacity,1)); }
  .border-transparent { border-color: rgba(0, 0, 0, 0); }
  .border-t-ink { --tw-border-opacity: 1; border-top-color: rgb(28 32 36/var(--tw-border-opacity,1)); }
  .bg-\[\#12946A\] { --tw-bg-opacity: 1; background-color: rgb(18 148 106/var(--tw-bg-opacity,1)); }
  .bg-\[\#7EE6B4\] { --tw-bg-opacity: 1; background-color: rgb(126 230 180/var(--tw-bg-opacity,1)); }
  .bg-\[\#DCF1E6\] { --tw-bg-opacity: 1; background-color: rgb(220 241 230/var(--tw-bg-opacity,1)); }
  .bg-\[\#E1E3E7\] { --tw-bg-opacity: 1; background-color: rgb(225 227 231/var(--tw-bg-opacity,1)); }
  .bg-\[\#E54666\] { --tw-bg-opacity: 1; background-color: rgb(229 70 102/var(--tw-bg-opacity,1)); }
  .bg-\[\#E6E8EB\] { --tw-bg-opacity: 1; background-color: rgb(230 232 235/var(--tw-bg-opacity,1)); }
  .bg-\[\#F0F0F3\] { --tw-bg-opacity: 1; background-color: rgb(240 240 243/var(--tw-bg-opacity,1)); }
  .bg-\[\#F1FAF5\] { --tw-bg-opacity: 1; background-color: rgb(241 250 245/var(--tw-bg-opacity,1)); }
  .bg-\[\#F4F5F7\] { --tw-bg-opacity: 1; background-color: rgb(244 245 247/var(--tw-bg-opacity,1)); }
  .bg-\[\#F6F7F8\] { --tw-bg-opacity: 1; background-color: rgb(246 247 248/var(--tw-bg-opacity,1)); }
  .bg-\[\#F7F8F9\] { --tw-bg-opacity: 1; background-color: rgb(247 248 249/var(--tw-bg-opacity,1)); }
  .bg-\[\#FBFCFD\] { --tw-bg-opacity: 1; background-color: rgb(251 252 253/var(--tw-bg-opacity,1)); }
  .bg-\[\#FFF1F3\] { --tw-bg-opacity: 1; background-color: rgb(255 241 243/var(--tw-bg-opacity,1)); }
  .bg-ink { --tw-bg-opacity: 1; background-color: rgb(28 32 36/var(--tw-bg-opacity,1)); }
  .bg-line { --tw-bg-opacity: 1; background-color: rgb(237 237 240/var(--tw-bg-opacity,1)); }
  .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255/var(--tw-bg-opacity,1)); }
  .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
  .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
  .bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
  .bg-white\/\[0\.78\] { background-color: rgba(255, 255, 255, 0.78); }
  .fill-current { fill: currentcolor; }
  .object-cover { object-fit: cover; }
  .p-6 { padding: 1.5rem; }
  .p-\[2px\] { padding: 2px; }
  .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .px-\[9px\] { padding-left: 9px; padding-right: 9px; }
  .py-2\.5 { padding-bottom: 0.625rem; padding-top: 0.625rem; }
  .pb-3 { padding-bottom: 0.75rem; }
  .pb-3\.5 { padding-bottom: 0.875rem; }
  .pb-6 { padding-bottom: 1.5rem; }
  .pb-\[18px\] { padding-bottom: 18px; }
  .pb-px { padding-bottom: 1px; }
  .pe-\[23px\] { padding-inline-end: 23px; }
  .ps-1 { padding-inline-start: 0.25rem; }
  .ps-1\.5 { padding-inline-start: 0.375rem; }
  .ps-12 { padding-inline-start: 3rem; }
  .pt-2\.5 { padding-top: 0.625rem; }
  .pt-3 { padding-top: 0.75rem; }
  .pt-3\.5 { padding-top: 0.875rem; }
  .pt-4 { padding-top: 1rem; }
  .pt-px { padding-top: 1px; }
  .font-display, .font-haskoy { font-family: var(--font-brand); }
  .font-label { font-family: var(--font-label); }
  .text-\[11\.5px\] { font-size: 11.5px; }
  .text-\[11px\] { font-size: 11px; }
  .text-\[12\.5px\] { font-size: 12.5px; }
  .text-\[13px\] { font-size: 13px; }
  .text-\[14\.5px\] { font-size: 14.5px; }
  .text-\[15\.5px\] { font-size: 15.5px; }
  .text-\[15px\] { font-size: 15px; }
  .text-\[17px\] { font-size: 17px; }
  .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .text-xs { font-size: 0.75rem; line-height: 1rem; }
  .font-\[520\] { font-weight: 520; }
  .font-bold { font-weight: 700; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); }
  .leading-\[1\.08\] { line-height: 1.08; }
  .leading-\[1\.3\] { line-height: 1.3; }
  .leading-\[1\.45\] { line-height: 1.45; }
  .leading-\[1\.4\] { line-height: 1.4; }
  .leading-\[1\.55\] { line-height: 1.55; }
  .leading-\[1\.6\] { line-height: 1.6; }
  .tracking-\[-0\.012em\] { letter-spacing: -0.012em; }
  .tracking-\[-0\.015em\] { letter-spacing: -0.015em; }
  .tracking-\[-0\.02em\] { letter-spacing: -0.02em; }
  .tracking-\[-0\.035em\] { letter-spacing: -0.035em; }
  .text-\[\#0B3527\] { --tw-text-opacity: 1; color: rgb(11 53 39/var(--tw-text-opacity,1)); }
  .text-\[\#0E7C58\] { --tw-text-opacity: 1; color: rgb(14 124 88/var(--tw-text-opacity,1)); }
  .text-\[\#0F1113\] { --tw-text-opacity: 1; color: rgb(15 17 19/var(--tw-text-opacity,1)); }
  .text-\[\#80838D\] { --tw-text-opacity: 1; color: rgb(128 131 141/var(--tw-text-opacity,1)); }
  .text-\[\#B4234A\] { --tw-text-opacity: 1; color: rgb(180 35 74/var(--tw-text-opacity,1)); }
  .text-ink { --tw-text-opacity: 1; color: rgb(28 32 36/var(--tw-text-opacity,1)); }
  .text-mute { --tw-text-opacity: 1; color: rgb(96 100 108/var(--tw-text-opacity,1)); }
  .text-white { --tw-text-opacity: 1; color: rgb(255 255 255/var(--tw-text-opacity,1)); }
  .text-white\/70 { color: rgba(255, 255, 255, 0.7); }
  .text-white\/75 { color: rgba(255, 255, 255, 0.75); }
  .text-white\/80 { color: rgba(255, 255, 255, 0.8); }
  .opacity-0 { opacity: 0; }
  .opacity-100 { opacity: 1; }
  .shadow-\[0_0_0_2px_\#CFE1FD\], .shadow-\[0_0_0_2px_\#fff\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
  .shadow-\[0_0_0_2px_\#fff\] { --tw-shadow: 0 0 0 2px #fff; --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color); }
  .shadow-\[1\.5px_1\.5px_0_\#0F1113\], .shadow-\[1px_0_0_\#E6E8EB\,-1px_0_0_\#E6E8EB\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
  .shadow-\[1px_0_0_\#E6E8EB\,-1px_0_0_\#E6E8EB\] { --tw-shadow: 1px 0 0 #e6e8eb,-1px 0 0 #e6e8eb; --tw-shadow-colored: 1px 0 0 var(--tw-shadow-color),-1px 0 0 var(--tw-shadow-color); }
  .shadow-\[inset_0_-1px_0_\#E4E5E9\], .shadow-\[inset_0_-1px_0_\#E6E8EB\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
  .shadow-\[inset_0_-1px_0_\#E6E8EB\] { --tw-shadow: inset 0 -1px 0 #e6e8eb; --tw-shadow-colored: inset 0 -1px 0 var(--tw-shadow-color); }
  .shadow-\[inset_0_-1px_0_\#E8E9EC\] { --tw-shadow: inset 0 -1px 0 #e8e9ec; --tw-shadow-colored: inset 0 -1px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
  .shadow-\[inset_0_0_0_1px_\#DCF1E6\] { --tw-shadow: inset 0 0 0 1px #dcf1e6; --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
  .shadow-\[inset_0_0_0_1px_\#E6E8EB\] { --tw-shadow: inset 0 0 0 1px #e6e8eb; --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color); }
  .shadow-\[inset_0_0_0_1px_\#E6E8EB\], .shadow-\[inset_0_0_0_1px_\#E8E9EC\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
  .shadow-\[inset_0_0_0_1px_\#E8E9EC\] { --tw-shadow: inset 0 0 0 1px #e8e9ec; --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color); }
  .shadow-\[inset_0_0_0_1px_\#ECEDF0\] { --tw-shadow: inset 0 0 0 1px #ecedf0; --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color); }
  .shadow-\[inset_0_0_0_1px_\#ECEDF0\], .shadow-\[inset_0_0_0_1px_\#F0E2BF\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
  .shadow-\[inset_0_0_0_1px_\#FBD5DC\] { --tw-shadow: inset 0 0 0 1px #fbd5dc; --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color); }
  .shadow-\[inset_0_0_0_1px_\#FBD5DC\], .shadow-\[inset_0_0_0_1px_rgba\(0\,0\,0\,\.08\)\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
  .shadow-\[inset_0_1px_0_\#EDEDF0\] { --tw-shadow: inset 0 1px 0 #ededf0; --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
  .transition-\[font-size\] { transition-duration: 0.15s; transition-property: font-size; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .transition-colors { transition-duration: 0.15s; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .transition-opacity { transition-duration: 0.15s; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .transition-shadow { transition-duration: 0.15s; transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .delay-150 { transition-delay: 0.15s; }
  .duration-200 { transition-duration: 0.2s; }
  .duration-300 { transition-duration: 0.3s; }
  .duration-\[250ms\] { transition-duration: 0.25s; }
  .duration-\[350ms\] { transition-duration: 0.35s; }
  .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  .\[grid-area\:1\/1\] { grid-area: 1 / 1; }
  .\[text-wrap\:balance\] { text-wrap: balance; }
  .\[text-wrap\:pretty\] { text-wrap: pretty; }
  .hover\:bg-white:hover { --tw-bg-opacity: 1; background-color: rgb(255 255 255/var(--tw-bg-opacity,1)); }
  .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
  .focus-visible\:outline-none:focus-visible { outline: rgba(0, 0, 0, 0) solid 2px; outline-offset: 2px; }
  .focus-visible\:ring-2:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000); }
  .focus-visible\:ring-inset:focus-visible { --tw-ring-inset: inset; }
  .focus-visible\:ring-\[\#12946A\]:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(18 148 106/var(--tw-ring-opacity,1)); }
  @media (min-width: 640px) {
    .sm\:justify-start { justify-content: flex-start; }
  }
  .rtl\:translate-x-1\/2:where([dir="rtl"], [dir="rtl"] *) { --tw-translate-x: 50%; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
  .rtl\:-scale-x-100:where([dir="rtl"], [dir="rtl"] *) { --tw-scale-x: -1; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }

  /* =========================================================================
     Industry solutions (#solutions) — 1:1 with chatwoot.com
     The subset above does not emit these utilities, so they are declared here, scoped to the section.
     ========================================================================= */
  #solutions [hidden] { display: none; }
  #solutions .contents { display: contents; }
  #solutions .cursor-pointer { cursor: pointer; }
  #solutions .no-underline { text-decoration: none; }
  #solutions .list-none { list-style: none; }
  #solutions .uppercase { text-transform: uppercase; }
  #solutions .text-start { text-align: start; }
  #solutions .text-base { font-size: 1rem; line-height: 1.5rem; }
  #solutions .text-inherit { color: inherit; }
  #solutions .justify-start { justify-content: flex-start; }
  #solutions .self-start { align-self: flex-start; }
  #solutions .origin-left { transform-origin: left; }
  #solutions .border-0 { border-width: 0; }
  #solutions .border { border-width: 1px; border-style: solid; }
  #solutions .border-t { border-top-style: solid; }
  #solutions.border-b,
  #solutions .border-b { border-bottom-style: solid; }
  #solutions .border-x { border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; }
  #solutions .border-\[\#E0E2E6\] { border-color: #E0E2E6; }
  #solutions .mt-3 { margin-top: 12px; }
  #solutions .font-label { font-family: var(--font-sans); }

  /* chatwoot's Tailwind config pairs every arbitrary font size with line-height 1.5 */
  #solutions .text-\[10\.5px\] { line-height: 1.5; }
  #solutions .text-\[11\.5px\] { line-height: 1.5; }
  #solutions .text-\[12\.5px\] { line-height: 1.5; }
  #solutions .text-\[13px\] { line-height: 1.5; }
  #solutions .text-\[14\.5px\] { line-height: 1.5; }

  #solutions .p-0 { padding: 0; }
  #solutions .p-3 { padding: 12px; }
  #solutions .p-5 { padding: 20px; }
  #solutions .px-1 { padding-left: 4px; padding-right: 4px; }
  #solutions .px-2 { padding-left: 8px; padding-right: 8px; }
  #solutions .px-2\.5 { padding-left: 10px; padding-right: 10px; }
  #solutions .pb-5 { padding-bottom: 20px; }
  #solutions .py-6 { padding-top: 24px; padding-bottom: 24px; }
  #solutions .py-\[7px\] { padding-top: 7px; padding-bottom: 7px; }
  #solutions .py-\[11px\] { padding-top: 11px; padding-bottom: 11px; }
  #solutions .pt-\[18px\] { padding-top: 18px; }
  #solutions .pt-\[clamp\(40px\,4\.5vw\,64px\)\] { padding-top: clamp(40px, 4.5vw, 64px); }
  #solutions .pb-\[clamp\(24px\,2\.8vw\,32px\)\] { padding-bottom: clamp(24px, 2.8vw, 32px); }
  #solutions .py-\[clamp\(32px\,3\.6vw\,48px\)\] { padding-top: clamp(32px, 3.6vw, 48px); padding-bottom: clamp(32px, 3.6vw, 48px); }

  #solutions .mb-0 { margin-bottom: 0; }
  #solutions .mb-\[18px\] { margin-bottom: 18px; }
  #solutions .min-h-\[500px\] { min-height: 500px; }
  #solutions .max-w-\[420px\] { max-width: 420px; }
  #solutions .max-w-\[46ch\] { max-width: 46ch; }
  #solutions .max-w-\[86\%\] { max-width: 86%; }
  #solutions .gap-\[5px\] { gap: 5px; }
  #solutions .gap-\[22px\] { gap: 22px; }

  #solutions .h-\[18px\] { height: 18px; }
  #solutions .h-\[22px\] { height: 22px; }
  #solutions .h-\[30px\] { height: 30px; }
  #solutions .h-\[34px\] { height: 34px; }
  #solutions .h-\[46px\] { height: 46px; }
  #solutions .w-\[18px\] { width: 18px; }
  #solutions .w-\[30px\] { width: 30px; }
  #solutions .w-\[34px\] { width: 34px; }

  #solutions .rounded-\[5px\] { border-radius: 5px; }
  #solutions .rounded-\[7px\] { border-radius: 7px; }
  #solutions .rounded-xl { border-radius: 12px; }
  #solutions .rounded-ee-\[3px\] { border-end-end-radius: 3px; }
  #solutions .rounded-es-\[3px\] { border-end-start-radius: 3px; }

  #solutions .text-\[10\.5px\] { font-size: 10.5px; }
  #solutions .text-\[13\.5px\] { font-size: 13.5px; }
  #solutions .text-\[\#3F434A\] { color: #3F434A; }
  #solutions .text-\[\#9EA1A8\] { color: #9EA1A8; }
  #solutions .text-\[clamp\(26px\,2\.8vw\,34px\)\] { font-size: clamp(26px, 2.8vw, 34px); }
  #solutions .leading-\[1\.1\] { line-height: 1.1; }
  #solutions .leading-\[1\.2\] { line-height: 1.2; }
  #solutions .leading-\[1\.5\] { line-height: 1.5; }
  #solutions .tracking-\[0\.06em\] { letter-spacing: 0.06em; }
  #solutions .tracking-\[0\.08em\] { letter-spacing: 0.08em; }

  #solutions .shadow-\[inset_0_-1px_0_\#E6E8EB\] { box-shadow: inset 0 -1px 0 #E6E8EB; }
  #solutions .shadow-\[inset_0_0_0_1px_\#E0E2E6\] { box-shadow: inset 0 0 0 1px #E0E2E6; }
  #solutions .shadow-\[inset_0_0_0_1px_\#E6E8EB\] { box-shadow: inset 0 0 0 1px #E6E8EB; }
  #solutions .shadow-\[inset_0_1px_0_\#E6E8EB\] { box-shadow: inset 0 1px 0 #E6E8EB; }
  #solutions .shadow-\[inset_-1px_0_0_\#E6E8EB\] { box-shadow: inset -1px 0 0 #E6E8EB; }
  #solutions .shadow-\[inset_1px_0_0_\#EDEDF0\] { box-shadow: inset 1px 0 0 #EDEDF0; }

  #solutions .hover\:brightness-\[1\.2\]:hover { filter: brightness(1.2); }
  #solutions .hover\:text-\[\#086DE0\]:hover { color: #086DE0; }
  #solutions .focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: rgb(24 117 238); }
  #solutions .transition-\[background\,transform\,box-shadow\] { transition-property: background, transform, box-shadow; }
  #solutions .transition-\[filter\] { transition-property: filter; }
  #solutions .transition-\[opacity\,transform\] { transition-property: opacity, transform; }

  /* Staged conversation reveal (drafting dots -> suggested reply -> sent reply) */
  #solutions .solutions-step { transition: opacity 300ms ease; }
  #solutions .solutions-pop {
    transition: opacity 300ms ease, transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #solutions .solutions-dot { animation: solutions-dot-pulse 1.15s ease-in-out infinite; }
  @keyframes solutions-dot-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }

  /* Reset button styles inside voice section */
  #voice button {
    border: 0;
    cursor: pointer;
  }
  #voice button[role="tab"] {
    padding: 10px 12px;
    height: 48px;
  }
  #voice button.bg-\[\#E54666\],
  .bg-\[\#E54666\] {
    background-color: #E54666 !important;
  }
  #voice button.bg-\[\#12946A\],
  .bg-\[\#12946A\] {
    background-color: #12946A !important;
  }
  .py-\[clamp\(24px\,2\.6vw\,30px\)\] {
    padding-top: clamp(24px, 2.6vw, 30px);
    padding-bottom: clamp(24px, 2.6vw, 30px);
  }
  .pt-\[clamp\(32px\,3\.4vw\,44px\)\] {
    padding-top: clamp(32px, 3.4vw, 44px);
  }
  .pb-\[clamp\(10px\,1\.2vw\,14px\)\] {
    padding-bottom: clamp(10px, 1.2vw, 14px);
  }
  .py-\[clamp\(32px\,4vw\,48px\)\] {
    padding-top: clamp(32px, 4vw, 48px);
    padding-bottom: clamp(32px, 4vw, 48px);
  }
  .text-\[clamp\(26px\,3vw\,38px\)\] {
    font-size: clamp(26px, 3vw, 38px);
  }
  .text-\[clamp\(17px\,1\.6vw\,20px\)\] {
    font-size: clamp(17px, 1.6vw, 20px);
  }
  .border-t {
    border-top-width: 1px;
  }

  /* Responsive screen-reader utility */
  @media (max-width: 639px) {
    .max-sm\:sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  }

  /* Voice Component Animations & Styles */
  .voice-tab-fill {
    background-clip: content-box;
    background-image: radial-gradient(#e9ebee .8px, transparent 1.2px);
    background-origin: content-box;
    background-repeat: space;
    background-size: 6px 6px;
    padding: 6px;
  }
  .voice-tab-tile {
    transition: background .25s ease-out, transform .25s ease-out, box-shadow .25s ease-out;
  }
  /* Voice Tab Auto-Progress Bar (matches Hero, Captain, Channels) */
  .voice-tab-progress-wrap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background-color: #DCF1E6;
    overflow: hidden;
    z-index: 1;
  }
  .voice-tab-progress {
    position: absolute;
    inset: 0;
    background-color: #12946A;
    animation: voice-tab-progress-step 6s linear forwards;
    transform-origin: 0 50%;
  }
  html[dir="rtl"] .voice-tab-progress {
    transform-origin: 100% 50%;
  }
  @keyframes voice-tab-progress-step {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }
  #voice:hover .voice-tab-progress,
  #voice:focus-within .voice-tab-progress,
  [role="tablist"]:hover .voice-tab-progress {
    animation-play-state: paused;
  }
  .voice-dots {
    background-image: radial-gradient(rgba(18, 148, 106, .35) 1.2px, transparent 1.7px);
    background-size: 12px 12px;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
  }
  .voice-card {
    box-shadow: 0 0 0 1px #e3e4e8, 0 1px 2px #1c20240f, 0 20px 40px -16px #0b35274d;
    transition: opacity .45s ease-out, transform .45s ease-out, visibility .45s;
  }
  .voice-card--on {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }
  .voice-card--off {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
    visibility: hidden !important;
  }
  .voice-rows {
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
  }
  .voice-rows--slow {
    transition-duration: .5s;
  }
  .voice-rows--open {
    grid-template-rows: 1fr;
  }
  .voice-slot {
    transition: width .35s ease-out, margin .35s ease-out, opacity .25s ease-out;
  }
  .voice-btn {
    transition: background .35s ease-out, transform .12s ease-out, filter .15s ease-out;
  }
  .voice-btn:hover {
    filter: brightness(1.06);
  }
  .voice-btn:active {
    transform: scale(.95);
  }
  .voice-btn:focus-visible {
    outline: 2px solid #12946a;
    outline-offset: 2px;
  }
  .voice-ring {
    position: relative;
  }
  .voice-ring:after {
    animation: voice-ring 1.4s ease-out infinite;
    background: #12946a73;
    border-radius: inherit;
    content: "";
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }
  @keyframes voice-ring {
    0% { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.3); }
  }
  .voice-blink {
    animation: voice-blink 1.2s ease-in-out infinite;
  }
  .voice-pulse {
    animation: voice-blink 1s ease-in-out infinite;
  }
  .voice-pulse:nth-child(2) {
    animation-delay: .2s;
  }
  .voice-pulse:nth-child(3) {
    animation-delay: .4s;
  }
  @keyframes voice-blink {
    50% { opacity: .25; }
  }
  .voice-bar {
    transform-origin: 50% 50%;
    transition: height .25s ease-out;
  }
  .voice-bar--run {
    animation: voice-wave 1s ease-in-out infinite;
  }
  @keyframes voice-wave {
    0%, 100% { transform: scaleY(.25); }
    50% { transform: scaleY(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .voice-bar, .voice-btn, .voice-card, .voice-rows, .voice-slot, .voice-tab-progress--run, .voice-tab-tile {
      transition: none;
    }
    .voice-bar--run, .voice-blink, .voice-pulse, .voice-ring:after, .voice-tab-progress, .hc-step-progress {
      animation: none;
    }
  }
  .quote-pix {
    background-size: 80px 32px;
  }
  .quote-pix--start {
    background-image: url(/images/home/redesign/voice/quote-pixels-start.svg);
  }
  .quote-pix--end {
    background-image: url(/images/home/redesign/voice/quote-pixels-end.svg);
  }
  .quote-grid {
    background-image: linear-gradient(90deg, rgba(11, 53, 39, .07) 1px, transparent 0), linear-gradient(rgba(11, 53, 39, .07) 1px, transparent 0);
    background-size: 80px 80px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 80%);
    mask-image: linear-gradient(90deg, transparent 30%, #000 80%);
  }
  html[dir=rtl] .quote-grid {
    -webkit-mask-image: linear-gradient(270deg, transparent 30%, #000 80%);
    mask-image: linear-gradient(270deg, transparent 30%, #000 80%);
  }

  /* =========================================================================
     9. CUSTOMER STORIES (#stories) - 1:1 with chatwoot.com
     ========================================================================= */

  /* utilities used by this section but only defined under other scopes */
  #stories .pt-\[clamp\(40px\,4\.5vw\,64px\)\] { padding-top: clamp(40px, 4.5vw, 64px); }
  #stories .pb-\[clamp\(24px\,2\.8vw\,32px\)\] { padding-bottom: clamp(24px, 2.8vw, 32px); }
  #stories .mb-\[18px\] { margin-bottom: 18px; }
  #stories .mt-3 { margin-top: 12px; }
  #stories .mb-0 { margin-bottom: 0; }
  #stories .border { border-width: 1px; border-style: solid; }
  #stories .border-t { border-top-style: solid; }
  #stories.border-b,
  #stories .border-b { border-bottom-style: solid; }
  #stories .border-\[\#E0E2E6\] { border-color: #E0E2E6; }
  #stories .text-base { font-size: 1rem; line-height: 1.5rem; }
  #stories .uppercase { text-transform: uppercase; }
  #stories .shadow-\[inset_0_1px_0_\#E6E8EB\] { box-shadow: inset 0 1px 0 #E6E8EB; }
  #stories .hover\:text-\[\#086DE0\]:hover { color: #086DE0; }
  #stories .focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: rgb(24 117 238); }

  /* utilities missing from the shared subset */
  #stories .gap-5 { gap: 1.25rem; }
  #stories .gap-6 { gap: 1.5rem; }
  #stories .pt-6 { padding-top: 1.5rem; }
  #stories .pb-7 { padding-bottom: 1.75rem; }
  #stories .mt-auto { margin-top: auto; }
  #stories .items-stretch { align-items: stretch; }
  #stories .leading-normal { line-height: 1.5; }
  #stories .tracking-\[0\.1em\] { letter-spacing: 0.1em; }
  #stories .z-\[1\] { z-index: 1; }
  #stories .rounded { border-radius: 0.25rem; }
  #stories .min-w-\[min\(280px\,100\%\)\] { min-width: min(280px, 100%); }
  #stories .size-4 { width: 1rem; height: 1rem; }
  #stories .size-6 { width: 1.5rem; height: 1.5rem; }
  #stories .size-10 { width: 2.5rem; height: 2.5rem; }
  #stories .size-\[15px\] { width: 15px; height: 15px; }
  #stories .shadow-\[inset_1px_0_0_\#E6E8EB\] { box-shadow: inset 1px 0 0 0 #E6E8EB; }
  #stories .rtl\:shadow-\[inset_-1px_0_0_\#E6E8EB\]:where([dir="rtl"], [dir="rtl"] *) { box-shadow: inset -1px 0 0 0 #E6E8EB; }
  #stories .rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) { transform: rotate(180deg); }

  /* chatwoot bleeds the rules 100vw past each card edge; the shared rule
     centres a single 100vw strip instead, which stops short inside the
     clipped grid (and is a different width at every breakpoint).
     The layout also has a second global .home-card-rules rule (a 1px
     vertical channel rule) that fills the box with #EDEDF0 — chatwoot's
     version paints only the four gradient lines, so drop that fill. */
  #stories .home-card-rules {
    left: -100vw;
    right: -100vw;
    width: auto;
    transform: none;
    background-color: transparent;
  }

  /* testimonial card */
  #stories .testimonial {
    box-shadow: 0 1px 2px rgba(28, 32, 36, 0.04), 0 8px 24px -12px rgba(28, 32, 36, 0.12);
    transition: transform 0.25s ease-out;
  }
  #stories .testimonial__ruler {
    background-image: repeating-linear-gradient(90deg, #EEEFF2 0px, #EEEFF2 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 12px);
    background-repeat: no-repeat;
  }
  @media (prefers-reduced-motion: reduce) {
    #stories .testimonial { transition: none; }
  }

  /* =========================================================================
     MANAGED HOSTING (#open) - layout 1:1 with chatwoot.com
     ========================================================================= */

  /* padding / margin */
  #open .py-\[clamp\(40px\,4\.5vw\,64px\)\] { padding-block: clamp(40px, 4.5vw, 64px); }
  #open .py-\[clamp\(28px\,3\.5vw\,44px\)\] { padding-block: clamp(28px, 3.5vw, 44px); }
  #open .py-\[22px\] { padding-block: 22px; }
  #open .py-\[11px\] { padding-block: 11px; }
  #open .px-5 { padding-inline: 1.25rem; }
  #open .p-4 { padding: 1rem; }
  #open .p-0 { padding: 0; }
  #open .mb-6 { margin-bottom: 1.5rem; }
  #open .mb-3 { margin-bottom: 0.75rem; }
  #open .mb-3\.5 { margin-bottom: 0.875rem; }
  #open .mb-\[18px\] { margin-bottom: 18px; }
  #open .mt-\[30px\] { margin-top: 30px; }
  #open .mt-4 { margin-top: 1rem; }

  /* box */
  #open .col-span-2 { grid-column: span 2 / span 2; }
  #open .min-h-\[34px\] { min-height: 34px; }
  #open .max-w-\[46ch\] { max-width: 46ch; }
  #open .rounded-xl { border-radius: 12px; }
  #open .size-\[18px\] { width: 18px; height: 18px; }
  #open .size-3\.5 { width: 0.875rem; height: 0.875rem; }
  #open .size-6 { width: 1.5rem; height: 1.5rem; }

  /* borders - this layout has no global border-style reset (chatwoot's Tailwind preflight
     sets border-style: solid on *), and border-*-width computes to 0 unless a style is set,
     so every border utility must supply its own style. */
  #open .border { border-width: 1px; border-style: solid; }
  #open.border-t,
  #open .border-t { border-top-style: solid; }
  #open.border-b,
  #open .border-b { border-bottom-style: solid; }
  #open .border-e { border-inline-end-width: 1px; border-inline-end-style: solid; }
  #open .border-\[rgba\(60\,43\,16\,0\.16\)\] { border-color: rgba(60, 43, 16, 0.16); }
  #open .border-\[rgba\(60\,43\,16\,0\.18\)\] { border-color: rgba(60, 43, 16, 0.18); }
  #open .border-\[rgba\(64\,42\,22\,0\.45\)\] { border-color: rgba(64, 42, 22, 0.45); }
  #open .border-white\/\[0\.12\] { border-color: rgba(255, 255, 255, 0.12); }

  /* surfaces + colour */
  #open .bg-\[\#FFCB47\] { background-color: #FFCB47; }
  #open .bg-\[\#3C2B10\] { background-color: #3C2B10; }
  #open .bg-\[\#1B1206\] { background-color: #1B1206; }
  #open .bg-\[rgba\(60\,43\,16\,0\.18\)\] { background-color: rgba(60, 43, 16, 0.18); }
  #open .text-\[\#3C2B10\] { color: #3C2B10; }
  #open .text-\[\#C9A978\] { color: #C9A978; }
  #open .text-\[\#FFD98A\] { color: #FFD98A; }
  #open .text-\[\#FFCB47\] { color: #FFCB47; }
  #open .text-\[\#8A754E\] { color: #8A754E; }
  #open .shadow-\[0_20px_40px_-30px_rgba\(64\,42\,22\,0\.8\)\] { box-shadow: 0 20px 40px -30px rgba(64, 42, 22, 0.8); }

  /* type: font sizes first, then leading so it can override */
  #open .text-\[28px\] { font-size: 28px; line-height: 1.5; }
  #open .text-\[21px\] { font-size: 21px; line-height: 1.5; }
  #open .text-\[10\.5px\] { font-size: 10.5px; line-height: 1.5; }
  #open .leading-relaxed { line-height: 1.625; }
  #open .leading-tight { line-height: 1.25; }
  #open .leading-\[22px\] { line-height: 22px; }
  #open .tracking-\[-0\.03em\] { letter-spacing: -0.03em; }
  #open .tracking-\[0\.05em\] { letter-spacing: 0.05em; }
  #open .tracking-\[0\.1em\] { letter-spacing: 0.1em; }
  #open .uppercase { text-transform: uppercase; }
  #open .list-none { list-style: none; }
  #open .hover\:underline:hover { text-decoration-line: underline; }
  #open .hover\:text-\[\#3C2B10\]:hover { color: #3C2B10; }
  #open .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) { text-align: right; }
  /* chatwoot's global link colour shows through on the tag <a>; inert because the
     .section-tag__face sets its own colour, kept only so the computed style matches. */
  #open .section-tag--link { color: #086DE0; }

  /* the section's buttons use chatwoot's 560 weight (this layout's global .cw-btn is 600) */
  #open .cw-btn { font-weight: 560; }

  /* stretched ::after link on the "Type II compliant" tile */
  #open .after\:absolute::after { position: absolute; }
  #open .after\:inset-0::after { inset: 0px; }
  #open dl a:focus-visible { outline: none; }
  #open .focus-visible\:after\:ring-inset:focus-visible::after { --tw-ring-inset: inset; }
  #open .focus-visible\:after\:ring-\[\#3C2B10\]:focus-visible::after { --tw-ring-color: #3C2B10; }
  #open .focus-visible\:after\:ring-2:focus-visible::after {
    box-shadow: var(--tw-ring-inset, ) 0 0 0 2px var(--tw-ring-color, #3C2B10);
  }

  @media (min-width: 440px) {
    #open .min-\[440px\]\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #open .min-\[440px\]\:col-span-1 { grid-column: span 1 / span 1; }
  }

  /* component classes */
  #open .open__pixels { background-repeat: repeat; background-size: 80px 32px; background-position: 0% 0%; }
  #open .open__pixels--start { background-image: url("/images/home/redesign/customers/open-pixels-start.svg"); }
  #open .open__pixels--end { background-image: url("/images/home/redesign/customers/open-pixels-end.svg"); }
  #open .open__grid {
    background-image:
      linear-gradient(90deg, rgba(60, 43, 16, 0.12) 1px, rgba(0, 0, 0, 0) 0),
      linear-gradient(rgba(60, 43, 16, 0.12) 1px, rgba(0, 0, 0, 0) 0);
    background-size: 80px 80px, 80px 80px;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 55%, #000);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 55%, #000);
  }
  #open .open__btn--dark { background-color: #3C2B10; color: #fff; box-shadow: inset 0 0 0 1px #3C2B10, 0 2px 0 #1F1608; }
  #open .open__btn--dark:hover { filter: brightness(1.08); }
  #open .open__btn--light { background-color: #FFF6DC; color: #3C2B10; box-shadow: inset 0 0 0 1px rgba(60, 43, 16, 0.35), 0 2px 0 rgba(60, 43, 16, 0.2); }
  #open .open__btn--light:hover { background-color: #FFFBEE; }
  #open .open__stat-label {
    margin-top: 5px;
    font-size: 9.5px; line-height: 14.25px; letter-spacing: 1.235px;
    text-transform: uppercase; font-weight: 400; color: #3C2B10;
  }
  #open .open__cursor {
    display: inline-block; width: 7px; height: 13px; margin-left: 8px; vertical-align: -2px;
    background-color: #FFD98A; animation: open-blink 1s steps(1) infinite;
  }
  @keyframes open-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.2; } }
  @media (prefers-reduced-motion: reduce) { #open .open__cursor { animation: none; } }

  /* =========================================================================
     Unified Sytira AI Subpage (/ai) Styles - 1:1 with Chatwoot Captain
     ========================================================================= */


.cw-btn { letter-spacing: -0.005em; }

.cw-btn-lg { border-radius: 0.5rem; font-size: 1rem; height: 3rem; line-height: 1.5rem; padding-left: 1.25rem; padding-right: 1.25rem; }

.cw-btn-primary { --tw-bg-opacity: 1; background-color: rgb(24 117 238/var(--tw-bg-opacity,1)); }

.cw-btn-primary, .cw-btn-primary:hover { --tw-text-opacity: 1; color: rgb(255 255 255/var(--tw-text-opacity,1)); }

.cw-btn-secondary { background-color: rgb(255 255 255/var(--tw-bg-opacity,1)); }

.cw-btn-secondary, .cw-btn-secondary:hover { --tw-bg-opacity: 1; --tw-text-opacity: 1; color: rgb(28 32 36/var(--tw-text-opacity,1)); }

.cw-btn-secondary { box-shadow: rgb(217, 219, 224) 0px 0px 0px 1px inset, rgba(28, 32, 36, 0.06) 0px 1px 2px; }

.cw-eyebrow { font-family: var(--font-label); font-size: 10px; text-transform: uppercase; --tw-text-opacity: 1; color: rgb(110 114 121/var(--tw-text-opacity,1)); letter-spacing: 0.14em; }

.absolute { position: absolute; }

.relative { position: relative; }

.inset-0 { inset: 0px; }

.order-1 { order: 1; }

.order-2 { order: 2; }

.m-0 { margin: 0px; }

.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }

.my-1 { margin-bottom: 0.25rem; margin-top: 0.25rem; }

.mb-0 { margin-bottom: 0px; }

.mb-1 { margin-bottom: 0.25rem; }

.mb-1\.5 { margin-bottom: 0.375rem; }

.mb-2 { margin-bottom: 0.5rem; }

.mb-2\.5 { margin-bottom: 0.625rem; }

.mb-3 { margin-bottom: 0.75rem; }

.mb-4 { margin-bottom: 1rem; }

.mt-1 { margin-top: 0.25rem; }

.mt-1\.5 { margin-top: 0.375rem; }

.mt-2\.5 { margin-top: 0.625rem; }

.mt-3 { margin-top: 0.75rem; }

.mt-7 { margin-top: 1.75rem; }

.mt-\[18px\] { margin-top: 18px; }

.line-clamp-1 { -webkit-line-clamp: 1; }

.line-clamp-1, .line-clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }

.flex { display: flex; }

.inline-flex { display: inline-flex; }

.grid { display: grid; }

.aspect-video { aspect-ratio: 16 / 9; }

.h-10 { height: 2.5rem; }

.h-11 { height: 2.75rem; }

.h-2\.5 { height: 0.625rem; }

.h-3 { height: 0.75rem; }

.h-3\.5 { height: 0.875rem; }

.h-4 { height: 1rem; }

.h-5 { height: 1.25rem; }

.h-6 { height: 1.5rem; }

.h-7 { height: 1.75rem; }

.h-8 { height: 2rem; }

.h-9 { height: 2.25rem; }

.h-\[18px\] { height: 18px; }

.h-px { height: 1px; }

.w-3 { width: 0.75rem; }

.w-3\.5 { width: 0.875rem; }

.w-4 { width: 1rem; }

.w-5 { width: 1.25rem; }

.w-6 { width: 1.5rem; }

.w-7 { width: 1.75rem; }

.w-9 { width: 2.25rem; }

.w-\[18px\] { width: 18px; }

.w-full { width: 100%; }

.min-w-0 { min-width: 0px; }

.max-w-\[440px\] { max-width: 440px; }

.max-w-\[460px\] { max-width: 460px; }

.max-w-\[56ch\] { max-width: 56ch; }

.max-w-\[60ch\] { max-width: 60ch; }

.max-w-\[640px\] { max-width: 640px; }

.max-w-\[80\%\] { max-width: 80%; }

.max-w-\[820px\] { max-width: 820px; }

.max-w-\[85\%\] { max-width: 85%; }

.max-w-\[900px\] { max-width: 900px; }

.flex-1 { flex: 1 1 0%; }

.flex-\[1_1_440px\] { flex: 1 1 440px; }

.shrink-0 { flex-shrink: 0; }

@keyframes bounce { 
  0%, 100% { animation-timing-function: cubic-bezier(0.8, 0, 1, 1); transform: translateY(-25%); }
  50% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); transform: none; }
}

@keyframes pulse { 
  50% { opacity: 0.5; }
}

@keyframes spin { 
  100% { transform: rotate(1turn); }
}

.cursor-pointer { cursor: pointer; }

.list-none { list-style-type: none; }

.flex-col { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.place-items-center { place-items: center; }

.items-start { align-items: flex-start; }

.items-end { align-items: flex-end; }

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

.justify-end { justify-content: flex-end; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.gap-1 { gap: 0.25rem; }

.gap-1\.5 { gap: 0.375rem; }

.gap-2 { gap: 0.5rem; }

.gap-2\.5 { gap: 0.625rem; }

.gap-3 { gap: 0.75rem; }

.gap-3\.5 { gap: 0.875rem; }

.gap-4 { gap: 1rem; }

.gap-px { gap: 1px; }

.gap-x-12 { column-gap: 3rem; }

.gap-y-8 { row-gap: 2rem; }

.overflow-hidden { overflow: hidden; }

.whitespace-nowrap { white-space: nowrap; }

.rounded { border-radius: 0.25rem; }

.rounded-\[10px\] { border-radius: 10px; }

.rounded-lg { border-radius: 0.5rem; }

.rounded-md { border-radius: 0.375rem; }

.rounded-xl { border-radius: 0.75rem; }

.rounded-s { border-end-start-radius: 0.25rem; border-start-start-radius: 0.25rem; }

.rounded-se-sm { border-start-end-radius: 0.125rem; }

.rounded-ss-sm { border-start-start-radius: 0.125rem; }

.sytira-ai-page,
.sytira-ai-page *,
.sytira-ai-page *::before,
.sytira-ai-page *::after {
  border: 0 solid #EDEDF0;
}

.sytira-ai-page .border { border-width: 1px; }
.sytira-ai-page .border-b { border-bottom-width: 1px; }
.sytira-ai-page .border-t { border-top-width: 1px; }
.sytira-ai-page .border-l { border-left-width: 1px; }
.sytira-ai-page .border-r { border-right-width: 1px; }
.sytira-ai-page .border-y { border-top-width: 1px; border-bottom-width: 1px; }
.sytira-ai-page .border-x { border-left-width: 1px; border-right-width: 1px; }
.sytira-ai-page .cw-frame { border-left-width: 1px; border-right-width: 1px; border-color: #F0F0F2; }

.border-\[\#D9CCFA\] { --tw-border-opacity: 1; border-color: rgb(217 204 250/var(--tw-border-opacity,1)); }

.border-\[\#E4E5E9\] { --tw-border-opacity: 1; border-color: rgb(228 229 233/var(--tw-border-opacity,1)); }

.border-line { --tw-border-opacity: 1; border-color: rgb(237 237 240/var(--tw-border-opacity,1)); }

.bg-\[\#7E5BDC\] { --tw-bg-opacity: 1; background-color: rgb(126 91 220/var(--tw-bg-opacity,1)); }

.bg-\[\#E6E8EB\] { --tw-bg-opacity: 1; background-color: rgb(230 232 235/var(--tw-bg-opacity,1)); }

.bg-\[\#EAF2FE\] { --tw-bg-opacity: 1; background-color: rgb(234 242 254/var(--tw-bg-opacity,1)); }

.bg-\[\#F1ECFF\] { --tw-bg-opacity: 1; background-color: rgb(241 236 255/var(--tw-bg-opacity,1)); }

.bg-\[\#F4F5F7\] { --tw-bg-opacity: 1; background-color: rgb(244 245 247/var(--tw-bg-opacity,1)); }

.bg-\[\#F7F8F8\] { --tw-bg-opacity: 1; background-color: rgb(247 248 248/var(--tw-bg-opacity,1)); }

.bg-\[\#F8FAFC\] { --tw-bg-opacity: 1; background-color: rgb(248 250 252/var(--tw-bg-opacity,1)); }

.bg-\[\#FCFCFD\] { --tw-bg-opacity: 1; background-color: rgb(252 252 253/var(--tw-bg-opacity,1)); }

.bg-black\/10 { background-color: rgba(0, 0, 0, 0.1); }

.bg-line { --tw-bg-opacity: 1; background-color: rgb(237 237 240/var(--tw-bg-opacity,1)); }

.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255/var(--tw-bg-opacity,1)); }

.bg-\[radial-gradient\(\#E3E5E9_1px\,transparent_1px\)\] { background-image: radial-gradient(rgb(227, 229, 233) 1px, rgba(0, 0, 0, 0) 0px); }

.bg-\[length\:12px_12px\] { background-size: 12px 12px; }

.object-cover { object-fit: cover; }

.p-0 { padding: 0px; }

.p-3 { padding: 0.75rem; }

.p-3\.5 { padding: 0.875rem; }

.p-4 { padding: 1rem; }

.p-\[2px\] { padding: 2px; }

.p-\[clamp\(24px\,4vw\,40px\)\] { padding: clamp(24px, 4vw, 40px); }

.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }

.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }

.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }

.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }

.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-0\.5 { padding-bottom: 0.125rem; padding-top: 0.125rem; }

.py-1 { padding-bottom: 0.25rem; padding-top: 0.25rem; }

.py-2 { padding-bottom: 0.5rem; padding-top: 0.5rem; }

.py-2\.5 { padding-bottom: 0.625rem; padding-top: 0.625rem; }

.py-5 { padding-bottom: 1.25rem; padding-top: 1.25rem; }

.py-\[clamp\(40px\,5vw\,64px\)\] { padding-bottom: clamp(40px, 5vw, 64px); padding-top: clamp(40px, 5vw, 64px); }

.py-\[clamp\(40px\,5vw\,72px\)\] { padding-bottom: clamp(40px, 5vw, 72px); padding-top: clamp(40px, 5vw, 72px); }

.pb-7 { padding-bottom: 1.75rem; }

.pb-\[clamp\(22px\,2\.4vw\,28px\)\] { padding-bottom: clamp(22px, 2.4vw, 28px); }

.pb-\[clamp\(28px\,3vw\,40px\)\] { padding-bottom: clamp(28px, 3vw, 40px); }

.pb-\[clamp\(40px\,5vw\,56px\)\] { padding-bottom: clamp(40px, 5vw, 56px); }

.pb-\[clamp\(40px\,5vw\,64px\)\] { padding-bottom: clamp(40px, 5vw, 64px); }

.pe-1\.5 { padding-inline-end: 0.375rem; }

.pe-\[23px\] { padding-inline-end: 23px; }

.ps-1 { padding-inline-start: 0.25rem; }

.ps-2 { padding-inline-start: 0.5rem; }

.ps-3 { padding-inline-start: 0.75rem; }

.pt-6 { padding-top: 1.5rem; }

.pt-\[clamp\(32px\,3\.4vw\,44px\)\] { padding-top: clamp(32px, 3.4vw, 44px); }

.pt-\[clamp\(44px\,5\.4vw\,76px\)\] { padding-top: clamp(44px, 5.4vw, 76px); }

.font-display, .font-haskoy { font-family: var(--font-brand); }

.font-label { font-family: var(--font-label); }

.text-\[10\.5px\] { font-size: 10.5px; }

.text-\[11px\] { font-size: 11px; }

.text-\[13px\] { font-size: 13px; }

.text-\[14\.5px\] { font-size: 14.5px; }

.text-\[15\.5px\] { font-size: 15.5px; }

.text-\[15px\] { font-size: 15px; }

.text-\[17px\] { font-size: 17px; }

.text-\[clamp\(26px\,3vw\,38px\)\] { font-size: clamp(26px, 3vw, 38px); }

.text-\[clamp\(32px\,3\.6vw\,48px\)\] { font-size: clamp(32px, 3.6vw, 48px); }

.text-base { font-size: 1rem; line-height: 1.5rem; }

.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }

.font-bold { font-weight: 700; }

.font-medium { font-weight: 500; }

.font-semibold { font-weight: 600; }

.leading-\[1\.05\] { line-height: 1.05; }

.leading-\[1\.08\] { line-height: 1.08; }

.leading-\[1\.25\] { line-height: 1.25; }

.leading-\[1\.55\] { line-height: 1.55; }

.leading-\[1\.6\] { line-height: 1.6; }

.leading-relaxed { line-height: 1.625; }

.tracking-\[-0\.015em\] { letter-spacing: -0.015em; }

.tracking-\[-0\.035em\] { letter-spacing: -0.035em; }

.tracking-\[-0\.04em\] { letter-spacing: -0.04em; }

.text-\[\#0E7A57\] { --tw-text-opacity: 1; color: rgb(14 122 87/var(--tw-text-opacity,1)); }

.text-\[\#0F1113\] { --tw-text-opacity: 1; color: rgb(15 17 19/var(--tw-text-opacity,1)); }

.text-\[\#0F2459\] { --tw-text-opacity: 1; color: rgb(15 36 89/var(--tw-text-opacity,1)); }

.text-\[\#12946A\] { --tw-text-opacity: 1; color: rgb(18 148 106/var(--tw-text-opacity,1)); }

.text-\[\#1875EE\] { --tw-text-opacity: 1; color: rgb(24 117 238/var(--tw-text-opacity,1)); }

.text-\[\#5B3FA8\] { --tw-text-opacity: 1; color: rgb(91 63 168/var(--tw-text-opacity,1)); }

.text-\[\#7E5BDC\] { --tw-text-opacity: 1; color: rgb(126 91 220/var(--tw-text-opacity,1)); }

.text-\[\#80838D\] { --tw-text-opacity: 1; color: rgb(128 131 141/var(--tw-text-opacity,1)); }

.text-\[\#8A5A00\] { --tw-text-opacity: 1; color: rgb(138 90 0/var(--tw-text-opacity,1)); }

.text-\[\#9AA0A8\] { --tw-text-opacity: 1; color: rgb(154 160 168/var(--tw-text-opacity,1)); }

.text-\[\#C98A0E\] { --tw-text-opacity: 1; color: rgb(201 138 14/var(--tw-text-opacity,1)); }

.text-ink { --tw-text-opacity: 1; color: rgb(28 32 36/var(--tw-text-opacity,1)); }

.text-mute { --tw-text-opacity: 1; color: rgb(96 100 108/var(--tw-text-opacity,1)); }

.text-white { --tw-text-opacity: 1; color: rgb(255 255 255/var(--tw-text-opacity,1)); }

.underline { text-decoration-line: underline; }

.decoration-\[\#D9DBE0\] { text-decoration-color: rgb(217, 219, 224); }

.underline-offset-4 { text-underline-offset: 4px; }

.shadow-\[0_0_0_1px_\#D9CCFA\] { --tw-shadow: 0 0 0 1px #d9ccfa; --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }

.shadow-\[0_0_0_1px_\#E3E4E8\] { --tw-shadow: 0 0 0 1px #e3e4e8; --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }

.shadow-\[0_0_0_1px_\#E4E5E9\], .shadow-\[0_0_0_1px_\#E6E8EB\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }

.shadow-\[0_0_0_1px_\#E6E8EB\] { --tw-shadow: 0 0 0 1px #e6e8eb; --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); }

.shadow-\[inset_0_-1px_0_\#E4E5E9\], .shadow-\[inset_0_-1px_0_\#E6E8EB\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }

.shadow-\[inset_0_-1px_0_\#E6E8EB\] { --tw-shadow: inset 0 -1px 0 #e6e8eb; --tw-shadow-colored: inset 0 -1px 0 var(--tw-shadow-color); }

.shadow-\[inset_0_0_0_1px_\#E3E4E8\] { --tw-shadow: inset 0 0 0 1px #e3e4e8; --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color); }

.shadow-\[inset_0_0_0_1px_\#E3E4E8\], .shadow-\[inset_0_0_0_1px_\#E4E5E9\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }

.shadow-\[inset_0_0_0_1px_\#E4E5E9\] { --tw-shadow: inset 0 0 0 1px #e4e5e9; --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color); }

.shadow-\[inset_0_0_0_1px_\#E6E8EB\] { --tw-shadow: inset 0 0 0 1px #e6e8eb; --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color); }

.shadow-\[inset_0_0_0_1px_\#E6E8EB\], .shadow-\[inset_0_0_0_1px_\#E8E9EC\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }

.shadow-\[inset_0_2px_0_\#2781F6\], .shadow-\[inset_0_2px_0_\#7E5BDC\] { box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }

.shadow-\[inset_0_2px_0_\#7E5BDC\] { --tw-shadow: inset 0 2px 0 #7e5bdc; --tw-shadow-colored: inset 0 2px 0 var(--tw-shadow-color); }

.transition-colors { transition-duration: 0.15s; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.\[text-wrap\:balance\] { text-wrap: balance; }

.\[text-wrap\:pretty\] { text-wrap: pretty; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .lg\:text-\[18px\] { font-size: 18px; }
}

.\[\&\>path\]\:fill-\[\#7E5BDC\] > path { fill: rgb(126, 91, 220); }

.\[\&\>path\]\:fill-white > path { fill: rgb(255, 255, 255); }


.icon [stroke-width="2"] { stroke-width: 1.5; }

.icon[data-v-4a5c249e] { display: inline-block; vertical-align: middle; }

.section-tag[data-v-a04842be] { filter: drop-shadow(3px 3px 0 var(--tag-ink)); transition: transform 0.2s ease-out; }

.section-tag__outline[data-v-a04842be] { background: var(--tag-ink); }

.section-tag__face[data-v-a04842be], .section-tag__outline[data-v-a04842be] { clip-path: polygon(0px 0px, calc(100% - 11px) 0px, calc(100% - 0.6px) calc(50% - 1px), calc(100% - 0.6px) calc(50% + 1px), calc(100% - 11px) 100%, 0px 100%); }

.section-tag__face[data-v-a04842be] { border-end-start-radius: 2px; border-start-start-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .section-tag[data-v-a04842be] { transition: none; }
}

@keyframes hero-blink-25092d40 { 
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

@keyframes hero-float-25092d40 { 
  0%, 100% { translate: 0px; }
  50% { translate: 0px -5px; }
}

@keyframes logo-marquee-25092d40 { 
  0% { transform: translate(0px); }
  100% { transform: translate(-50%); }
}

@keyframes logo-marquee-rtl-25092d40 { 
  0% { transform: translate(0px); }
  100% { transform: translate(50%); }
}

@keyframes cap-float-ad014b26 { 
  0%, 100% { translate: 0px; }
  50% { translate: 0px -5px; }
}

@keyframes cap-progress-93a66222 { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes channels-float-361978df { 
  0%, 100% { translate: 0px; }
  50% { translate: 0px -5px; }
}

@keyframes channels-progress-f58626c1 { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes voice-ring-3d18825d { 
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes voice-blink-3d18825d { 
  50% { opacity: 0.25; }
}

@keyframes voice-wave-3d18825d { 
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

@keyframes hc-progress-34fb6f92 { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes hc-float-34fb6f92 { 
  0%, 100% { translate: 0px; }
  50% { translate: 0px -5px; }
}

@keyframes solutions-dot-da9eae45 { 
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0px); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@keyframes open-blink-d927fbe9 { 
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

@keyframes move-9eb1f843 { 
  0% { left: 0px; }
  100% { left: 110%; }
}

/* =========================================================================
   Sytira Features Page (Chatwoot 1:1 Architecture)
   ========================================================================= */
.sytira-features-page {
  background-color: #ffffff;
  color: #1C2024;
}

.sytira-features-page,
.sytira-features-page *,
.sytira-features-page *::before,
.sytira-features-page *::after {
  box-sizing: border-box;
  border: 0 solid #EDEDF0;
}

.sytira-features-page .border { border-width: 1px; }
.sytira-features-page .border-b { border-bottom-width: 1px; }
.sytira-features-page .border-t { border-top-width: 1px; }
.sytira-features-page .border-l { border-left-width: 1px; }
.sytira-features-page .border-r { border-right-width: 1px; }
.sytira-features-page .border-y { border-top-width: 1px; border-bottom-width: 1px; }
.sytira-features-page .border-x { border-left-width: 1px; border-right-width: 1px; }
.sytira-features-page .border-line { border-color: #EDEDF0; }
.sytira-features-page .bg-line { background-color: #EDEDF0; }
.sytira-features-page .cw-frame { border-left-width: 1px; border-right-width: 1px; border-color: #F0F0F2; }
.sytira-features-page .cw-pixel-band { border-width: 1px; border-color: #EDEDF0; }

.sytira-features-page .scroll-mt-16 {
  scroll-margin-top: 4rem;
}

.sytira-features-page .cw-rule {
  position: relative;
}

.sytira-features-page .text-center {
  text-align: center !important;
}

.sytira-features-page .cw-rule a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.35;
}

.sytira-features-page .basis-full {
  flex-basis: 100%;
}

.sytira-features-page .gap-x-5 {
  column-gap: 1.25rem;
}
.sytira-features-page .gap-y-2 {
  row-gap: 0.5rem;
}

.sytira-features-page .h-3\.5 { height: 0.875rem; }
.sytira-features-page .w-3\.5 { width: 0.875rem; }
.sytira-features-page .h-\[18px\] { height: 18px; }
.sytira-features-page .w-\[18px\] { width: 18px; }

.sytira-features-page .mt-1\.5 { margin-top: 0.375rem; }
.sytira-features-page .mt-2\.5 { margin-top: 0.625rem; }
.sytira-features-page .mt-5 { margin-top: 1.25rem; }
.sytira-features-page .mt-\[18px\] { margin-top: 18px; }

.sytira-features-page .p-\[2px\] { padding: 2px; }
.sytira-features-page .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.sytira-features-page .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.sytira-features-page .pe-\[23px\] { padding-inline-end: 23px; }

.sytira-features-page .pt-\[clamp\(32px\,3\.4vw\,44px\)\] { padding-top: clamp(32px, 3.4vw, 44px); }
.sytira-features-page .pb-\[clamp\(22px\,2\.4vw\,28px\)\] { padding-bottom: clamp(22px, 2.4vw, 28px); }
.sytira-features-page .pt-\[clamp\(44px\,5\.4vw\,76px\)\] { padding-top: clamp(44px, 5.4vw, 76px); }
.sytira-features-page .pb-\[clamp\(40px\,5vw\,64px\)\] { padding-bottom: clamp(40px, 5vw, 64px); }
.sytira-features-page .py-\[clamp\(40px\,5vw\,72px\)\] { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }

.sytira-features-page .max-w-\[56ch\] { max-width: 56ch; }
.sytira-features-page .max-w-\[60ch\] { max-width: 60ch; }
.sytira-features-page .max-w-\[640px\] { max-width: 640px; }
.sytira-features-page .max-w-\[820px\] { max-width: 820px; }
.sytira-features-page .max-w-\[980px\] { max-width: 980px; }

.sytira-features-page .leading-\[1\.05\] { line-height: 1.05; }
.sytira-features-page .leading-\[1\.08\] { line-height: 1.08; }
.sytira-features-page .leading-\[1\.3\] { line-height: 1.3; }
.sytira-features-page .leading-\[1\.55\] { line-height: 1.55; }
.sytira-features-page .leading-\[1\.6\] { line-height: 1.6; }

.sytira-features-page .tracking-\[-0\.015em\] { letter-spacing: -0.015em; }
.sytira-features-page .tracking-\[-0\.035em\] { letter-spacing: -0.035em; }
.sytira-features-page .tracking-\[-0\.04em\] { letter-spacing: -0.04em; }

.sytira-features-page .text-\[11px\] { font-size: 11px; }
.sytira-features-page .text-\[14\.5px\] { font-size: 14.5px; }
.sytira-features-page .text-\[15px\] { font-size: 15px; }
.sytira-features-page .text-\[15\.5px\] { font-size: 15.5px; }
.sytira-features-page .text-\[17px\] { font-size: 17px; }
.sytira-features-page .text-\[clamp\(26px\,3vw\,38px\)\] { font-size: clamp(26px, 3vw, 38px); }
.sytira-features-page .text-\[clamp\(32px\,3\.6vw\,48px\)\] { font-size: clamp(32px, 3.6vw, 48px); }

.sytira-features-page .text-\[\#0F1113\] { color: #0F1113; }
.sytira-features-page .text-\[\#12946A\] { color: #12946A; }
.sytira-features-page .text-\[\#1C2024\] { color: #1C2024; }
.sytira-features-page .text-\[\#2781F6\] { color: #2781F6; }
.sytira-features-page .text-\[\#7E5BDC\] { color: #7E5BDC; }
.sytira-features-page .text-\[\#C7881A\] { color: #C7881A; }

.sytira-features-page .shadow-\[1px_0_0_\#EDEDF0\,0_1px_0_\#EDEDF0\] {
  box-shadow: 1px 0 0 #EDEDF0, 0 1px 0 #EDEDF0;
}
html[dir="rtl"] .sytira-features-page .rtl\:shadow-\[-1px_0_0_\#EDEDF0\,0_1px_0_\#EDEDF0\] {
  box-shadow: -1px 0 0 #EDEDF0, 0 1px 0 #EDEDF0;
}

.sytira-features-page .shadow-\[inset_0_0_0_1px_\#E0E2E6\] {
  box-shadow: inset 0 0 0 1px #E0E2E6;
}
.sytira-features-page .shadow-\[inset_0_0_0_1px_\#E6E8EB\] {
  box-shadow: inset 0 0 0 1px #E6E8EB;
}

.sytira-features-page .hover\:bg-\[\#FBFCFD\]:hover {
  background-color: #FBFCFD;
}
.sytira-features-page .group:hover .group-hover\:text-\[\#086DE0\] {
  color: #086DE0;
}
.sytira-features-page .hover\:text-ink:hover {
  color: #1C2024;
}

.sytira-features-page .\[\&>path\]\:fill-violet-600 > path,
.sytira-features-page .\[\&amp;\>path\]\:fill-violet-600 > path {
  fill: #7c3aed;
}

@media (min-width: 640px) {
  .sytira-features-page .sm\:block { display: block; }
  .sytira-features-page .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .sytira-features-page .lg\:block { display: block; }
  .sytira-features-page .lg\:hidden { display: none; }
  .sytira-features-page .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sytira-features-page .lg\:text-\[18px\] { font-size: 18px; }
}

@media (min-width: 1280px) {
  .sytira-features-page .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}


/* --- Sytira Chatbots Page Dedicated Styles --- */

@keyframes dot-in { 
  0% { opacity: 1; transform: translate(56px, -50%); }
  100% { opacity: 1; transform: translateY(-50%); }
}
@keyframes dot-up { 
  0% { opacity: 1; transform: translate(-50%, 200px); }
  100% { opacity: 1; transform: translate(-50%); }
}
@keyframes dot-down { 
  0% { opacity: 1; transform: translate(-50%); }
  100% { opacity: 1; transform: translate(-50%, 200px); }
}
@keyframes dot-out { 
  0% { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 1; transform: translate(56px, -50%); }
}
@keyframes ai-blink { 
  0%, 100% { box-shadow: rgba(139, 92, 246, 0.35) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(139, 92, 246, 0) 0px 0px 0px 8px; }
}
@keyframes typing-bounce { 
  0%, 60%, 100% { opacity: 0.5; transform: translateY(0px); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.cw-rule::after { background: rgb(237, 237, 240); bottom: -1px; content: ""; height: 1px; left: 50%; pointer-events: none; position: absolute; transform: translateX(-50%); width: 100vw; z-index: 1; }
.cw-btn:focus-visible { outline: rgba(0, 0, 0, 0) solid 2px; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000); --tw-ring-opacity: 1; --tw-ring-color: rgb(39 129 246/var(--tw-ring-opacity,1)); --tw-ring-offset-width: 2px; }
.-end-1 { inset-inline-end: -0.25rem; }
.-end-1\.5 { inset-inline-end: -0.375rem; }
.bottom-12 { bottom: 3rem; }
.left-1 { left: 0.25rem; }
.left-1\/2 { left: 50%; }
.left-2 { left: 0.5rem; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.col-start-1 { grid-column-start: 1; }
.row-start-1 { grid-row-start: 1; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.ml-1 { margin-left: 0.25rem; }
.ms-auto { margin-inline-start: auto; }
.hidden { display: none; }
.w-16 { width: 4rem; }
.w-2\.5 { width: 0.625rem; }
.w-2\/3 { width: 66.6667%; }
.w-8 { width: 2rem; }
.w-px { width: 1px; }
.border-collapse { border-collapse: collapse; }
.border-separate { border-collapse: initial; }
.border-spacing-0 { --tw-border-spacing-x: 0px; --tw-border-spacing-y: 0px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); }
.translate-y-0 { --tw-translate-y: 0px; }
.translate-y-0, .translate-y-0\.5 { transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-y-0\.5 { --tw-translate-y: 0.125rem; }
.translate-y-1 { --tw-translate-y: 0.25rem; }
.translate-y-1, .translate-y-1\.5 { transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-y-1\.5 { --tw-translate-y: 0.375rem; }
.animate-pulse { animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running pulse; }
.justify-items-center { justify-items: center; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-2\.5 { row-gap: 0.625rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(.5rem*var(--tw-space-y-reverse)); margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse))); }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(.625rem*var(--tw-space-y-reverse)); margin-top: calc(.625rem*(1 - var(--tw-space-y-reverse))); }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(.75rem*var(--tw-space-y-reverse)); margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse))); }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(.875rem*var(--tw-space-y-reverse)); margin-top: calc(.875rem*(1 - var(--tw-space-y-reverse))); }
.rounded-2xl { border-radius: 1rem; }
.rounded-\[12px\] { border-radius: 12px; }
.rounded-\[3px\] { border-radius: 3px; }
.rounded-\[4px\] { border-radius: 4px; }
.rounded-\[6px\] { border-radius: 6px; }
.rounded-\[9px\] { border-radius: 9px; }
.rounded-e-\[3px\] { border-end-end-radius: 3px; border-start-end-radius: 3px; }
.rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.rounded-t-\[3px\] { border-top-left-radius: 3px; border-top-right-radius: 3px; }
.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }
.rounded-t-sm { border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; }
.rounded-t-xl { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.rounded-bl-sm { border-bottom-left-radius: 0.125rem; }
.rounded-br-sm { border-bottom-right-radius: 0.125rem; }
.rounded-ee-\[4px\] { border-end-end-radius: 4px; }
.rounded-ee-md { border-end-end-radius: 0.375rem; }
.rounded-ee-sm { border-end-end-radius: 0.125rem; }
.rounded-es-\[4px\] { border-end-start-radius: 4px; }
.rounded-es-md { border-end-start-radius: 0.375rem; }
.rounded-es-sm { border-end-start-radius: 0.125rem; }
.border-2 { border-width: 2px; }
.border-8 { border-width: 8px; }
.border-\[1\.5px\] { border-width: 1.5px; }
.border-\[4px\] { border-width: 4px; }
.border-s { border-inline-start-width: 1px; }
.border-s-2 { border-inline-start-width: 2px; }
.border-s-4 { border-inline-start-width: 4px; }
.border-dashed { border-style: dashed; }
.border-\[\#0F1113\] { --tw-border-opacity: 1; border-color: rgb(15 17 19/var(--tw-border-opacity,1)); }
.border-\[\#12946A\] { --tw-border-opacity: 1; border-color: rgb(18 148 106/var(--tw-border-opacity,1)); }
.border-\[\#1875EE\] { --tw-border-opacity: 1; border-color: rgb(24 117 238/var(--tw-border-opacity,1)); }
.border-\[\#2781F6\] { --tw-border-opacity: 1; border-color: rgb(39 129 246/var(--tw-border-opacity,1)); }
.border-\[\#2A2E35\] { --tw-border-opacity: 1; border-color: rgb(42 46 53/var(--tw-border-opacity,1)); }
.border-\[\#2B2F36\] { --tw-border-opacity: 1; border-color: rgb(43 47 54/var(--tw-border-opacity,1)); }
.border-\[\#6E56CF\] { --tw-border-opacity: 1; border-color: rgb(110 86 207/var(--tw-border-opacity,1)); }
.border-\[\#7E5BDC\] { --tw-border-opacity: 1; border-color: rgb(126 91 220/var(--tw-border-opacity,1)); }
.border-\[\#9AA0A8\] { --tw-border-opacity: 1; border-color: rgb(154 160 168/var(--tw-border-opacity,1)); }
.border-\[\#9EA2A9\] { --tw-border-opacity: 1; border-color: rgb(158 162 169/var(--tw-border-opacity,1)); }
.border-\[\#B0B4BA\] { --tw-border-opacity: 1; border-color: rgb(176 180 186/var(--tw-border-opacity,1)); }
.border-\[\#B9BBC6\] { --tw-border-opacity: 1; border-color: rgb(185 187 198/var(--tw-border-opacity,1)); }
.border-\[\#C9CCD1\] { --tw-border-opacity: 1; border-color: rgb(201 204 209/var(--tw-border-opacity,1)); }
.border-\[\#C9CCD2\] { --tw-border-opacity: 1; border-color: rgb(201 204 210/var(--tw-border-opacity,1)); }
.border-\[\#C9CDD3\] { --tw-border-opacity: 1; border-color: rgb(201 205 211/var(--tw-border-opacity,1)); }
.border-\[\#CBB8FF\] { --tw-border-opacity: 1; border-color: rgb(203 184 255/var(--tw-border-opacity,1)); }
.border-\[\#CBE9DC\] { --tw-border-opacity: 1; border-color: rgb(203 233 220/var(--tw-border-opacity,1)); }
.border-\[\#CDCED6\] { --tw-border-opacity: 1; border-color: rgb(205 206 214/var(--tw-border-opacity,1)); }
.border-\[\#CFE0FB\] { --tw-border-opacity: 1; border-color: rgb(207 224 251/var(--tw-border-opacity,1)); }
.border-\[\#CFE1FD\] { --tw-border-opacity: 1; border-color: rgb(207 225 253/var(--tw-border-opacity,1)); }
.border-\[\#D3D5DA\] { --tw-border-opacity: 1; border-color: rgb(211 213 218/var(--tw-border-opacity,1)); }
.border-\[\#D9DBE0\] { --tw-border-opacity: 1; border-color: rgb(217 219 224/var(--tw-border-opacity,1)); }
.border-\[\#DCD1F7\] { --tw-border-opacity: 1; border-color: rgb(220 209 247/var(--tw-border-opacity,1)); }
.border-\[\#DCD3F5\] { --tw-border-opacity: 1; border-color: rgb(220 211 245/var(--tw-border-opacity,1)); }
.border-\[\#E6E8EB\] { --tw-border-opacity: 1; border-color: rgb(230 232 235/var(--tw-border-opacity,1)); }
.border-\[\#EC7A3C\] { --tw-border-opacity: 1; border-color: rgb(236 122 60/var(--tw-border-opacity,1)); }
.border-\[\#EDEEF0\] { --tw-border-opacity: 1; border-color: rgb(237 238 240/var(--tw-border-opacity,1)); }
.border-\[\#EEEFF2\] { --tw-border-opacity: 1; border-color: rgb(238 239 242/var(--tw-border-opacity,1)); }
.border-\[\#EEF0F2\] { --tw-border-opacity: 1; border-color: rgb(238 240 242/var(--tw-border-opacity,1)); }
.border-\[\#F1DDA8\] { --tw-border-opacity: 1; border-color: rgb(241 221 168/var(--tw-border-opacity,1)); }
.border-\[\#F1DFB0\] { --tw-border-opacity: 1; border-color: rgb(241 223 176/var(--tw-border-opacity,1)); }
.border-\[\#F2DFA9\] { --tw-border-opacity: 1; border-color: rgb(242 223 169/var(--tw-border-opacity,1)); }
.border-\[\#F3CFE3\] { --tw-border-opacity: 1; border-color: rgb(243 207 227/var(--tw-border-opacity,1)); }
.border-\[\#F3DDB3\] { --tw-border-opacity: 1; border-color: rgb(243 221 179/var(--tw-border-opacity,1)); }
.border-\[\#F6CFCF\] { --tw-border-opacity: 1; border-color: rgb(246 207 207/var(--tw-border-opacity,1)); }
.border-\[\#F6D5BF\] { --tw-border-opacity: 1; border-color: rgb(246 213 191/var(--tw-border-opacity,1)); }
.border-\[rgba\(44\,29\,82\,\.18\)\] { border-color: rgba(44, 29, 82, 0.18); }
.border-amber-300 { --tw-border-opacity: 1; border-color: rgb(252 211 77/var(--tw-border-opacity,1)); }
.border-emerald-300 { --tw-border-opacity: 1; border-color: rgb(110 231 183/var(--tw-border-opacity,1)); }
.border-hair { --tw-border-opacity: 1; border-color: rgb(240 240 242/var(--tw-border-opacity,1)); }
.border-ink { --tw-border-opacity: 1; border-color: rgb(28 32 36/var(--tw-border-opacity,1)); }
.border-n-slate-2 { --tw-border-opacity: 1; border-color: rgb(249 249 251/var(--tw-border-opacity,1)); }
.border-n-slate-3 { --tw-border-opacity: 1; border-color: rgb(242 242 245/var(--tw-border-opacity,1)); }
.border-n-weak { --tw-border-opacity: 1; border-color: rgb(234 234 234/var(--tw-border-opacity,1)); }
.border-n-woot-9 { --tw-border-opacity: 1; border-color: rgb(39 129 246/var(--tw-border-opacity,1)); }
.border-sky-300 { --tw-border-opacity: 1; border-color: rgb(125 211 252/var(--tw-border-opacity,1)); }
.border-slate-200 { --tw-border-opacity: 1; border-color: rgb(226 232 240/var(--tw-border-opacity,1)); }
.border-slate-300 { --tw-border-opacity: 1; border-color: rgb(203 213 225/var(--tw-border-opacity,1)); }
.border-slate-700\/70 { border-color: rgba(51, 65, 85, 0.7); }
.border-violet-300 { --tw-border-opacity: 1; border-color: rgb(196 181 253/var(--tw-border-opacity,1)); }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
.border-s-n-woot-9 { --tw-border-opacity: 1; border-inline-start-color: rgb(39 129 246/var(--tw-border-opacity,1)); }
.bg-amber-500 { --tw-bg-opacity: 1; background-color: rgb(245 158 11/var(--tw-bg-opacity,1)); }
.bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254/var(--tw-bg-opacity,1)); }
.bg-blue-200 { --tw-bg-opacity: 1; background-color: rgb(191 219 254/var(--tw-bg-opacity,1)); }
.bg-emerald-300 { --tw-bg-opacity: 1; background-color: rgb(110 231 183/var(--tw-bg-opacity,1)); }
.bg-emerald-400 { --tw-bg-opacity: 1; background-color: rgb(52 211 153/var(--tw-bg-opacity,1)); }
.bg-emerald-500 { --tw-bg-opacity: 1; background-color: rgb(16 185 129/var(--tw-bg-opacity,1)); }
.bg-sky-500 { --tw-bg-opacity: 1; background-color: rgb(14 165 233/var(--tw-bg-opacity,1)); }
.bg-slate-200 { --tw-bg-opacity: 1; background-color: rgb(226 232 240/var(--tw-bg-opacity,1)); }
.bg-slate-50 { --tw-bg-opacity: 1; background-color: rgb(248 250 252/var(--tw-bg-opacity,1)); }
.bg-violet-100 { --tw-bg-opacity: 1; background-color: rgb(237 233 254/var(--tw-bg-opacity,1)); }
.py-1\.5 { padding-bottom: 0.375rem; padding-top: 0.375rem; }
.py-3 { padding-bottom: 0.75rem; padding-top: 0.75rem; }
.py-3\.5 { padding-bottom: 0.875rem; padding-top: 0.875rem; }
.py-8 { padding-bottom: 2rem; padding-top: 2rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-2\.5 { padding-bottom: 0.625rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-1\.5 { padding-top: 0.375rem; }
.font-mono { font-family: var(--font-code); }
.font-sans { font-family: var(--font-body); }
.leading-5 { line-height: 1.25rem; }
.text-amber-300 { --tw-text-opacity: 1; color: rgb(252 211 77/var(--tw-text-opacity,1)); }
.text-amber-700 { --tw-text-opacity: 1; color: rgb(180 83 9/var(--tw-text-opacity,1)); }
.text-emerald-400 { --tw-text-opacity: 1; color: rgb(52 211 153/var(--tw-text-opacity,1)); }
.text-emerald-700 { --tw-text-opacity: 1; color: rgb(4 120 87/var(--tw-text-opacity,1)); }
.text-n-woot-9 { --tw-text-opacity: 1; color: rgb(39 129 246/var(--tw-text-opacity,1)); }
.text-sky-400 { --tw-text-opacity: 1; color: rgb(56 189 248/var(--tw-text-opacity,1)); }
.text-sky-700 { --tw-text-opacity: 1; color: rgb(3 105 161/var(--tw-text-opacity,1)); }
.text-slate-400 { --tw-text-opacity: 1; color: rgb(148 163 184/var(--tw-text-opacity,1)); }
.text-slate-500 { --tw-text-opacity: 1; color: rgb(100 116 139/var(--tw-text-opacity,1)); }
.text-slate-800 { --tw-text-opacity: 1; color: rgb(30 41 59/var(--tw-text-opacity,1)); }
.text-slate-900 { --tw-text-opacity: 1; color: rgb(15 23 42/var(--tw-text-opacity,1)); }
.text-violet-300 { --tw-text-opacity: 1; color: rgb(196 181 253/var(--tw-text-opacity,1)); }
.text-violet-700 { --tw-text-opacity: 1; color: rgb(109 40 217/var(--tw-text-opacity,1)); }
.transition-transform { transition-duration: 0.15s; transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.duration-500 { transition-duration: 0.5s; }
.group[open] .group-open\:rotate-45 { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group:hover .group-hover\:block { display: block; }
.group:hover .group-hover\:translate-x-0\.5 { --tw-translate-x: 0.125rem; }
.group:hover .group-hover\:scale-105, .group:hover .group-hover\:translate-x-0\.5 { transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group:hover .group-hover\:scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
.group:hover .group-hover\:text-\[\#1875EE\] { --tw-text-opacity: 1; color: rgb(24 117 238/var(--tw-text-opacity,1)); }
.group:hover .group-hover\:text-\[\#5B3FA8\] { --tw-text-opacity: 1; color: rgb(91 63 168/var(--tw-text-opacity,1)); }
.group:hover .group-hover\:text-\[\#8A6516\] { --tw-text-opacity: 1; color: rgb(138 101 22/var(--tw-text-opacity,1)); }
.group:hover .group-hover\:text-ink { --tw-text-opacity: 1; color: rgb(28 32 36/var(--tw-text-opacity,1)); }
.group:hover .group-hover\:text-n-brand { --tw-text-opacity: 1; color: rgb(39 129 246/var(--tw-text-opacity,1)); }
.group:hover .group-hover\:text-n-woot-11 { --tw-text-opacity: 1; color: rgb(8 109 224/var(--tw-text-opacity,1)); }
.group:hover .group-hover\:underline { text-decoration-line: underline; }
.group:hover .group-hover\:opacity-0 { opacity: 0; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:delay-200 { transition-delay: 0.2s; }
.group:hover .rtl\:group-hover\:-translate-x-0\.5:where([dir="rtl"], [dir="rtl"] *) { --tw-translate-x: -0.125rem; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.flex-center { justify-content: center; }
.flex-between, .flex-center { align-items: center; display: flex; }
.flex-between { justify-content: space-between; }
.flex-space-x-2 { align-items: center; display: flex; }
.flex-space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse))); margin-right: calc(.5rem*var(--tw-space-x-reverse)); }
.flex-space-x-2:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
.terminal-caret { display: inline-block; height: 0.875rem; width: 0.375rem; --tw-bg-opacity: 1; background-color: rgb(52 211 153/var(--tw-bg-opacity,1)); vertical-align: middle; }
.typing-dot { border-radius: 9999px; display: inline-block; height: 0.375rem; width: 0.375rem; --tw-bg-opacity: 1; animation: 1.2s ease-in-out 0s infinite normal none running typing-bounce-23402ad4; background-color: rgb(148 163 184/var(--tw-bg-opacity,1)); }
.pipe-dot { border-radius: 9999px; height: 0.625rem; opacity: 0; position: absolute; width: 0.625rem; --tw-shadow: 0 1px 2px 0 rgba(0,0,0,.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
.dot-run-in { animation: 1.15s ease-in-out 0s 1 normal forwards running dot-in-23402ad4; }
.dot-run-up { animation: 1.5s ease-in-out 0s 1 normal forwards running dot-up-23402ad4; }
.dot-run-down { animation: 0.9s ease-in-out 0s 1 normal forwards running dot-down-23402ad4; }
.dot-run-out { animation: 0.8s ease-out 1s 1 normal forwards running dot-out-23402ad4; }
.ai-blink { animation: 0.9s ease-in-out 0s infinite normal none running ai-blink-23402ad4; }
.ai-blink, .pipe-dot, .typing-dot { animation: auto ease 0s 1 normal none running none !important; }
.grid-backdrop { background-image: linear-gradient(90deg, rgb(240, 241, 243) 1px, transparent 0px), linear-gradient(rgb(240, 241, 243) 1px, transparent 0px); background-position: 50% center; background-size: 32px 32px; mask-image: radial-gradient(closest-side, rgb(0, 0, 0) 55%, transparent 100%); }


/* --- Responsive Breakpoint Utilities for Chatbots Page --- */
@media not all and (min-width: 640px) {
  .max-sm\:sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; clip: rect(0px, 0px, 0px, 0px); border-width: 0px; white-space: nowrap; }
  .max-sm\:\!hidden { display: none !important; }
}

@media (min-width: 640px) {
  .sm\:not-sr-only { height: auto; margin: 0px; overflow: visible; padding: 0px; position: static; width: auto; clip: auto; white-space: normal; }
  .sm\:absolute { position: absolute; }
  .sm\:inset-x-auto { left: auto; right: auto; }
  .sm\:bottom-full { bottom: 100%; }
  .sm\:end-auto { inset-inline-end: auto; }
  .sm\:left-0 { left: 0px; }
  .sm\:left-auto { left: auto; }
  .sm\:right-0 { right: 0px; }
  .sm\:right-auto { right: auto; }
  .sm\:start-\[calc\(100\%-54px\)\] { inset-inline-start: calc(100% - 54px); }
  .sm\:col-span-1 { grid-column: span 1 / span 1; }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:col-span-3 { grid-column: span 3 / span 3; }
  .sm\:col-span-4 { grid-column: span 4 / span 4; }
  .sm\:col-start-4 { grid-column-start: 4; }
  .sm\:row-start-1 { grid-row-start: 1; }
  .sm\:mx-0 { margin-left: 0px; margin-right: 0px; }
  .sm\:mb-0 { margin-bottom: 0px; }
  .sm\:mb-3 { margin-bottom: 0.75rem; }
  .sm\:me-1 { margin-inline-end: 0.25rem; }
  .sm\:block { display: block; }
  .sm\:inline-block { display: inline-block; }
  .sm\:flex { display: flex; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:hidden { display: none; }
  .sm\:h-52 { height: 13rem; }
  .sm\:h-7 { height: 1.75rem; }
  .sm\:h-\[460px\] { height: 460px; }
  .sm\:min-h-\[580px\] { min-height: 580px; }
  .sm\:w-56 { width: 14rem; }
  .sm\:w-60 { width: 15rem; }
  .sm\:w-\[160px\] { width: 160px; }
  .sm\:w-auto { width: auto; }
  .sm\:max-w-\[480px\] { max-width: 480px; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .sm\:grid-cols-\[0\.7fr_1\.3fr\] { grid-template-columns: 0.7fr 1.3fr; }
  .sm\:grid-cols-\[56px_0\.75fr_1\.25fr\] { grid-template-columns: 56px 0.75fr 1.25fr; }
  .sm\:grid-cols-\[minmax\(0\,0\.9fr\)_minmax\(0\,1\.1fr\)\] { grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr); }
  .sm\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(0\,1\.2fr\)_minmax\(0\,0\.9fr\)_auto\] { grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 1.2fr) minmax(0px, 0.9fr) auto; }
  .sm\:grid-cols-\[repeat\(auto-fit\,minmax\(170px\,1fr\)\)\] { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:gap-2 { gap: 0.5rem; }
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:gap-8 { gap: 2rem; }
  .sm\:whitespace-nowrap { white-space: nowrap; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:p-5 { padding: 1.25rem; }
  .sm\:p-7 { padding: 1.75rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:px-0 { padding-left: 0px; padding-right: 0px; }
  .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .sm\:py-3\.5 { padding-bottom: 0.875rem; padding-top: 0.875rem; }
  .sm\:py-4 { padding-bottom: 1rem; padding-top: 1rem; }
  .sm\:pb-\[clamp\(36px\,4vw\,56px\)\] { padding-bottom: clamp(36px, 4vw, 56px); }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-\[12\.5px\] { font-size: 12.5px; }
  .sm\:text-\[12px\] { font-size: 12px; }
  .sm\:text-\[13px\] { font-size: 13px; }
  .sm\:text-\[22px\] { font-size: 22px; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
}

@media (min-width: 768px) {
  .md\:sticky { position: sticky; }
  .md\:-bottom-12 { bottom: -3rem; }
  .md\:-end-12 { inset-inline-end: -3rem; }
  .md\:top-0 { top: 0px; }
  .md\:top-28 { top: 7rem; }
  .md\:top-\[0\.4375rem\] { top: 0.4375rem; }
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:grid { display: grid; }
  .md\:hidden { display: none; }
  .md\:h-16 { height: 4rem; }
  .md\:h-28 { height: 7rem; }
  .md\:h-\[380px\] { height: 380px; }
  .md\:w-28 { width: 7rem; }
  .md\:scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0px, 1fr)); }
  .md\:grid-cols-\[200px_minmax\(0\,1fr\)\] { grid-template-columns: 200px minmax(0px, 1fr); }
  .md\:grid-cols-\[220px_minmax\(0\,1fr\)\] { grid-template-columns: 220px minmax(0px, 1fr); }
  .md\:grid-cols-\[260px_minmax\(0\,1fr\)\] { grid-template-columns: 260px minmax(0px, 1fr); }
  .md\:grid-cols-\[minmax\(0\,1\.15fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 1fr); }
  .md\:gap-8 { gap: 2rem; }
  .md\:border-b-0 { border-bottom-width: 0px; }
  .md\:border-e { border-inline-end-width: 1px; }
  .md\:border-s { border-inline-start-width: 1px; }
  .md\:border-t-0 { border-top-width: 0px; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:p-7 { padding: 1.75rem; }
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .md\:py-10 { padding-bottom: 2.5rem; padding-top: 2.5rem; }
  .md\:py-12 { padding-bottom: 3rem; padding-top: 3rem; }
  .md\:py-14 { padding-bottom: 3.5rem; padding-top: 3.5rem; }
  .md\:py-16 { padding-bottom: 4rem; padding-top: 4rem; }
  .md\:py-20 { padding-bottom: 5rem; padding-top: 5rem; }
  .md\:py-\[clamp\(32px\,4vw\,56px\)\] { padding-bottom: clamp(32px, 4vw, 56px); padding-top: clamp(32px, 4vw, 56px); }
  .md\:pb-12 { padding-bottom: 3rem; }
  .md\:pb-20 { padding-bottom: 5rem; }
  .md\:ps-12 { padding-inline-start: 3rem; }
  .md\:pt-0 { padding-top: 0px; }
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}

@media (min-width: 1024px) {
  .lg\:sticky { position: sticky; }
  .lg\:top-20 { top: 5rem; }
  .lg\:top-28 { top: 7rem; }
  .lg\:top-\[61px\] { top: 61px; }
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:order-last { order: 9999; }
  .lg\:order-none { order: 0; }
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:hidden { display: none; }
  .lg\:aspect-auto { aspect-ratio: auto; }
  .lg\:h-\[420px\] { height: 420px; }
  .lg\:min-h-\[500px\] { min-height: 500px; }
  .lg\:min-h-\[740px\] { min-height: 740px; }
  .lg\:w-\[220px\] { width: 220px; }
  .lg\:w-\[55\%\] { width: 55%; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0px, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0px, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0px, 1fr)); }
  .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0px, 1fr)); }
  .lg\:grid-cols-\[1\.05fr_0\.95fr\] { grid-template-columns: 1.05fr 0.95fr; }
  .lg\:grid-cols-\[1\.1fr_0\.9fr\] { grid-template-columns: 1.1fr 0.9fr; }
  .lg\:grid-cols-\[260px_minmax\(0\,1fr\)\] { grid-template-columns: 260px minmax(0px, 1fr); }
  .lg\:grid-cols-\[264px_1fr\] { grid-template-columns: 264px 1fr; }
  .lg\:grid-cols-\[minmax\(0\,0\.85fr\)_minmax\(0\,1\.15fr\)\] { grid-template-columns: minmax(0px, 0.85fr) minmax(0px, 1.15fr); }
  .lg\:grid-cols-\[minmax\(0\,0\.8fr\)_minmax\(0\,1\.2fr\)\] { grid-template-columns: minmax(0px, 0.8fr) minmax(0px, 1.2fr); }
  .lg\:grid-cols-\[minmax\(0\,1\.1fr\)_minmax\(0\,0\.9fr\)\] { grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 0.9fr); }
  .lg\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 1fr); }
  .lg\:grid-cols-\[minmax\(0\,1\.35fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 1.35fr) minmax(0px, 1fr); }
  .lg\:grid-cols-\[minmax\(0\,1\.3fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 1.3fr) minmax(0px, 1fr); }
  .lg\:grid-cols-\[minmax\(0\,1\.7fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 1.7fr) minmax(0px, 1fr); }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_340px\] { grid-template-columns: minmax(0px, 1fr) 340px; }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.6fr\)\] { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.6fr); }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] { grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr); }
  .lg\:grid-cols-\[minmax\(0\,340px\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 340px) minmax(0px, 1fr); }
  .lg\:grid-cols-\[minmax\(220px\,1\.4fr\)_repeat\(3\,minmax\(150px\,1fr\)\)\] { grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr)); }
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:justify-center { justify-content: center; }
  .lg\:divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-left-width: calc(1px*(1 - var(--tw-divide-x-reverse))); border-right-width: calc(1px*var(--tw-divide-x-reverse)); }
  .lg\:border-b-0 { border-bottom-width: 0px; }
  .lg\:border-e { border-inline-end-width: 1px; }
  .lg\:border-s { border-inline-start-width: 1px; }
  .lg\:border-t-0 { border-top-width: 0px; }
  .lg\:border-line { --tw-border-opacity: 1; border-color: rgb(237 237 240/var(--tw-border-opacity,1)); }
  .lg\:p-10 { padding: 2.5rem; }
  .lg\:p-8 { padding: 2rem; }
  .lg\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:py-10 { padding-bottom: 2.5rem; padding-top: 2.5rem; }
  .lg\:py-16 { padding-bottom: 4rem; padding-top: 4rem; }
  .lg\:ps-12 { padding-inline-start: 3rem; }
  .lg\:text-\[18px\] { font-size: 18px; }
  .lg\:text-\[28px\] { font-size: 28px; }
  .lg\:shadow-\[inset_-1px_0_0_\#E6E8EB\] { --tw-shadow: inset -1px 0 0 #e6e8eb; --tw-shadow-colored: inset -1px 0 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
}

@media (min-width: 1280px) {
  .xl\:block { display: block; }
  .xl\:flex { display: flex; }
  .xl\:inline-flex { display: inline-flex; }
  .xl\:w-\[344px\] { width: 344px; }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0px, 1fr)); }
  .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0px, 1fr)); }
  .xl\:grid-cols-\[1fr_1fr\] { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .lg\:rtl\:divide-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; }
  .rtl\:lg\:shadow-\[inset_1px_0_0_\#E6E8EB\]:where([dir="rtl"], [dir="rtl"] *) { --tw-shadow: inset 1px 0 0 #e6e8eb; --tw-shadow-colored: inset 1px 0 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
}


/* --- Additional Chatbots Page Precise Utilities --- */
.sytira-chatbots-page .h-\[219px\] { height: 219px; }
.sytira-chatbots-page .w-\[76px\] { width: 76px; }
.sytira-chatbots-page .w-\[11px\] { width: 11px; }
.sytira-chatbots-page .h-\[11px\] { height: 11px; }
.sytira-chatbots-page .w-\[220px\] { width: 220px; }
.sytira-chatbots-page .w-\[370px\] { width: 370px; }

.sytira-chatbots-page .left-\[70px\] { left: 70px; }
.sytira-chatbots-page .left-\[84px\] { left: 84px; }
.sytira-chatbots-page .left-\[87px\] { left: 87px; }
.sytira-chatbots-page .left-\[112px\] { left: 112px; }
.sytira-chatbots-page .left-\[158px\] { left: 158px; }
.sytira-chatbots-page .left-\[166px\] { left: 166px; }
.sytira-chatbots-page .left-\[236px\] { left: 236px; }

.sytira-chatbots-page .top-\[224px\] { top: 224px; }
.sytira-chatbots-page .top-\[233px\] { top: 233px; }
.sytira-chatbots-page .top-\[262px\] { top: 262px; }
.sytira-chatbots-page .top-\[315px\] { top: 315px; }
.sytira-chatbots-page .top-\[320px\] { top: 320px; }
.sytira-chatbots-page .top-\[382px\] { top: 382px; }
.sytira-chatbots-page .top-\[449px\] { top: 449px; }
.sytira-chatbots-page .top-\[479px\] { top: 479px; }
.sytira-chatbots-page .top-\[482px\] { top: 482px; }

.sytira-chatbots-page .bg-\[\#16181C\] { background-color: #16181C; }
.sytira-chatbots-page .bg-\[\#1875EE\] { background-color: #1875EE; }
.sytira-chatbots-page .bg-\[\#3DD68C\] { background-color: #3DD68C; }
.sytira-chatbots-page .bg-\[\#EEFAF4\] { background-color: #EEFAF4; }
.sytira-chatbots-page .bg-\[\#FFF8E5\] { background-color: #FFF8E5; }

.sytira-chatbots-page .text-\[\#0B7A55\] { color: #0B7A55; }
.sytira-chatbots-page .text-\[\#1c3c3c\] { color: #1c3c3c; }
.sytira-chatbots-page .text-\[\#4285f4\] { color: #4285f4; }
.sytira-chatbots-page .text-\[\#60646C\] { color: #60646C; }
.sytira-chatbots-page .text-\[\#d97757\] { color: #d97757; }
.sytira-chatbots-page .text-\[\#ea4b71\] { color: #ea4b71; }
.sytira-chatbots-page .text-\[\#ff9800\] { color: #ff9800; }
.sytira-chatbots-page .text-\[10px\] { font-size: 10px; }
.sytira-chatbots-page .text-\[12px\] { font-size: 12px; }

.sytira-chatbots-page .max-w-\[72ch\] { max-width: 72ch; }
.sytira-chatbots-page .max-w-\[80\%\] { max-width: 80%; }
.sytira-chatbots-page .max-w-\[85\%\] { max-width: 85%; }
.sytira-chatbots-page .max-w-\[86\%\] { max-width: 86%; }
.sytira-chatbots-page .max-w-\[90\%\] { max-width: 90%; }

.sytira-chatbots-page .p-2\.5 { padding: 0.625rem; }
.sytira-chatbots-page .pb-1\.5 { padding-bottom: 0.375rem; }
.sytira-chatbots-page .-bottom-0\.5 { bottom: -0.125rem; }

.sytira-chatbots-page .\[background-size\:12px_12px\] { background-size: 12px 12px; }

.sytira-chatbots-page .shadow-\[0_0_0_1px_\#E3E4E8\,0_8px_24px_-12px_rgba\(28\,32\,36\,\.2\)\] {
  box-shadow: 0 0 0 1px #E3E4E8, 0 8px 24px -12px rgba(28,32,36,0.2);
}
.sytira-chatbots-page .shadow-\[0_8px_24px_-12px_rgba\(28\,32\,36\,\.2\)\] {
  box-shadow: 0 8px 24px -12px rgba(28,32,36,0.2);
}
.sytira-chatbots-page .shadow-\[inset_0_-2px_0_\#12946A\] {
  box-shadow: inset 0 -2px 0 #12946A;
}
.sytira-chatbots-page .shadow-\[inset_0_0_0_1px_\#9CC2F8\] {
  box-shadow: inset 0 0 0 1px #9CC2F8;
}
.sytira-chatbots-page .shadow-\[inset_0_0_0_1px_\#BFE8D4\] {
  box-shadow: inset 0 0 0 1px #BFE8D4;
}

.sytira-chatbots-page .last\:border-b-0:last-child {
  border-bottom-width: 0px !important;
}

details[open] > summary svg {
  transform: rotate(45deg);
}

@media (min-width: 640px) {
  .sytira-chatbots-page .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sytira-chatbots-page .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
  .sytira-chatbots-page .lg\:flex { display: flex !important; }
  .sytira-chatbots-page .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sytira-chatbots-page .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sytira-chatbots-page .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sytira-chatbots-page .lg\:grid-cols-\[1\.05fr_0\.95fr\] { grid-template-columns: 1.05fr 0.95fr !important; }
  .sytira-chatbots-page .lg\:order-1 { order: 1 !important; }
  .sytira-chatbots-page .lg\:order-2 { order: 2 !important; }
  .sytira-chatbots-page .lg\:p-10 { padding: 2.5rem !important; }
  .sytira-chatbots-page .lg\:border-t-0 { border-top-width: 0px !important; }
  .sytira-chatbots-page .lg\:border-s { border-inline-start-width: 1px !important; }
}

@media (min-width: 1280px) {
  .sytira-chatbots-page .xl\:block { display: block !important; }
  .sytira-chatbots-page .xl\:flex { display: flex !important; }
  .sytira-chatbots-page .xl\:grid-cols-\[1fr_1fr\] { grid-template-columns: 1fr 1fr !important; }
}

/* ==========================================================================
   Use Cases & Support Desk Page Utilities
   ========================================================================== */

/* Spacing */
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
  margin-top: calc(0.75rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
  margin-top: calc(0.625rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
}

/* Flex / Alignment */
.self-stretch { align-self: stretch !important; }
.items-baseline { align-items: baseline !important; }
.gap-0\.5 { gap: 0.125rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }

/* Padding & Sizing */
.ps-1\.5 { padding-inline-start: 0.375rem !important; }
.pe-3 { padding-inline-end: 0.75rem !important; }
.pe-\[23px\] { padding-inline-end: 23px !important; }
.px-1\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-\[7px\] { padding-top: 7px !important; padding-bottom: 7px !important; }
.p-\[2px\] { padding: 2px !important; }

.h-0\.5 { height: 0.125rem !important; }
.h-1\.5 { height: 0.375rem !important; }
.h-3\.5 { height: 0.875rem !important; }
.w-0\.5 { width: 0.125rem !important; }
.w-1\.5 { width: 0.375rem !important; }
.w-3\.5 { width: 0.875rem !important; }

.h-\[9px\] { height: 9px !important; }
.w-\[9px\] { width: 9px !important; }
.h-\[15px\] { height: 15px !important; }
.w-\[15px\] { width: 15px !important; }
.h-\[18px\] { height: 18px !important; }
.w-\[18px\] { width: 18px !important; }

.rounded-\[5px\] { border-radius: 5px !important; }
.z-\[10\] { z-index: 10 !important; }
.z-\[2\] { z-index: 2 !important; }

/* Typography */
.text-\[10\.5px\] { font-size: 10.5px !important; }
.text-\[11px\] { font-size: 11px !important; }
.text-\[11\.5px\] { font-size: 11.5px !important; }
.text-\[12px\] { font-size: 12px !important; }
.text-\[12\.5px\] { font-size: 12.5px !important; }
.text-\[13px\] { font-size: 13px !important; }
.text-\[13\.5px\] { font-size: 13.5px !important; }
.text-\[14\.5px\] { font-size: 14.5px !important; }
.text-\[15px\] { font-size: 15px !important; }
.text-\[15\.5px\] { font-size: 15.5px !important; }
.text-\[17px\] { font-size: 17px !important; }
.text-\[19px\] { font-size: 19px !important; }
.text-\[22px\] { font-size: 22px !important; }

.leading-\[1\.05\] { line-height: 1.05 !important; }
.leading-\[1\.08\] { line-height: 1.08 !important; }
.leading-\[1\.2\] { line-height: 1.2 !important; }
.leading-\[1\.25\] { line-height: 1.25 !important; }
.leading-\[1\.35\] { line-height: 1.35 !important; }
.leading-\[1\.4\] { line-height: 1.4 !important; }
.leading-\[1\.5\] { line-height: 1.5 !important; }
.leading-\[1\.55\] { line-height: 1.55 !important; }
.leading-\[1\.6\] { line-height: 1.6 !important; }

.tracking-\[-0\.01em\] { letter-spacing: -0.01em !important; }
.tracking-\[-0\.02em\] { letter-spacing: -0.02em !important; }
.tracking-\[-0\.035em\] { letter-spacing: -0.035em !important; }
.tracking-\[-0\.04em\] { letter-spacing: -0.04em !important; }
.tracking-\[0\.06em\] { letter-spacing: 0.06em !important; }

/* Max widths & Clamps */
.max-w-\[440px\] { max-width: 440px !important; }
.max-w-\[520px\] { max-width: 520px !important; }
.max-w-\[56ch\] { max-width: 56ch !important; }
.max-w-\[60ch\] { max-width: 60ch !important; }
.max-w-\[640px\] { max-width: 640px !important; }
.max-w-\[75ch\] { max-width: 75ch !important; }
.max-w-\[820px\] { max-width: 820px !important; }
.max-w-\[88\%\] { max-width: 88% !important; }

.text-\[clamp\(32px\,3\.6vw\,48px\)\] { font-size: clamp(32px, 3.6vw, 48px) !important; }
.text-\[clamp\(26px\,3vw\,38px\)\] { font-size: clamp(26px, 3vw, 38px) !important; }

.py-\[clamp\(44px\,5\.4vw\,76px\)\] { padding-top: clamp(44px, 5.4vw, 76px) !important; padding-bottom: clamp(44px, 5.4vw, 76px) !important; }
.py-\[clamp\(40px\,5vw\,72px\)\] { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }
.pt-\[clamp\(32px\,3\.4vw\,44px\)\] { padding-top: clamp(32px, 3.4vw, 44px) !important; }
.pb-\[clamp\(22px\,2\.4vw\,28px\)\] { padding-bottom: clamp(22px, 2.4vw, 28px) !important; }

/* Shadows, Backgrounds & Colors */
.shadow-\[0_0_0_1\.5px_\#0F1113\] { box-shadow: 0 0 0 1.5px #0F1113 !important; }
.shadow-\[0_0_0_1px_\#E4E5E9\] { box-shadow: 0 0 0 1px #E4E5E9 !important; }
.shadow-\[0_8px_24px_-12px_rgba\(28\,32\,36\,0\.2\)\] { box-shadow: 0 8px 24px -12px rgba(28, 32, 36, 0.2) !important; }
.shadow-\[inset_0_0_0_1px_\#E0E2E6\] { box-shadow: inset 0 0 0 1px #E0E2E6 !important; }
.shadow-\[inset_0_0_0_1px_\#E4E5E9\] { box-shadow: inset 0 0 0 1px #E4E5E9 !important; }
.shadow-\[inset_0_0_0_1px_\#E6E8EB\] { box-shadow: inset 0 0 0 1px #E6E8EB !important; }
.shadow-\[inset_0_-1px_0_\#E6E8EB\] { box-shadow: inset 0 -1px 0 #E6E8EB !important; }
.shadow-\[inset_0_-1px_0_\#EEEFF2\] { box-shadow: inset 0 -1px 0 #EEEFF2 !important; }
.\[filter\:drop-shadow\(3px_3px_0_\#0F1113\)\] { filter: drop-shadow(3px 3px 0 #0F1113) !important; }

.bg-\[\#FCFCFD\] { background-color: #FCFCFD !important; }
.bg-\[\#FBFCFD\] { background-color: #FBFCFD !important; }
.bg-\[\#F7F9FC\] { background-color: #F7F9FC !important; }
.bg-\[\#F4F5F7\] { background-color: #F4F5F7 !important; }
.bg-\[\#EEEFF2\] { background-color: #EEEFF2 !important; }
.border-\[\#E4E5E9\] { border-color: #E4E5E9 !important; }

.text-\[\#0F1113\] { color: #0F1113 !important; }
.text-\[\#3F434A\] { color: #3F434A !important; }
.text-\[\#80838D\] { color: #80838D !important; }

.last\:border-b-0:last-child { border-bottom-width: 0px !important; }

/* Responsive Media Queries */
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:px-12 { padding-left: 3rem !important; padding-right: 3rem !important; }
}

@media (min-width: 1024px) {
  .lg\:flex { display: flex !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-\[1\.05fr_0\.95fr\] { grid-template-columns: 1.05fr 0.95fr !important; }
  .lg\:min-h-\[500px\] { min-height: 500px !important; }
  .lg\:order-last { order: 9999 !important; }
  .lg\:text-\[18px\] { font-size: 18px !important; }
}

/* Border-y and Border-t global fixes for landing pages */
.border-y {
  border-top-width: 1px !important;
  border-bottom-width: 1px !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
}

.border-t {
  border-top-width: 1px !important;
  border-top-style: solid !important;
}

.use-case-page .border-t,
.border-t {
  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-color: #EDEDF0 !important;
}

.use-case-page .border-b,
.border-b {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-color: #EDEDF0 !important;
}

/* Padding & Spacing for Key Outcomes and Sections */
.pt-6 { padding-top: 1.5rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.pt-10 { padding-top: 2.5rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.mt-0\.5 { margin-top: 0.125rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-2\.5 { margin-top: 0.625rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-0 { margin-bottom: 0px !important; }
.-bottom-1 { bottom: -0.25rem !important; }
.-end-1 { inset-inline-end: -0.25rem !important; }
.-top-8 { top: -2rem !important; }
.-end-4 { inset-inline-end: -1rem !important; }
.rotate-\[3deg\] { transform: rotate(3deg) !important; }
.rotate-\[-2deg\] { transform: rotate(-2deg) !important; }
.-bottom-11 { bottom: -2.75rem !important; }
.-start-4 { inset-inline-start: -1rem !important; }
.p-5 { padding: 1.25rem !important; }
.text-\[\#B9BBC6\] { color: #B9BBC6 !important; }
.border { border-width: 1px !important; border-style: solid !important; }
.order-first { order: -9999; }

/* Use cases directory utilities */
.py-7 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
.mb-\[clamp\(28px\,3vw\,40px\)\] { margin-bottom: clamp(28px, 3vw, 40px) !important; }
.text-blue-600 { color: #2563EB !important; }
.text-emerald-600 { color: #059669 !important; }
.text-amber-600 { color: #D97706 !important; }
.text-violet-600 { color: #7C3AED !important; }
.text-cyan-600 { color: #0891B2 !important; }
.text-indigo-600 { color: #4F46E5 !important; }
.hover\:bg-\[\#FBFCFD\]:hover { background-color: #FBFCFD !important; }
.group:hover .group-hover\:text-\[\#086DE0\] { color: #086DE0 !important; }

/* Legal prose styles matching Chatwoot */
.cw-prose {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 78ch;
  color: #1C2024;
}
.cw-prose :is(h1, h2, h3, h4) {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #1C2024;
}
.cw-prose h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  margin-top: 2.4em;
  margin-bottom: 0.8em;
  scroll-margin-top: 100px;
}
.cw-prose h2:first-child {
  margin-top: 0;
}
.cw-prose h3 {
  font-size: 19px;
  line-height: 1.35;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}
.cw-prose p {
  margin-top: 0;
  margin-bottom: 1.25em;
  color: #1C2024;
}
.cw-prose ul {
  list-style-type: disc;
  padding-inline-start: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.25em;
}
.cw-prose ol {
  list-style-type: decimal;
  padding-inline-start: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.25em;
}
.cw-prose li {
  margin-bottom: 0.5em;
  color: #1C2024;
}
.cw-prose a {
  color: #086DE0;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.cw-prose a:hover {
  color: #1C2024;
}
.cw-prose :not(pre) > code {
  background: #F2F3F5;
  border-radius: 4px;
  font-family: var(--font-code);
  font-size: 0.875em;
  font-weight: 500;
  padding: 0.15em 0.35em;
  color: #1C2024;
}
.cw-prose hr {
  border-top: 1px solid #E5E7EB;
  margin: 2.5em 0;
}
.cw-prose .cw-callout {
  background: #FCFCFD;
  border: 1px solid #E0E2E6;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 1.75em 0;
}


/* === Use Cases & Figures Utilities === */
.-bottom-9 { bottom: -2.25rem; }
.-top-10 { top: -2.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.h-\[32px\] { height: 32px; }
.w-\[32px\] { width: 32px; }
.-rotate-3 { --tw-rotate: -3deg; }
.-rotate-3, .-rotate-6 { transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.rotate-2 { --tw-rotate: 2deg; }
.rotate-2, .rotate-3 { transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(.25rem*var(--tw-space-y-reverse)); margin-top: calc(.25rem*(1 - var(--tw-space-y-reverse))); }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(.375rem*var(--tw-space-y-reverse)); margin-top: calc(.375rem*(1 - var(--tw-space-y-reverse))); }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(1rem*var(--tw-space-y-reverse)); margin-top: calc(1rem*(1 - var(--tw-space-y-reverse))); }
.bg-\[\#2781F6\] { --tw-bg-opacity: 1; background-color: rgb(39 129 246/var(--tw-bg-opacity,1)); }
.bg-\[\#8B8D98\] { --tw-bg-opacity: 1; background-color: rgb(139 141 152/var(--tw-bg-opacity,1)); }
.bg-\[\#E5484D\] { --tw-bg-opacity: 1; background-color: rgb(229 72 77/var(--tw-bg-opacity,1)); }
.bg-\[\#E7F6EF\] { --tw-bg-opacity: 1; background-color: rgb(231 246 239/var(--tw-bg-opacity,1)); }
.bg-\[\#EAF3FF\] { --tw-bg-opacity: 1; background-color: rgb(234 243 255/var(--tw-bg-opacity,1)); }
.bg-\[\#F7F8FA\] { --tw-bg-opacity: 1; background-color: rgb(247 248 250/var(--tw-bg-opacity,1)); }
.bg-\[\#FDEEF7\] { --tw-bg-opacity: 1; background-color: rgb(253 238 247/var(--tw-bg-opacity,1)); }
.bg-\[\#FFF3D6\] { --tw-bg-opacity: 1; background-color: rgb(255 243 214/var(--tw-bg-opacity,1)); }
.bg-\[\#FFF6DF\] { --tw-bg-opacity: 1; background-color: rgb(255 246 223/var(--tw-bg-opacity,1)); }
.bg-slate-100 { --tw-bg-opacity: 1; background-color: rgb(241 245 249/var(--tw-bg-opacity,1)); }
.bg-slate-500 { --tw-bg-opacity: 1; background-color: rgb(100 116 139/var(--tw-bg-opacity,1)); }
.bg-slate-900 { --tw-bg-opacity: 1; background-color: rgb(15 23 42/var(--tw-bg-opacity,1)); }
.py-px { padding-bottom: 1px; padding-top: 1px; }
.pe-2 { padding-inline-end: 0.5rem; }
.ps-6 { padding-inline-start: 1.5rem; }
.text-end { text-align: end; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-\[\#1B5FC1\] { --tw-text-opacity: 1; color: rgb(27 95 193/var(--tw-text-opacity,1)); }
.text-\[\#B02B80\] { --tw-text-opacity: 1; color: rgb(176 43 128/var(--tw-text-opacity,1)); }
.text-\[\#C62A2F\] { --tw-text-opacity: 1; color: rgb(198 42 47/var(--tw-text-opacity,1)); }
.text-\[\#E1306C\] { --tw-text-opacity: 1; color: rgb(225 48 108/var(--tw-text-opacity,1)); }
.text-\[\#E2A336\] { --tw-text-opacity: 1; color: rgb(226 163 54/var(--tw-text-opacity,1)); }
.text-\[\#E5484D\] { --tw-text-opacity: 1; color: rgb(229 72 77/var(--tw-text-opacity,1)); }
.last\:shadow-none:last-child { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }
.focus\:outline-none:focus { outline: rgba(0, 0, 0, 0) solid 2px; outline-offset: 2px; }
.rtl\:tracking-normal:where([dir="rtl"], [dir="rtl"] *) { letter-spacing: 0px; }
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker { display: none; }
.\[\&\>path\]\:fill-current > path { fill: currentcolor; }

/* Specific Use-Case Figures and Icons Styling */
.bg-\[radial-gradient\(\#E3E5E9_1px\,transparent_1px\)\] {
  background-image: radial-gradient(#e3e5e9 1px, transparent 1px) !important;
}
.\[background-size\:12px_12px\] {
  background-size: 12px 12px !important;
}
.shadow-\[0_8px_24px_-12px_rgba\(28\,32\,36\,0\.2\)\] {
  --tw-shadow: 0 8px 24px -12px rgba(28, 32, 36, 0.2) !important;
  box-shadow: 0 8px 24px -12px rgba(28, 32, 36, 0.2) !important;
}
.\[filter\:drop-shadow\(3px_3px_0_\#0F1113\)\] {
  filter: drop-shadow(3px 3px 0 #0F1113) !important;
}

.text-\[clamp\(26px\,3vw\,38px\)\] {
  font-size: clamp(26px, 3vw, 38px) !important;
}
.text-\[clamp\(32px\,3\.6vw\,48px\)\] {
  font-size: clamp(32px, 3.6vw, 48px) !important;
}
.py-\[clamp\(40px\,5vw\,72px\)\] {
  padding-top: clamp(40px, 5vw, 72px) !important;
  padding-bottom: clamp(40px, 5vw, 72px) !important;
}
.py-\[clamp\(44px\,5\.4vw\,76px\)\] {
  padding-top: clamp(44px, 5.4vw, 76px) !important;
  padding-bottom: clamp(44px, 5.4vw, 76px) !important;
}
.pb-\[clamp\(22px\,2\.4vw\,28px\)\] {
  padding-bottom: clamp(22px, 2.4vw, 28px) !important;
}
.pt-\[clamp\(32px\,3\.4vw\,44px\)\] {
  padding-top: clamp(32px, 3.4vw, 44px) !important;
}

.max-w-\[80\%\] { max-width: 80% !important; }
.max-w-\[85\%\] { max-width: 85% !important; }
.max-w-\[88\%\] { max-width: 88% !important; }

.bg-\[\#0F2459\] { background-color: #0F2459 !important; }
.border-\[\#F4F5F7\] { border-color: #F4F5F7 !important; }
.border-amber-200 { border-color: #fde68a !important; }

.text-\[\#0E7A57\] { color: #0E7A57 !important; }
.text-\[\#8A5A00\] { color: #8A5A00 !important; }
.text-\[\#12946A\] { color: #12946A !important; }
.text-\[\#7E5BDC\] { color: #7E5BDC !important; }
.text-\[\#80838D\] { color: #80838D !important; }
.text-\[\#3F434A\] { color: #3F434A !important; }
.text-\[\#0F1113\] { color: #0F1113 !important; }
.text-\[\#B9BBC6\] { color: #B9BBC6 !important; }

.bg-\[\#12946A\] { background-color: #12946A !important; }
.bg-\[\#7E5BDC\] { background-color: #7E5BDC !important; }
.bg-\[\#FBFCFD\] { background-color: #FBFCFD !important; }
.bg-\[\#FCFCFD\] { background-color: #FCFCFD !important; }
.border-\[\#D9CCFA\] { border-color: #D9CCFA !important; }
.border-\[\#E4E5E9\] { border-color: #E4E5E9 !important; }
.border-\[\#EEEFF2\] { border-color: #EEEFF2 !important; }

/* SVG Icon & Fill Rules */
svg.icon, .icon {
  display: inline-block;
  vertical-align: middle;
}
.\[\&\>path\]\:fill-current > path {
  fill: currentColor !important;
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none !important;
}

/* Direct Transform for Rotations */
.-rotate-3 {
  transform: rotate(-3deg) !important;
}
.rotate-2 {
  transform: rotate(2deg) !important;
}

/* === Comprehensive Figure & Badge Fixes === */
.px-10 {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}
.py-14 {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}
.max-w-\[440px\] {
  max-width: 440px !important;
}
.max-w-\[520px\] {
  max-width: 520px !important;
}
@media (min-width: 768px) {
  .md\:px-12 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
.shadow-\[0_0_0_1\.5px_\#0F1113\] {
  box-shadow: 0 0 0 1.5px #0F1113 !important;
}
.\[filter\:drop-shadow\(3px_3px_0_\#0F1113\)\] {
  filter: drop-shadow(3px 3px 0 #0F1113) !important;
}
.bg-\[radial-gradient\(\#E3E5E9_1px\,transparent_1px\)\] {
  background-image: radial-gradient(#E3E5E9 1px, transparent 1px) !important;
}
.\[background-size\:12px_12px\] {
  background-size: 12px 12px !important;
}
.shadow-\[0_8px_24px_-12px_rgba\(28\,32\,36\,0\.2\)\] {
  box-shadow: 0 8px 24px -12px rgba(28, 32, 36, 0.2) !important;
}
.-rotate-3 {
  transform: rotate(-3deg) !important;
}
.rotate-2 {
  transform: rotate(2deg) !important;
}
.-top-10 {
  top: -2.5rem !important;
}
.-bottom-9 {
  bottom: -2.25rem !important;
}
.-start-4 {
  inset-inline-start: -1rem !important;
}
.-end-4 {
  inset-inline-end: -1rem !important;
}

/* === Urgent & Normal Cards & Typography Fixes === */
.p-2\.5 {
  padding: 0.625rem !important;
}
.gap-1\.5 {
  gap: 0.375rem !important;
}
.w-3\.5 {
  width: 0.875rem !important;
}
.h-3\.5 {
  height: 0.875rem !important;
}
.text-\[11px\] {
  font-size: 11px !important;
  line-height: 1.5 !important;
}
.text-\[18px\] {
  font-size: 18px !important;
  line-height: 1.4 !important;
}
.text-\[\#C62A2F\] {
  color: #C62A2F !important;
}
.text-\[\#E5484D\] {
  color: #E5484D !important;
}
.text-\[\#3F434A\] {
  color: #3F434A !important;
}

/* === Missing Global Colors for Use Cases === */
.text-\[\#2781F6\] {
  color: #2781F6 !important;
}
.text-\[\#1B5FC1\] {
  color: #1B5FC1 !important;
}
.text-\[\#086DE0\] {
  color: #086DE0 !important;
}
.text-\[\#5B3FA8\] {
  color: #5B3FA8 !important;
}
.text-\[\#E1306C\] {
  color: #E1306C !important;
}
.text-\[\#B02B80\] {
  color: #B02B80 !important;
}

/* === Padding Utility Fixes === */
.p-2 {
  padding: 0.5rem !important;
}

/* === 404 Page Specific Styles === */
.error-dots {
  background-color: #FCFCFD;
  background-image: radial-gradient(#E3E5E9 1px, transparent 0);
  background-size: 12px 12px;
}

.error-cards-container {
  display: grid;
  gap: 1px;
  border-radius: 8px;
  border: 1px solid #E0E2E6 !important;
  background-color: #EDEDF0;
  overflow: hidden;
}

.error-nav-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background-color: #FFFFFF;
  padding: 16px 20px !important;
  text-align: start;
  text-decoration: none !important;
  border: 0 !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.error-nav-card:hover {
  background-color: #FCFCFD;
}

.error-nav-card:hover .error-card-title {
  color: #086DE0;
}

.error-nav-card:hover .error-card-icon {
  color: #0F1113;
}

.error-card-title {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: #0F1113;
  transition: color 0.15s ease;
}

.error-card-desc {
  font-size: 14px;
  color: #6E7279;
  line-height: 1.45;
}

/* === 404 Layout, Margins & Responsive Grid === */
.error-404-section {
  border-top: 1px solid #EDEDF0;
  border-bottom: 1px solid #EDEDF0;
  background-color: #FFFFFF;
}

.error-404-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .error-404-grid,
  .lg\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
  }
}

.error-404-left {
  padding-top: clamp(44px, 5.4vw, 76px) !important;
  padding-bottom: clamp(36px, 4vw, 56px) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  border-bottom: 1px solid #EDEDF0;
}

@media (min-width: 1024px) {
  .error-404-left {
    border-bottom: 0 !important;
    border-inline-end: 1px solid #EDEDF0 !important;
  }
}

.error-404-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(28px, 3.5vw, 44px) !important;
  padding-bottom: clamp(28px, 3.5vw, 44px) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.error-404-h1 {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  font-family: var(--font-display, var(--font-sans));
  font-weight: 700;
  font-size: clamp(34px, 5vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  color: #0F1113 !important;
  text-wrap: balance;
}

.error-404-desc {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  max-width: 36rem !important;
  font-size: clamp(17px, 1.55vw, 20px) !important;
  line-height: 1.5 !important;
  color: #0F1113 !important;
  text-wrap: pretty;
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px !important;
  margin-top: 28px !important;
}

/* Arbitrary clamp utilities */
.pt-\[clamp\(44px\2c 5\.4vw\2c 76px\)\] {
  padding-top: clamp(44px, 5.4vw, 76px) !important;
}
.pb-\[clamp\(36px\2c 4vw\2c 56px\)\] {
  padding-bottom: clamp(36px, 4vw, 56px) !important;
}
.py-\[clamp\(28px\2c 3\.5vw\2c 44px\)\] {
  padding-top: clamp(28px, 3.5vw, 44px) !important;
  padding-bottom: clamp(28px, 3.5vw, 44px) !important;
}