/* =============================================
   How it works page
   ============================================= */

/* PIPELINE */
.pipeline{padding:100px 60px;background:#fff}
.pipeline h2{font-size:35px;font-weight:500;color:#1a1a1a;margin-bottom:10px;letter-spacing:-0px;text-align:center}
.pipeline>p{font-size:19px;color:#6b6b6b;line-height:1.7;text-align:center;max-width:675px;margin:0 auto 60px}
.pipe-steps{display:flex;align-items:flex-start;justify-content:center;gap:0;max-width:1000px;margin:0 auto;position:relative}
.pipe-step{flex:1;text-align:center;position:relative;padding:0 10px}
.pipe-icon{width:70px;height:70px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;background:rgba(0,68,238,.06);border:1px solid rgba(0,68,238,.1);transition:all .3s}
.pipe-step:hover .pipe-icon{background:rgba(0,68,238,.1);border-color:rgba(0,68,238,.2);transform:translateY(-3px)}
.pipe-icon svg{width:30px;height:30px}
.pipe-name{font-size:20px;font-weight:500;color:#1a1a1a;margin-bottom:10px;line-height:1.3;letter-spacing:-0px}
.pipe-desc{font-size:16px;color:#6b6b6b;line-height:1.6}
.pipe-arrow{position:absolute;top:35px;right:-15px;color:#ddd;font-size:20px}

/* DIFFERENTIATORS */
.diffs{padding:0 60px 100px;background:#fff}
.diff-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;max-width:1125px;margin:0 auto}
.diff{padding:50px 40px;background:#f8f4ea;transition:background .3s,transform .3s,box-shadow .3s}
.diff:hover{background:#f2f2ef;transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.diff:nth-child(1){border-radius:20px 0 0 0}
.diff:nth-child(3){border-radius:0 20px 0 0}
.diff:nth-child(4){border-radius:0 0 0 20px}
.diff:nth-child(6){border-radius:0 0 20px 0}
.diff-num{font-size:40px;font-weight:500;color:rgba(0,68,238,.15);margin-bottom:15px;line-height:1}
.diff-title{font-size:19px;font-weight:500;color:#1a1a1a;margin-bottom:10px;line-height:1.3}
.diff-desc{font-size:16px;color:#6b6b6b;line-height:1.7}
.diff-tagline{font-family:var(--serif);font-size:16px;color:var(--blue);display:block;margin-bottom:18px;line-height:1.4}

/* EXAMPLE */
.example{padding:100px 60px;background:var(--dark-1);position:relative;overflow:hidden}
.example::before{content:'';position:absolute;bottom:-125px;right:-125px;width:500px;height:500px;background:radial-gradient(circle,rgba(0,68,238,.04) 0%,transparent 70%);pointer-events:none}
.example-inner{max-width:900px;margin:0 auto}
.example h2{font-size:30px;font-weight:500;color:var(--text-h);margin-bottom:10px;letter-spacing:-0px}
.example>p,.example-inner>p{font-size:19px;color:var(--text-m);line-height:1.7;margin-bottom:40px}
.example-card{background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:15px;padding:35px 30px;position:relative}
.example-label{font-size:13px;font-weight:500;color:var(--amber);text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.example-title{font-size:20px;font-weight:500;color:var(--text-h);margin-bottom:15px}
.example-body{font-family:var(--serif);font-size:18px;color:var(--text-b);line-height:1.8;font-style:italic}
.example-sources{margin-top:25px;padding-top:20px;border-top:1px solid var(--dark-border)}
.example-source{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-d);margin-right:20px;margin-bottom:8px}
.example-source-dot{width:6px;height:6px;border-radius:50%}
.src-green{background:var(--green)}
.src-amber{background:var(--amber)}
.src-red{background:var(--red)}
.example-verdict{margin-top:25px;padding:20px 25px;background:rgba(239,159,39,.06);border-radius:10px;border-left:4px solid var(--amber)}
.example-verdict p{font-size:16px;color:var(--text-b);line-height:1.7}
.example-verdict strong{color:var(--amber);font-weight:500}

/* MOBILE */
@media(max-width:960px){
  .pipeline{padding:60px 25px}
  .pipeline h2{font-size:28px}
  .pipe-steps{flex-direction:column;gap:30px;align-items:center}
  .pipe-arrow{display:none}
  .pipe-step{max-width:300px}
  .diffs{padding:0 25px 60px}
  .diff-grid{grid-template-columns:1fr;gap:3px}
  .diff{border-radius:0!important}
  .diff:first-child{border-radius:20px 20px 0 0!important}
  .diff:last-child{border-radius:0 0 20px 20px!important}
  .example{padding:60px 25px}
}