/* ==========================================================================
   How It Works Page Styles
   ========================================================================== */

/* === HERO === */
.hiw-hero{
  background:linear-gradient(180deg, #F7F7FC 0%, #ffffff 100%);
  padding:56px 0 48px;
}
.hiw-hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.hiw-hero-left h2{
  font-size:40px;
  font-weight:800;
  line-height:1.16;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.hiw-hero-left h3{
  font-size:25px;
  font-weight:700;
  color:var(--primary);
  margin-top:6px;
}
.hiw-lead{
  margin-top:20px;
  font-size:15px;
  color:var(--gray-600);
  line-height:1.65;
  max-width:480px;
}
.hiw-hero-features{
  display:flex;
  gap:40px;
  margin-top:38px;
  flex-wrap:wrap;
}
.hiw-hero-feature{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.hiw-hero-feature-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--primary-100);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.hiw-hero-feature-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hiw-hero-feature-text h4{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:3px;
}
.hiw-hero-feature-text p{
  font-size:12px;
  color:var(--gray-500);
  line-height:1.4;
}

/* === HERO VISUAL === */
.hiw-hero-right{
  position:relative;
  min-height:300px;
}
.hiw-dots{
  position:absolute;
  top:0;
  right:-30px;
  width:60px;
  height:60px;
  background-image:radial-gradient(circle, #d4d4de 1.5px, transparent 1.5px);
  background-size:10px 10px;
  opacity:.5;
  z-index:1;
}
.hiw-mock{
  background:#F5F5FA;
  border-radius:16px;
  padding:20px;
  position:relative;
  box-shadow:var(--shadow-lg);
}
.hiw-mock-dots{
  display:flex;
  gap:6px;
  margin-bottom:16px;
}
.hiw-mock-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d4d4de;
}
.hiw-mock-content{
  background:#fff;
  border-radius:10px;
  padding:24px;
  display:flex;
  gap:20px;
}
.hiw-mock-wp{
  width:60px;
  height:60px;
  border-radius:10px;
  background:#f0f0f5;
  color:#21759b;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.hiw-mock-wp svg{
  width:32px;
  height:32px;
}
.hiw-mock-lines{
  flex:1;
}
.hiw-line{
  height:8px;
  background:#eeeef4;
  border-radius:4px;
  margin-bottom:10px;
}
.hiw-line.w70{width:70%;}
.hiw-line.w50{width:50%;}
.hiw-line.w90{width:90%;}
.hiw-line.w60{width:60%;}
.hiw-line.w80{width:80%;}
.hiw-line.block{
  height:24px;
  width:40%;
  margin-top:16px;
}
.hiw-check{
  position:absolute;
  top:100px;
  left:260px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(91,79,232,0.4);
  z-index:4;
}
.hiw-check svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hiw-arrow{
  position:absolute;
  top:60px;
  left:220px;
  width:130px;
  height:60px;
  border-top:2px dashed #c9c3f5;
  border-right:2px dashed #c9c3f5;
  border-radius:0 20px 0 0;
  z-index:2;
}
.hiw-fixed-badge{
  position:absolute;
  bottom:-20px;
  left:40px;
  background:#fff;
  border-radius:10px;
  box-shadow:var(--shadow-md);
  padding:14px 20px;
  z-index:4;
}
.hiw-fixed-badge .l{
  font-size:12px;
  color:var(--gray-500);
  margin-bottom:4px;
}
.hiw-fixed-badge .t{
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}
.hiw-fixed-badge .a{
  font-size:11px;
  color:var(--gray-500);
  margin-top:2px;
}
.hiw-status-panel{
  position:absolute;
  top:25px;
  right:-20px;
  background:#fff;
  border-radius:10px;
  box-shadow:var(--shadow-md);
  padding:16px 20px;
  width:170px;
  z-index:5;
}
.hiw-status-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--ink-soft);
  margin-bottom:12px;
  font-weight:500;
}
.hiw-status-item:last-child{margin-bottom:0;}
.hiw-status-item svg{width:13px; height:13px;}

/* === SECTION HEADINGS === */
.hiw-section-title{
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:12px;
}
.hiw-section-sub{
  font-size:15px;
  color:var(--gray-500);
  margin-bottom:60px;
}

/* === PROCESS === */
.hiw-process{
  padding:80px 0;
  text-align:center;
}
.hiw-steps{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.hiw-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:180px;
  position:relative;
}
.hiw-step-num{
  position:absolute;
  top:-8px;
  right:40px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--primary-100);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  z-index:2;
}
.hiw-step-icon{
  width:70px;
  height:70px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.hiw-step-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hiw-step-icon.purple{background:var(--primary-100); color:var(--primary);}
.hiw-step-icon.orange{background:var(--pipeline-bg); color:var(--pipeline-text);}
.hiw-step-icon.blue{background:var(--investigating-bg); color:var(--investigating-text);}
.hiw-step-icon.indigo{background:#eae9ff; color:#6366f1;}
.hiw-step-icon.green{background:var(--open-bg); color:var(--open-text);}
.hiw-step h4{
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
}
.hiw-step p{
  font-size:12.5px;
  color:var(--gray-500);
  line-height:1.5;
  max-width:170px;
}
.hiw-step-connector{
  flex:1 1 auto;
  max-width:90px;
  min-width:24px;
  height:0;
  margin-top:35px;
  border-top:2px dashed #d8d4f5;
}

/* === ISSUE STATUS === */
.hiw-status{
  background:var(--bg-soft);
  padding:80px 0;
  text-align:center;
}
.hiw-status-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
}
.hiw-status-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:24px 16px;
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.hiw-status-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  margin-bottom:16px;
}
.hiw-status-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
}
.hiw-status-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hiw-status-card .desc{
  font-size:12px;
  color:var(--gray-500);
  line-height:1.5;
}
.hiw-c-green{color:#16A34A;}
.hiw-bg-green{background:var(--fixed-bg); color:#16A34A;}
.hiw-c-teal{color:#0891B2;}
.hiw-bg-teal{background:var(--fixed-bg); color:#0891B2;}
.hiw-c-blue{color:#2563EB;}
.hiw-bg-blue{background:var(--open-bg); color:#2563EB;}
.hiw-c-orange{color:#C2410C;}
.hiw-bg-orange{background:var(--pipeline-bg); color:#C2410C;}
.hiw-c-purple{color:#6D28D9;}
.hiw-bg-purple{background:var(--investigating-bg); color:#6D28D9;}
.hiw-c-amber{color:#B45309;}
.hiw-bg-amber{background:var(--waiting-bg); color:#B45309;}
.hiw-c-gray{color:#64748B;}
.hiw-bg-gray{background:#F1F5F9; color:#64748B;}
.hiw-tip{
  margin-top:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  color:var(--gray-600);
}
.hiw-tip svg{width:15px; height:15px; color:#F59E0B;}

/* === WHY IT WORKS === */
.hiw-why{
  padding:80px 0;
  text-align:center;
}
.hiw-why-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
}
.hiw-why-item{text-align:left;}
.hiw-why-icon{
  width:50px;
  height:50px;
  border-radius:12px;
  background:var(--primary-100);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.hiw-why-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hiw-why-item h4{
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
}
.hiw-why-item p{
  font-size:13px;
  color:var(--gray-500);
  line-height:1.6;
}

/* === CTA === */
.hiw-cta{padding:0 0 80px;}
.hiw-cta-box{
  background:var(--cta-bg);
  border-radius:16px;
  padding:40px 50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}
.hiw-cta-left{
  display:flex;
  align-items:center;
  gap:24px;
}
.hiw-cta-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.hiw-cta-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hiw-cta-left h3{
  font-size:20px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
}
.hiw-cta-left p{
  font-size:14px;
  color:var(--gray-600);
}
.hiw-cta-right{text-align:right;}
.hiw-cta-right .note{
  margin-top:10px;
  font-size:12.5px;
  color:var(--primary);
  font-weight:500;
}

/* === AI-POWERED, HUMAN-BACKED === */
.hiw-ai{
  background:linear-gradient(180deg,#F6F5FE 0%, #ffffff 100%);
  padding:80px 0;
  text-align:center;
}
.hiw-ai-flow{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:18px;
  margin-bottom:36px;
}
.hiw-ai-card{
  flex:1 1 0;
  max-width:380px;
  text-align:left;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:32px 28px;
  box-shadow:var(--shadow-sm);
  position:relative;
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.hiw-ai-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.hiw-ai-card-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.hiw-ai-card-icon svg{
  width:24px;
  height:24px;
}
.hiw-ai-card--bot .hiw-ai-card-icon{background:var(--primary-100); color:var(--primary);}
.hiw-ai-card--human .hiw-ai-card-icon{background:var(--open-bg); color:var(--open-text);}
.hiw-ai-pill{
  position:absolute;
  top:28px;
  right:28px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:4px 11px;
  border-radius:999px;
  background:var(--primary-100);
  color:var(--primary);
}
.hiw-ai-pill--alt{background:var(--open-bg); color:var(--open-text);}
.hiw-ai-card h4{
  font-size:18px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:10px;
}
.hiw-ai-desc{
  font-size:13.5px;
  color:var(--gray-600);
  line-height:1.6;
  margin-bottom:18px;
}
.hiw-ai-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hiw-ai-list li{
  position:relative;
  padding-left:24px;
  font-size:13px;
  color:var(--gray-600);
  line-height:1.5;
}
.hiw-ai-list li::before{
  content:"";
  position:absolute;
  left:4px;
  top:7px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--primary);
}
.hiw-ai-card--human .hiw-ai-list li::before{background:var(--open-text);}
.hiw-ai-bridge{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  align-self:center;
  color:var(--gray-400);
  min-width:70px;
}
.hiw-ai-bridge-text{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  white-space:nowrap;
  color:var(--gray-500);
}
.hiw-ai-bridge svg{
  width:34px;
  height:34px;
  color:var(--primary);
  opacity:0.55;
}
.hiw-ai-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:680px;
  font-size:13px;
  color:var(--gray-600);
  line-height:1.6;
  text-align:center;
}
.hiw-ai-note svg{width:16px; height:16px; color:var(--primary); flex-shrink:0;}
.hiw-ai-note a{color:var(--primary); font-weight:600;}

/* === RESPONSIVE === */
@media (max-width: 980px){
  .hiw-hero-inner{grid-template-columns:1fr; gap:56px;}
  .hiw-hero-right{max-width:540px; margin:0 auto; order:-1;}
  .hiw-hero-left h2{font-size:34px;}
  .hiw-status-grid{grid-template-columns:repeat(3,1fr);}
  .hiw-why-grid{grid-template-columns:repeat(2,1fr);}
  .hiw-steps{flex-wrap:wrap; row-gap:40px;}
  .hiw-step-connector{display:none;}
  .hiw-ai-flow{flex-direction:column; align-items:center;}
  .hiw-ai-card{width:100%; max-width:480px;}
  .hiw-ai-bridge{flex-direction:row; min-width:auto;}
  .hiw-ai-bridge svg{transform:rotate(90deg);}
}
@media (max-width: 640px){
  .hiw-hero{padding:36px 0 48px;}
  .hiw-hero-left h2{font-size:28px;}
  .hiw-hero-left h3{font-size:21px;}
  .hiw-hero-features{gap:24px;}
  .hiw-process,
  .hiw-status,
  .hiw-why{padding:56px 0;}
  .hiw-ai{padding:56px 0;}
  .hiw-section-title{font-size:24px;}
  .hiw-section-sub{margin-bottom:40px;}
  .hiw-status-grid{grid-template-columns:repeat(2,1fr);}
  .hiw-why-grid{grid-template-columns:1fr;}
  .hiw-cta-box{flex-direction:column; align-items:flex-start; padding:28px 24px;}
  .hiw-cta-right{align-self:stretch; text-align:left;}
  .hiw-cta-right .btn{width:100%;}
  .hiw-arrow{display:none;}
  .hiw-dots{right:0;}
  .hiw-status-panel{right:0; top:-10px;}
  .hiw-check{left:auto; right:70px; top:90px;}
  .hiw-ai-card{padding:26px 22px;}
}