/* ==========================================================================
           NEXT-GEN ENTERPRISE DESIGN SYSTEM (NEW-AGE UTILITY AESTHETIC)
           ========================================================================== */
      :root {
        --canvas: #fcfcfd; /* Clean, off-white minimalist backdrop */
        --surface: #ffffff; /* Card layers & crisp UI framing blocks */
        --brand-dark: #0f172a; /* True deep slate for high contrast typography */
        --brand-primary: #4f46e5; /* Electric Indigo brand accent */
        --brand-secondary: #0284c7; /* Sky blue interactive indicators */
        --text-main: #1e293b; /* Premium slate text body */
        --text-muted: #64748b; /* WCAG Compliant muted text label */
        --border-subtle: rgba(
          15,
          23,
          42,
          0.06
        ); /* Clean, razor-sharp vector line separations */
        --ai-glow: #7c3aed; /* Signature purple accent for processing logs */
        --success: #059669; /* Balanced green for verified assets */
        --radius-ui: 8px; /* Modern tight geometric container curvature */

        --ink: #111827;
        --muted: #475569;
        --line: #dbe2ea;
        --soft: #f3f6fa;
        --brand: #4f46e5;
        --teal: #008480;
        --hotspot: #e11d48;
      }

      /* Strict Structural Reset */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family:
          "Inter",
          -apple-system,
          sans-serif;
        font-size: 14px;
        color: var(--text-main);
        background-color: var(--canvas);
        line-height: 1.6;
        letter-spacing: -0.01em;
        -webkit-font-smoothing: antialiased;
      }

      /* Skip to Content Utilities */
      .skip-to-content {
        position: absolute;
        top: -100px;
        left: 0;
        background: var(--brand-dark);
        color: #ffffff;
        padding: 0.75rem 1.5rem;
        z-index: 999;
        text-decoration: none;
        font-weight: 600;
        border-radius: 0 0 var(--radius-ui) var(--radius-ui);
      }
      .skip-to-content:focus {
        top: 0;
        outline: 2px solid var(--brand-primary);
      }

      /* Strict Focus States Indicator Policy */
      a:focus-visible,
      button:focus-visible,
      .btn:focus-visible,
      input:focus-visible,
      select:focus-visible {
        outline: 2px solid var(--brand-primary) !important;
        outline-offset: 2px !important;
      }

      /* Interactive Controls Architecture */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        font-size: 16px;
        font-weight: 600;
        border-radius: var(--radius-ui);
        text-decoration: none !important;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        border: 1px solid transparent;
        min-height: 44px;
      }

      .btn-primary {
        background-color: var(--brand-dark);
        color: #ffffff !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }

      .btn-primary:hover {
        background-color: #1e293b;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
      }

      .btn-outline {
        border: 1px solid rgba(15, 23, 42, 0.12);
        background-color: var(--surface);
        color: var(--brand-dark) !important;
      }

      .btn-outline:hover {
        background-color: #f8fafc;
        border-color: rgba(15, 23, 42, 0.2);
        transform: translateY(-1px);
      }

      .cta-microcopy {
        display: block;
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 0.5rem;
        font-weight: 500;
      }

      /* Layout Frameworks */
      .section-padding {
        padding: 5rem 2rem;
      }

      .section-white {
        background: #ffffff;
      }

      .sources-block-home {
        margin-top: 3.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border-subtle);
        font-size: var(--14-fs);
        color: var(--text-muted);
        line-height: 1.5;
      }
      .sources-block-home p {
        margin-bottom: 0.25rem;
      }
      .sources-block-home p:last-child {
        margin-bottom: 0;
      }
      .sources-block-home p.sources-label {
        margin-bottom: 0.5rem;
      }

      .text-brand-dark {
        color: var(--brand-dark);
      }
      .feature-copy-muted {
        font-size: var(--15-fs);
        color: var(--text-muted);
      }
      .text-success {
        color: #05875f;
      }
      .text-ai-glow {
        color: var(--ai-glow);
      }

      .eyebrow-label-ai {
        font-size: var(--11-fs);
        font-weight: 700;
        color: var(--ai-glow);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .eyebrow-label-ai--spaced {
        margin-bottom: 0.75rem;
      }

      .model-tag-pill {
        background: #f8fafc;
        border: 1px solid var(--border-subtle);
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 12px;
        color: var(--brand-dark);
        font-weight: 600;
      }

      .ai-pitch-copy {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
      }
      .feature-matrix {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
      }
      .feature-box {
        background: #f8fafc;
        padding: 1.25rem;
        border-radius: var(--radius-ui);
        border: 1px solid var(--border-subtle);
      }
      .feature-box-heading {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .feature-box-heading--indigo {
        color: #312e81;
      }
      .feature-box-heading--green {
        color: #065f46;
      }
      .feature-matrix-tags {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 2rem;
      }

      .section-alt-white {
        background: #ffffff;
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
      }

      .section-alt-gray {
        background-color: #f1f5f9;
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
      }

      .section-gray-topborder {
        background: #f1f5f9;
        border-top: 1px solid var(--border-subtle);
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

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

      .section-faq-header {
        max-width: 750px;
        margin: 5rem auto 2.5rem 0;
        text-align: left;
      }

      .section-label {
        font-family: "JetBrains Mono", "Courier New", monospace;
        font-size: var(--13-fs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #4f46e5;
        margin-bottom: 10px;
      }

      .section-header h2 {
        font-size: 2.25rem;
        font-weight: 800;
        color: var(--brand-dark);
        letter-spacing: -0.04em;
        line-height: 1.2;
        margin-bottom: 1.25rem;
      }

      .section-header p {
        color: var(--text-muted);
        font-size: 1.15rem;
        line-height: 1.6;
      }

      .section-alt-gray .section-header p,
      .artifact-section .section-header p {
        color: #627188;
      }

      /* Premium Tech Utility Hero Space */
      .hero-section {
        padding: 5rem 2rem 5rem 2rem;
        text-align: center;
        background: radial-gradient(
          100% 100% at 50% 0%,
          rgba(7F, 56, 242, 0.03) 0%,
          transparent 70%
        );
      }

      .hero-container {
        max-width: 900px;
        margin: 0 auto;
      }

      .badge-pill-header {
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
        color: #312e81;
        padding: 0.5rem 1.5rem;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
      }

      .badge-pill-header--card {
        margin-bottom: 1.25rem;
      }
      .badge-pill-header--muted {
        border-color: var(--text-muted);
      }
      .badge-pill-header--success {
        border-color: var(--success);
      }
      .badge-pill-header--ai {
        border-color: rgba(124, 58, 237, 0.25);
      }

      @media (max-width: 767px) {
        .badge-pill-header {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0.75rem;
          width: 100%;
          border-radius: 16px; /* optional, since pill shape doesn't suit a grid */
          justify-items: center;
          align-items: center;
        }

        .section-header {
          margin: 0 auto 3rem auto;
        }
        .section-padding {
          padding: 3rem 2rem;
        }
      }

      .badge-pill-header span:not(:last-child)::after {
        content: "";
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: var(--brand-primary);
        border-radius: 50%;
        margin-left: 1rem;
        vertical-align: middle;
      }

      @media (max-width: 768px) {
        .badge-pill-header span:not(:last-child)::after {
          content: none;
          /* or display: none; */
        }

        .hero-section{
          padding: 4rem 2rem 4rem 2rem;
        }
      }

      .hero-section h1 {
        font-size: 3.5rem;
        font-weight: 800;
        line-height: 1.15;
        margin-bottom: 1.5rem;
        letter-spacing: -1.5px;
        color: var(--brand-dark);
      }

      .hero-section p.hero-desc {
        font-size: 1.25rem;
        color: var(--text-muted);
        margin-bottom: 2.75rem;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
      }

      .hero-buttons {
        display: flex;
        gap: 1.25rem;
        justify-content: center;
        align-items: flex-start;
      }

      .btn-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* Modernized Utility Shield Banner */
      .value-shield-banner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        padding: 0.85rem 1.75rem;
        border-radius: var(--radius-ui);
        margin-top: 2rem;
        max-width: 740px;
        text-align: left;
        box-shadow:
          0 1px 3px rgba(0, 0, 0, 0.02),
          0 4px 12px rgba(0, 0, 0, 0.01);
      }

      @media (max-width: 768px) {
        .value-shield-banner {
          flex-direction: column;
          text-align: center;
          gap: 0.5rem;
        }
      }

      .shield-price-block {
        flex-shrink: 0;
      }

      .shield-price-highlight {
        font-size: 16px;
        font-weight: 700;
        color: var(--brand-dark);
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .shield-price-subtext {
        font-size: 12px;
        font-weight: 600;
        color: var(--success, #04825b);
        margin-top: 0.5rem;
      }

      .shield-price-badge {
        background: rgba(5, 150, 105, 0.06);
        color: #04825b;
        border: 1px solid rgba(5, 150, 105, 0.2);
        padding: 0.15rem 0.5rem;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 800;
      }

      .shield-divider {
        color: rgba(15, 23, 42, 0.15);
      }
      @media (max-width: 768px) {
        .shield-divider {
          display: none;
        }
      }

      .shield-microtext {
        font-size: 15px;
        color: var(--text-muted);
      }
      @media (max-width: 768px) {
        .shield-microtext {
          text-align: center;
        }
      }

      /* Micro-Grid System for App Workflows */
      .onboarding-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-top: 3.5rem;
      }

      @media (max-width: 768px) {
        .onboarding-grid {
          grid-template-columns: 1fr;
        }
      }

      .onboarding-card {
        background: var(--bg-cards);
        border: 1px solid var(--border-subtle);
        border-top: 4px solid var(--brand-primary);
        padding: 2.5rem;
        border-radius: var(--radius-ui);
        position: relative;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease;
      }

      .onboarding-card:hover {
        transform: translateY(-2px);
      }

      .step-num {
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        font-family: "JetBrains Mono", monospace;
        font-size: 2.5rem;
        font-weight: 900;
        color: rgba(79, 70, 229, 0.9);
        line-height: 1;
      }

      .onboarding-card h3 {
        color: var(--brand-dark);
        font-size: 1.25rem;
        margin-bottom: 1rem;
        font-weight: 700;
      }

      .onboarding-card p {
        color: #5e6d83;
        font-size: 0.95rem;
      }

      /* Audience Grid Matrix */
      .audience-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
      }

      @media (max-width: 992px) {
        .audience-grid {
          grid-template-columns: 1fr;
        }
      }

      .audience-card {
        background: var(--bg-cards);
        border: 1px solid var(--border-subtle);
        border-top: 4px solid transparent;
        padding: 2.5rem;
        border-radius: var(--radius-ui);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease,
          transform 0.2s ease;
      }

      .audience-card:hover {
        border-top-color: var(--brand-primary);
        transform: translateY(-2px);
      }

      .audience-card h3 {
        color: var(--brand-dark);
        font-size: 1.35rem;
        margin-bottom: 1rem;
        font-weight: 700;
      }

      .audience-card ul {
        list-style: none;
        margin-top: 1.5rem;
      }

      .audience-card p {
        font-size: 16px;
        color: #5e6d83;
      }

      .audience-card li {
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 0.85rem;
        color: #5e6d83;
        font-size: 14px;
      }

      .audience-card li::before {
        content: "→";
        position: absolute;
        left: 0;
        color: var(--brand-secondary);
        font-weight: 700;
      }

      /* Benchmark Metric Cards System */
      .case-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
      }

      @media (max-width: 768px) {
        .case-grid {
          grid-template-columns: 1fr;
        }
      }

      .case-card {
        /* background: var(--surface); */
        border: 1px solid var(--border-subtle);
        border-left: 4px solid var(--success);
        padding: 2.5rem;
        border-radius: var(--radius-ui);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
      }

      .case-card:hover {
        border-color: rgba(79, 70, 229, 0.25) var(--border-subtle)
          var(--border-subtle) var(--brand-secondary);
        transform: translateY(-2px);
      }

      .case-card--mint {
        background-color: #f1fffb;
      }
      .case-card--gray {
        border-left-color: var(--brand-primary);
        background-color: #f0f0f0;
      }
      .case-card--violet {
        background-color: #f5f3ff;
      }
      .case-card-metric--primary {
        color: var(--brand-primary);
      }
      .case-card-metric--violet {
        color: #7c3aed;
      }

      .case-metric {
        font-family: "JetBrains Mono", monospace;
        font-size: 2rem;
        font-weight: 800;
        color: #05875f;
        margin-bottom: 0.5rem;
      }

      .case-card h3 {
        color: var(--brand-dark);
        margin-bottom: 1rem;
        font-size: 1.25rem;
      }

      .case-card p {
        color: var(--text-muted);
        font-size: var(--14-fs);
      }

      .case-card--gray p {
        color: #5e6d83;
      }

      .case-card--violet p {
        color: #627188;
      }

      /* Split-Card UI Controls (Trap vs Fix Matrix) */
      .matrix-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
      }

      @media (max-width: 768px) {
        .matrix-grid {
          grid-template-columns: 1fr;
        }
      }

      .matrix-card {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-ui);
        padding: 2.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
      }

      .matrix-card h3 {
        font-size: 1.35rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: 700;
      }

      .trap-title {
        color: #991b1b;
      }
      .solution-title {
        color: #065f46;
      }

      .matrix-card ul {
        list-style: none;
      }

      .matrix-card li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 1.25rem;
        color: var(--text-muted);
        font-size: 0.95rem;
      }

      .trap-card li {
        color: #627188;
      }

      .matrix-card li::before {
        position: absolute;
        left: 0;
        top: 2px;
        font-weight: 900;
        font-size: 1.1rem;
      }

      .trap-card li::before {
        content: "✕";
        color: #dc2626;
      }
      .solution-card li::before {
        content: "✓";
        color: var(--success);
      }
      .trap-card {
        background: #fef2f2;
        border-color: #fca5a5;
      }
      .solution-card {
        background: #ecfdf5;
        border-color: #a7f3d0;
      }

      /* Capability Pillars Showcase Layout */
      .pillar-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
      }
      .pillar-grid--spaced {
        margin-bottom: 3rem;
      }

      @media (max-width: 768px) {
        .pillar-grid {
          grid-template-columns: 1fr;
        }
      }

      .pillar-card {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-ui);
        padding: 3rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
      }

      .pillar-card h3 {
        font-size: 1.6rem;
        color: var(--brand-dark);
        margin-bottom: 1.25rem;
        font-weight: 800;
      }
      .pillar-card h3.heading-lg {
        font-size: 1.75rem;
      }
      .pillar-card--ai-featured {
        border: 1px solid rgba(124, 58, 237, 0.3);
        grid-column: span 2;
        position: relative;
        overflow: hidden;
      }
      .pillar-card--ai-featured-glow {
        position: absolute;
        top: -50px;
        right: -50px;
        width: 150px;
        height: 150px;
        background: radial-gradient(
          circle,
          rgba(124, 58, 237, 0.1) 0%,
          transparent 70%
        );
        pointer-events: none;
      }

      .pillar-card p {
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        font-size: 0.95rem;
      }

      /* Simulated Application Interface Console */
      .simulated-ui-box {
        background: #faf5ff;
        border: 1px dashed rgba(124, 58, 237, 0.3);
        border-radius: 6px;
        padding: 1.25rem;
        margin-top: 1.5rem;
      }

      .simulated-ui-row {
        display: flex;
        gap: 0.75rem;
        margin-top: 1rem;
        flex-wrap: wrap;
      }
      .simulated-ui-row--tight {
        margin-top: 0.75rem;
      }

      .btn-ai-sparkle {
        background: linear-gradient(
          135deg,
          rgba(124, 58, 237, 0.08) 0%,
          rgba(79, 70, 229, 0.08) 100%
        );
        border: 1px solid rgba(124, 58, 237, 0.4);
        color: #5b21b6;
        font-size: 12px;
        font-weight: 600;
        padding: 0.45rem 1rem;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        cursor: default;
      }

      /* Soft Pill App Badge UI System Checks */
      .severity-display {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin: 2rem 0 0 0;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border-subtle);
      }

      .badge-pill {
        font-family: "JetBrains Mono", monospace;
        padding: 0.35rem 0.85rem;
        font-size: var(--11-fs);
        font-weight: 700;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .badge-critical {
        background-color: #fee2e2;
        color: #991b1b;
        border: 1px solid rgba(239, 68, 68, 0.2);
      }
      .badge-high {
        background-color: #ffedd5;
        color: #9a3412;
        border: 1px solid rgba(234, 88, 12, 0.2);
      }
      .badge-medium {
        background-color: #fef9c3;
        color: #854d0e;
        border: 1px solid rgba(202, 138, 4, 0.2);
      }
      .badge-low {
        background-color: #f1f5f9;
        color: #334155;
        border: 1px solid rgba(148, 163, 184, 0.2);
      }
      .badge-pass {
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid rgba(16, 185, 129, 0.2);
      }

      /* Integrated Site Governance Utilities Grid */
      .tools-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 2rem;
        margin-top: 3.5rem;
      }

      .tool-mini-card {
        background: var(--bg-cards);
        padding: 2rem;
        border-radius: var(--radius-ui);
        border: 1px solid var(--border-subtle);
        border-left: 4px solid var(--brand-secondary);
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
      }

      .tool-mini-card:hover {
        border-color: rgba(79, 70, 229, 0.25) var(--border-subtle)
          var(--border-subtle) var(--brand-secondary);
        transform: translateY(-2px);
      }

      .tool-mini-card h3 {
        font-size: 1.15rem;
        margin-bottom: 0.75rem;
        color: var(--brand-dark);
        font-weight: 700;
      }

      .tool-mini-card p {
        color: #5e6d83;
        font-size: var(--15-fs);
        line-height: 1.55;
      }

      /* White Label Deliverables Factory Bento Architecture */
      .artifact-section {
        background-color: #f1f5f9;
      }

      .artifact-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
      }

      @media (max-width: 992px) {
        .artifact-grid {
          /* grid-template-columns: 1fr !important; */

          display: flex !important;
          flex-direction: column;
          
        }
        .artifact-card {
          /* grid-column: span 1 !important; */
          
        }

        .artifact-card-content{
          flex-direction: column !important;
          align-items: start !important;
        }

        .artifact-card-features{
          padding-left: 0 !important;
        }
      }

      .artifact-card {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        padding: 2.5rem;
        border-radius: var(--radius-ui);
        text-align: left;
        transition:
          transform 0.2s ease,
          border-color 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
      }

      .artifact-card--span3 {
        grid-column: span 3;
      }

      .artifact-list-grid {
        margin-top: 0.5rem;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.25rem;
      }
      .artifact-list-grid--2col {
        margin-top: 0.75rem;
        grid-template-columns: 1fr 1fr;
      }

      .artifact-card--badge-wide {
        grid-column: span 3;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem 2.5rem;
      }
      .badge-card-row {
        display: flex;
        flex-wrap: wrap;
        gap: 2.5rem;
        align-items: center;
        justify-content: space-between;
      }
      .artifact-card-content--badge {
        flex: 1.2;
        display: flex;
        gap: 1.5rem;
        align-items: center;
      }
      .badge-icon-ring {
        position: relative;
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        background: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px dashed rgba(79, 70, 229, 0.4);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
      }
      .badge-icon-ring-outline {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px solid var(--brand-secondary);
        border-radius: 50%;
        top: -2px;
        left: -2px;
        box-sizing: content-box;
      }
      .badge-card-heading {
        margin: 0 0 0.35rem 0;
        font-size: 1.35rem;
        font-weight: 700;
      }
      .badge-card-desc {
        margin: 0;
        font-size: var(--15-fs);
        line-height: 1.5;
        color: var(--text-muted);
      }
      .artifact-card-features--badge {
        flex: 1;
        padding-left: 2rem;
      }
      .badge-feature-list {
        margin: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem;
      }
      .badge-feature-list li {
        margin: 0;
      }

      .interactive-card {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-ui);
        padding: 2.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
      }
      .interactive-card h3.heading-sm {
        font-size: var(--18-fs);
      }
      .interactive-card-desc {
        color: var(--text-muted);
        font-size: var(--15-fs);
        margin-top: 0.5rem;
      }

      .artifact-card:hover {
        transform: translateY(-4px);
        border-color: rgba(79, 70, 229, 0.3);
      }

      .artifact-icon-placeholder {
        width: 44px;
        height: 44px;
        stroke: var(--brand-secondary);
        stroke-width: 1.5;
        fill: none;
        margin-bottom: 1.5rem;
      }

      .artifact-card h3 {
        color: var(--brand-dark);
        font-size: 1.35rem;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        font-weight: 700;
      }

      .artifact-card p {
        color: var(--text-muted);
        font-size: var(--15-fs);
        line-height: 1.6;
      }

      .artifact-card ul {
        margin-top: 1rem;
        list-style: none;
      }
      .artifact-card ul.list-tight {
        margin-top: 0.75rem;
      }

      .artifact-card li {
        font-size: var(--14-fs);
        color: var(--text-muted);
        margin-bottom: 0.5rem;
        position: relative;
        padding-left: 1.25rem;
      }

      .artifact-card li::before {
        content: "•";
        position: absolute;
        left: 0;
        color: var(--brand-primary);
      }

      .format-tag {
        font-family: "JetBrains Mono", monospace;
        color: #027dbc;
        font-size: 0.85rem;
        margin-left: 0.25rem;
      }

      /* Split-Form Action Panels Component */
      .cta-split-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: start;
      }

      .cta-final-heading {
        font-size: 2.75rem;
        font-weight: 800;
        color: var(--brand-dark);
        line-height: 1.2;
        margin-bottom: 1.5rem;
      }
      .cta-final-subtext {
        color: #627188;
        font-size: 1.15rem;
        margin-bottom: 2rem;
        line-height: 1.6;
      }
      .cta-final-price-note {
        color: var(--brand-primary);
        font-weight: 700;
        font-size: 14px;
      }
      .form-select-canvas {
        background: var(--canvas);
      }
      .form-submit-btn {
        width: 100%;
        margin-top: 1rem;
        font-size: 14px;
      }
      .cta-microcopy--centered {
        text-align: center;
        margin-top: 1rem;
      }

      @media (max-width: 992px) {
        .cta-split-container {
          grid-template-columns: 1fr;
          gap: 3rem;
        }
      }

      .form-card {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        padding: 3rem;
        border-radius: var(--radius-ui);
        /* box-shadow: 0 20px 40px rgba(15, 23, 42, 0.02); */
      }

      .form-group {
        margin-bottom: 1.5rem;
      }

      .form-group label {
        display: block;
        color: var(--brand-dark);
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 0.5rem;
      }

      .form-control {
        width: 100%;
        background: var(--canvas);
        border: 1px solid var(--border-subtle);
        padding: 0.75rem 1rem;
        border-radius: 6px;
        color: var(--brand-dark);
        font-family: inherit;
        font-size: 14px;
        transition: all 0.15s ease;
      }

      @media (max-width: 500px) {
        .form-control {
          width: 100%;
          font-size: 14px;
        }

        .form-card{
          padding: 1rem;
        }

        .form-card select option {
          font-size: 10px;
        }
      }

      .form-control:focus {
        outline: none;
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
      }

      /* Accordion Stack Lists */
      .faq-list {
        /* max-width: 850px; */
        margin: 0 auto;
      }

      .faq-item {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        margin-bottom: 1rem;
        border-radius: var(--radius-ui);
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
      }

      .faq-question {
        width: 100%;
        background: none;
        border: none;
        color: var(--brand-dark);
        text-align: left;
        padding: 1.5rem;
        font-size: 1.1rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .faq-answer {
        padding: 0 1.5rem 1.5rem 1.5rem;
        color: var(--text-muted);
        font-size: 0.95rem;
        line-height: 1.6;
      }

      .accordion-icon {
        font-size: 28px;
        width: 1em;
        height: 1em;
        color: transparent;
        position: relative;
        display: inline-block;
        flex-shrink: 0;
      }

      .accordion-icon::before,
      .accordion-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0.50em;
        height: 3px;
        background: var(--brand-primary);
        border-radius: 999px;
        transform: translate(-50%, -50%);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }

      .accordion-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }

      /* FAQ accordion (ObjectionAccordion, independently-openable items) -
         ported from pitch.css so the homepage FAQ matches every other
         page's accordion exactly, rather than SecurityAccordion's
         single-open behavior used for the Security section above. */
      .objection {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        margin-bottom: 16px;
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .objection.active {
        border-color: var(--brand-primary);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
      }

      .objection-q {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22px 24px;
        background: #fff;
        border: none;
        cursor: pointer;
        text-align: left;
        font-size: 18px;
        font-weight: 600;
      }

      .objection .accordion-icon {
        margin-left: 20px;
      }

      .objection.active .accordion-icon::after {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg);
      }

      .objection-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        padding: 0 24px;
        font-size: var(--15-fs);
        line-height: 1.7;
      }

      .objection-a::after {
        content: "";
        display: block;
        height: 24px;
      }

      .objection.active .objection-a {
        max-height: 500px;
      }

      /* FAQ Accordion */

      .faq-list {
        /* max-width: 900px; */
        margin: 0 auto;
      }

      .faq-item {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        margin-bottom: 16px;
        overflow: hidden;
        transition: all 0.3s ease;
        background: #fff;
      }

      .faq-item.active {
        border-color: var(--brand-secondary);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
      }

      .faq-question {
        width: 100%;
        background: none;
        border: none;
        padding: 22px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
      }

      .faq-icon {
        font-size: 28px;
        font-weight: 300;
        width: 1em;
        height: 1em;
        color: transparent;
        position: relative;
        display: inline-block;
        flex-shrink: 0;
      }

      .faq-icon::before,
      .faq-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0.72em;
        height: 2px;
        background: var(--brand-secondary);
        border-radius: 999px;
        transform: translate(-50%, -50%);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }

      .faq-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }

      .faq-item.active .faq-icon::after {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg);
      }

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

      .faq-answer p {
        margin: 0;
        padding: 0 24px 24px;
        line-height: 1.7;
        color: #555;
      }

      .faq-item.active .faq-answer {
        max-height: 300px;
      }

      @media (max-width: 480px) {
        .hero-section h1 {
          font-size: 2.2rem;
        }
        .hero-section p.hero-desc {
          font-size: 1rem;
        }
        .hero-buttons {
          flex-direction: column;
          align-items: center;
        }
        .section-header h2 {
          font-size: 1.75rem;
        }
      }

      @media (max-width: 768px) {

        .feature-matrix{
          display: flex !important;
          flex-direction: column;
          gap: 1.5rem;
        }

        .feature-matrix-tags{
          justify-content: center !important;
        }

        .feature-matrix-tags-label{
          text-align: center !important;
        }
      }


      /* interactive image  */

      .demo-shell {
        width: min(1040px, calc(100vw - 32px));
        margin: 24px auto;
        border: 8px solid #050505;
        border-radius: 2px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 8px 36px rgba(15, 23, 42, 0.18);
        border-radius: 20px;
        height: auto;
      }

      .app-view{
        display: block;
      }

      .app-mobile-view {
          display: none;
        }

      .window-bar {
        height: 24px;
        background: #050505;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 8px;
        font-size: var(--11-fs);
        font-weight: 600;
      }

      .window-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--brand);
        border: 1px solid #9ca3ff;
      }

      .app-header {
        min-height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 14px 24px;
        background: #fafbfc;
        border-bottom: 1px solid var(--line);
        z-index: 1;
      }

      .brand-block {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 14px;
      }

      .brand-mark {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 3px solid #1e293b;
        position: relative;
        flex: 0 0 auto;
      }

      .brand-mark::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: var(--brand);
      }

      .brand-name {
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap;
      }

      .header-divider {
        width: 1px;
        height: 20px;
        background: var(--line);
      }

      .tagline {
        color: var(--muted);
        /* font-size: 14px; */
        font-size: var(--11-fs);
        white-space: nowrap;
      }

      .copyright {
        color: var(--muted);
        /* font-size: 13px; */
        font-size: var(--11-fs);
        white-space: nowrap;
      }

      .tab-bar {
        /* min-height: 54px; */
        display: flex;
        align-items: end;
        gap: 2px;
        padding: 8px 16px 0;
        background: #e8edf3;
        border-bottom: 1px solid var(--line);
        overflow: hidden;
      }

      .slide-tab {
        position: relative;
        border: 1px solid #c4ceda;
        background: #dce3eb;
        color: #475569;
        font: inherit;
        /* font-size: 13px; */
        font-size: var(--11-fs);
        font-weight: 700;
        white-space: nowrap;
        border-radius: 11px 11px 0 0;
        padding: 8px 24px;
        height: 40px;
        cursor: pointer;
        transition:
          background 0.2s ease,
          box-shadow 0.2s ease,
          border-color 0.2s ease,
          color 0.2s ease;
      }

      .slide-tab:hover {
        background: rgba(255, 255, 255, 0.72);
      }

      .slide-tab.active {
        background: #fff;
        color: var(--teal);
        border-color: var(--teal);
        border-bottom-color: #fff;
        box-shadow: none;
        margin-bottom: -1px;
      }

      .tab-utilities { display:flex; align-items:center; gap:10px; margin-left:auto; padding:0 0 8px 16px; }
      .tab-utility { position:relative; border:1px solid #cbd5e1; background:#f1f5f9; border-radius:999px; padding:8px 18px; color:#475569; font:inherit; font-size:var(--11-fs); font-weight:700; cursor:pointer; white-space:nowrap; }
      .tab-utility.active .hotspot-dot { display:none; }
      .workflow-bar { min-height:70px; display:grid; grid-template-columns:minmax(64px,1fr) auto minmax(110px,1fr); align-items:center; gap:6px; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); overflow:hidden; }
      .workflow-bar[hidden] { display:none; }
      .workflow-list { display:flex; align-items:center; gap:30px; min-width:0; }
      .workflow-back, .workflow-next { border:0; font:inherit; font-size:var(--11-fs); font-weight:700; cursor:pointer; white-space:nowrap; }
      .workflow-back { justify-self:start; color:#52647c; background:transparent; padding:10px 12px; }
      .workflow-next { justify-self:end; color:#fff; background:#4f46e5; border-radius:999px; padding:9px 16px; font-size:calc(var(--11-fs) - 1px); }
      .workflow-back:disabled, .workflow-next:disabled { color:#cbd5e1; background:#f1f5f9; cursor:default; }
      .workflow-step { position:relative; display:flex; align-items:center; gap:7px; flex:0 1 auto; border:1px solid transparent; background:transparent; border-radius:999px; padding:7px 9px; color:#52647c; font:inherit; font-size:calc(var(--11-fs) - 1px); font-weight:700; cursor:pointer; white-space:nowrap; }
      .workflow-step::after { content:""; position:absolute; width:20px; height:1px; background:#cbd5e1; top:50%; left:calc(100% + 5px); transform:translateY(-50%); pointer-events:none; }
      .workflow-step:last-child::after { display:none; }
      .workflow-step.active { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
      .workflow-num { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#e2e8f0; color:#52647c; font-weight:800; flex:0 0 26px; }
      .workflow-step.active .workflow-num { background:#1d4ed8; color:#fff; box-shadow:0 0 0 4px #bfdbfe; }
      .top-tab { position:relative; }
      .top-tab .hotspot-dot { top:5px; right:7px; }

      .slide-tab.teal { color: inherit; border-color:#c4ceda; box-shadow:none; border-radius:11px 11px 0 0; }
      .slide-tab.teal.active { color:var(--teal); border-color:var(--teal); border-bottom-color:#fff; background:#fff; box-shadow:none; }

      .hotspot-dot {
        position: absolute;
        top: -3px;
        right: 5px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--hotspot);
        border: 2px solid #fff;
        box-shadow: 0 0 0 rgba(225, 29, 72, 0.65);
        animation: pulse 1.8s ease-in-out infinite;
      }

      .slide-tab.active .hotspot-dot {
        display: none;
      }
      .workflow-step.active .hotspot-dot { display:none; }

      @keyframes pulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.65);
        }
        50% {
          box-shadow: 0 0 0 7px rgba(225, 29, 72, 0);
        }
      }

      .profile {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px 10px 4px 4px;
        /* font-size: 12px; */
        font-size: var(--11-fs);
        font-weight: 700;
        white-space: nowrap;
      }

      .avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--brand);
        color: #fff;
        display: grid;
        place-items: center;
      }

      .preview-area {
        background: #f8fafc;
      }

      .image-stage {
        position: relative;
        width: 100%;
        /* min-height: 560px; */
        background: #fff;
        /* border: 1px solid var(--line); */
        overflow: hidden;
      }

      .slide-image {
        display: block;
        width: 100%;
        height: 100%;
        /* min-height: 560px; */
        object-fit: contain;
        background: #fff;
        opacity: 1;
        transition: opacity 0.18s ease;
      }

      @media (max-width: 991px) {
        /* .demo-shell {
          width: 100%;
          margin: 0;
          border-width: 0;
        } */

        .app-view{
          display: none;
        }

        .app-mobile-view {
          display: block;
        }

        .app-header {
          align-items: flex-start;
          flex-direction: column;
          gap: 8px;
        }

        .header-divider,
        .copyright {
          display: none;
        }

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

        .tagline {
          white-space: normal;
        }

        .tab-bar {
          padding-left: 12px;
        }
        .tab-utilities { margin-left:0; padding-left:0; }
        .workflow-bar { grid-template-columns:auto auto auto; justify-content:start; padding:10px 12px; }

        .profile {
          margin-left: 0;
        }

        .preview-area {
          padding: 10px;
        }

        /* .image-stage,
        .slide-image {
          min-height: 320px;
        } */

        .nav-cta{
          padding-bottom: 2px;
        }
      }

      /* interactive image  */