/* ==========================================================================
   HOME PAGE — How Alternivite Works
   ========================================================================== */

.how-works {
   background: var(--bg-secondary);
}

.how-works-intro {
   text-align: center;
   max-width: 700px;
   margin: 0 auto var(--space-10);
}

.how-works-intro p {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

/* Transformation banner: visually communicates
   "existing company documents -> actionable compliance improvements" */
.how-works-transform {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: var(--space-3) var(--space-4);
   max-width: 900px;
   margin: 0 auto var(--space-12);
   padding: var(--space-5) var(--space-6);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-sm);
}

.how-works-transform .transform-node {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2-5);
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   padding: var(--space-2-5) var(--space-4);
   border-radius: var(--radius-lg);
}

.how-works-transform .transform-node--input {
   background: var(--bg-brand-subtle);
   color: var(--text-brand-strong);
}

.how-works-transform .transform-node--output {
   background: var(--bg-success-subtle);
   color: var(--text-success);
}

.how-works-transform .transform-arrow {
   display: inline-flex;
   align-items: center;
   color: var(--text-tertiary);
}

/* Step grid */
.how-works-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--space-6);
   max-width: 1180px;
   margin: 0 auto;
}

.how-works-grid .how-card {
   width: 100%;
}

@media (min-width: 700px) {
   .how-works-grid .how-card {
      width: calc(50% - (var(--space-6) / 2));
   }
}

@media (min-width: 1100px) {
   .how-works-grid .how-card {
      width: calc(33.333% - ((var(--space-6) * 2) / 3));
   }
}

/* Individual step card */
.how-card {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-2xl);
   padding: var(--space-6);
   box-shadow: var(--shadow-sm);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.how-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
}

.how-card-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-3);
}

.how-card-step {
   font-family: var(--font-mono);
   font-size: var(--text-2xl);
   font-weight: var(--font-bold);
   line-height: 1;
   color: var(--color-primary-500);
}

.how-card-title {
   margin: 0;
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
}

.how-card-desc {
   margin: 0;
   font-size: var(--text-base);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

/* Lightweight inline SVG illustration */
.how-card-visual {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--space-4);
   background: var(--bg-brand-subtle);
   border-radius: var(--radius-xl);
   min-height: 140px;
}

/* Expected action / result rows */
.how-card-meta {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
   margin-top: auto;
   padding-top: var(--space-4);
   border-top: 1px dashed var(--border-primary);
}

.how-card-meta-item {
   display: flex;
   gap: var(--space-2-5);
   align-items: flex-start;
}

.how-card-meta-icon {
   flex: 0 0 auto;
   width: 22px;
   height: 22px;
   margin-top: 1px;
}

.how-card-meta-label {
   display: block;
   font-size: var(--text-xs);
   font-weight: var(--font-bold);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-tertiary);
   margin-bottom: 2px;
}

.how-card-meta-text {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-normal);
}

.how-card-meta-item--action .how-card-meta-icon {
   color: var(--color-primary-500);
}

.how-card-meta-item--result .how-card-meta-icon {
   color: var(--color-success-500);
}

/* CTA below the section */
.how-works-cta {
   text-align: center;
   margin-top: var(--space-12);
}

/* ==========================================================================
   HOME PAGE — AI Compliance Copilot teaser
   ========================================================================== */

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

.ai-copilot-title {
   margin-top: var(--space-4);
   margin-bottom: var(--space-6);
   font-size: var(--text-3xl);
   font-weight: var(--font-semibold);
   line-height: var(--leading-tight);
   color: var(--text-primary);
}

.ai-copilot-intro {
   margin-bottom: var(--space-8);
   font-size: var(--text-lg);
   line-height: var(--leading-relaxed);
   color: var(--text-secondary);
}

.ai-copilot-points {
   list-style: none;
   margin: 0 0 var(--space-10);
   padding: 0;
   display: grid;
   gap: var(--space-5);
}

.ai-copilot-points li {
   display: flex;
   align-items: flex-start;
   gap: var(--space-3);
}

.ai-copilot-points svg {
   flex-shrink: 0;
   width: 22px;
   height: 22px;
   margin-top: 2px;
   color: var(--color-primary-500);
}

.ai-copilot-points strong {
   display: block;
   margin-bottom: 2px;
   font-weight: var(--font-semibold);
   color: var(--text-primary);
}

.ai-copilot-points span {
   display: block;
   line-height: var(--leading-normal);
   color: var(--text-secondary);
}

.ai-copilot-cta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-4);
}

/* Copilot chat-style visual card */
.ai-copilot-visual {
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-md);
   padding: var(--space-6);
}

.cp-chat-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   margin-bottom: var(--space-5);
}

.cp-chat-id {
   display: flex;
   align-items: center;
   gap: var(--space-3);
}

.cp-chat-avatar {
   width: 34px;
   height: 34px;
   border-radius: var(--radius-lg);
   background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   flex-shrink: 0;
}

.cp-chat-name {
   font-weight: var(--font-bold);
   font-size: var(--text-sm);
   color: var(--text-primary);
   display: block;
   line-height: 1.2;
}

.cp-chat-sub {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
}

.cp-status-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   color: var(--text-success);
   background: var(--bg-success-subtle);
   padding: 4px 10px;
   border-radius: 999px;
}

.cp-message {
   margin-bottom: var(--space-3);
   padding: var(--space-3) var(--space-4);
   border-radius: var(--radius-xl);
   font-size: var(--text-sm);
   line-height: var(--leading-relaxed);
   max-width: 88%;
}

.cp-message--ai {
   background: var(--bg-brand-subtle);
   color: var(--text-primary);
   border-top-left-radius: 4px;
}

.cp-message--user {
   margin-left: auto;
   background: var(--bg-secondary);
   color: var(--text-secondary);
   border-top-right-radius: 4px;
}

.cp-action-row {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
   margin-top: var(--space-4);
}

.cp-action-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   padding: 10px 16px;
   border-radius: 999px;
}

.cp-action-pill--primary {
   background: var(--color-primary-500);
   color: #ffffff;
}

.cp-action-pill--ghost {
   background: var(--bg-secondary);
   color: var(--text-secondary);
}