.how-it-works-page{padding-top:20px;padding-bottom:40px}.how-hero{text-align:center;padding:40px 16px 32px}.how-hero-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:var(--font-size-xs);color:var(--primary-color,#007bff);background:var(--primary-50,#e7f1ff);border-radius:999px;margin-bottom:16px;padding:4px 12px;font-weight:600;display:inline-block}.how-hero-title{margin:0 0 var(--spacing-md)}.how-hero-subtitle{font-size:var(--font-size-md);color:var(--text-muted);max-width:680px;margin:0 auto var(--spacing-lg);line-height:var(--line-height-relaxed)}.how-hero-ctas{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.how-cta-primary,.how-cta-secondary{font-weight:var(--font-weight-medium,500);font-size:var(--font-size-base);text-transform:uppercase;letter-spacing:.025em;border-radius:8px;justify-content:center;align-items:center;min-height:48px;padding:12px 22px;text-decoration:none;transition:transform .15s,box-shadow .15s,background-color .15s;display:inline-flex}.how-cta-primary{background:var(--primary-color,#007bff);color:var(--white);box-shadow:0 2px 8px #007bff40}.how-cta-primary:hover{background:var(--primary-600,#0056b3);text-decoration:none;transform:translateY(-1px)}.how-cta-primary-lg{font-size:var(--font-size-md);padding:14px 28px}.how-cta-secondary{background:var(--white);color:var(--primary-color,#007bff);border:1px solid var(--primary-color,#007bff)}.how-cta-secondary:hover{background:var(--primary-50,#e7f1ff);text-decoration:none}.how-steps{margin:24px 0 0;padding:0 16px}.how-steps-list{margin:0;padding:0;list-style:none;position:relative}.how-steps-list:before{content:"";background:linear-gradient(to bottom, var(--primary-color,#007bff) 0%, transparent 100%);width:2px;position:absolute;top:24px;bottom:24px;left:23px}.how-step-item{align-items:flex-start;gap:20px;padding:20px 0;display:flex;position:relative}.how-step-badge{background:var(--primary-color,#007bff);width:48px;height:48px;color:var(--white);z-index:1;border-radius:50%;flex:0 0 48px;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:0 4px 10px #007bff40}.how-step-badge svg{width:24px;height:24px}.how-step-body{background:var(--white);border:1px solid #edf0f5;border-radius:12px;flex:1;padding:20px 22px;box-shadow:0 2px 10px #0000000f}.how-step-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-xs);color:var(--text-color)}.how-step-description{color:var(--text-muted);margin:0 0 var(--spacing-sm);line-height:var(--line-height-relaxed)}.how-step-details{margin:0;padding:0;list-style:none}.how-step-details li{color:var(--text-color);font-size:var(--font-size-base);padding:6px 0 6px 28px;position:relative}.how-step-details li:before{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.99'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:18px 18px;width:18px;height:18px;position:absolute;top:8px;left:0}.how-step-guide-link{background:var(--primary-50,#e7f1ff);color:var(--primary-color,#007bff);font-weight:600;font-size:var(--font-size-sm);border-radius:8px;align-items:center;margin-top:14px;padding:8px 14px;text-decoration:none;transition:background-color .15s,transform .15s;display:inline-flex}.how-step-guide-link:hover{background:#dbeafe;text-decoration:none;transform:translate(2px)}.how-section-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-color);text-align:center;margin:0 0 var(--spacing-sm);line-height:var(--line-height-tight)}.how-section-subtitle{text-align:center;color:var(--text-muted);margin:0 auto var(--spacing-lg);max-width:640px}.how-final-cta{text-align:center;background:linear-gradient(135deg,#f0f6ff 0%,#fff 100%);border:1px solid #dbeafe;border-radius:16px;margin:48px 16px 20px;padding:32px 20px}.how-final-cta h2{color:#111;margin:0 0 8px;font-size:clamp(1.3rem,3vw,1.6rem)}.how-final-cta p{color:#4a5568;margin:0 0 20px}@media (max-width:600px){.how-hero{padding:24px 8px 20px}.how-steps-list:before{left:19px}.how-step-item{gap:14px;padding:14px 0}.how-step-badge{flex:0 0 40px;width:40px;height:40px}.how-step-badge svg{width:20px;height:20px}.how-step-body{padding:16px}}
