.rvp-flow-page {
       font-family: "Inter", sans-serif;
       min-height: 100vh;
       padding: 4rem 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .rvp-flow-wrapper {
       max-width: 768px;
       width: 100%;
       text-align: center;
   }

   .rvp-flow-title {
       font-size: 2rem;
       font-weight: 700;
       color: #111827;
       margin-bottom: 1rem;
   }

   @media (min-width: 768px) {
       .rvp-flow-title {
           font-size: 2.5rem;
       }
   }

   .rvp-flow-description {
       max-width: 640px;
       margin: 0 auto;
       color: #6b7280;
       font-size: 1rem;
       line-height: 1.7;
   }

   @media (min-width: 768px) {
       .rvp-flow-description {
           font-size: 1.125rem;
       }
   }

   .rvp-flow-list {
       margin-top: 2.5rem;
       margin-bottom: 2.5rem;
   }

   .rvp-flow-card {
       position: relative;
       border: 1px solid #e5e7eb;
       border-radius: .75rem;
       background: #fff;
       padding: 1.5rem;
       text-align: left;
       transition: .2s;
       margin-bottom: 1.5rem;
   }

   .rvp-flow-card-active {
       border-color: #e8308c;
       background: rgba(232, 48, 140, .05);
       box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
   }

   .rvp-flow-card-disabled {
       opacity: .7;
   }

   .rvp-flow-line {
       position: absolute;
       bottom: -16px;
       left: 40px;
       width: 2px;
       height: 16px;
       background: #e5e7eb;
   }

   .rvp-flow-flex {
       display: flex;
       align-items: flex-start;
   }

   .rvp-flow-icon {
       width: 48px;
       height: 48px;
       border-radius: 999px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       margin-right: 1rem;
       font-size: 1.25rem;
   }

   .rvp-flow-icon-active {
       background: #e8308c;
       color: #fff;
   }

   .rvp-flow-icon-muted {
       background: #f3f4f6;
       color: #6b7280;
   }

   .rvp-flow-content {
       flex: 1;
   }

   .rvp-flow-badges {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: .75rem;
       margin-bottom: .5rem;
   }

   .rvp-flow-phase {
       font-size: .75rem;
       font-weight: 700;
       letter-spacing: .08em;
       text-transform: uppercase;
       color: #6b7280;
   }

   .rvp-flow-status {
       font-size: .75rem;
       font-weight: 500;
       padding: .15rem .5rem;
       border-radius: 999px;
   }

   .rvp-flow-status-active {
       background: rgba(232, 48, 140, .1);
       color: #e8308c;
   }

   .rvp-flow-status-muted {
       background: #f3f4f6;
       color: #6b7280;
   }

   .rvp-flow-card-title {
       font-size: 1.125rem;
       font-weight: 600;
       color: #111827;
       margin-bottom: .5rem;
   }

   .rvp-flow-card-description {
       font-size: .875rem;
       line-height: 1.7;
       color: #6b7280;
       margin-bottom: .75rem;
   }

   .rvp-flow-items {
       list-style: none;
       padding: 0;
       margin: 0;
   }

   .rvp-flow-items li {
       display: flex;
       align-items: center;
       font-size: .875rem;
       color: #6b7280;
       margin-bottom: .5rem;
   }

   .rvp-flow-check {
       color: #e8308c;
       margin-right: .5rem;
       font-weight: bold;
       flex-shrink: 0;
   }

   .rvp-flow-btn {
       background: #e8308c;
       border: 1px solid #e8308c;
       color: #fff;
       height: 44px;
       padding: 0 2.5rem;
       border-radius: .375rem;
       font-size: 1rem;
       font-weight: 500;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transition: .2s;
   }

   .rvp-flow-btn:hover,
   .rvp-flow-btn:focus {
       background: #d5277e;
       border-color: #d5277e;
       color: #fff;
       text-decoration: none;
       box-shadow: 0 0 0 .2rem rgba(232, 48, 140, .25);
   }

   .rvp-flow-btn-icon {
       margin-left: .75rem;
       font-size: 1.1rem;
   }