/* Flint Digital V2 — How It Works Page Styles */

/* Narrower page header for this page */
.page-header{max-width:900px}

/* PROCESS STEPS */
.process{max-width:900px;margin:0 auto;padding:0 48px 100px;position:relative;z-index:2}
.step{display:grid;grid-template-columns:80px 1fr;gap:32px;padding:48px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step-num{font-family:var(--mono);font-size:36px;font-weight:700;line-height:1}
.step:nth-child(1) .step-num{color:var(--copper)}
.step:nth-child(2) .step-num{color:var(--slate)}
.step:nth-child(3) .step-num{color:var(--sage)}
.step:nth-child(4) .step-num{color:var(--copper2)}
.step h3{font-size:24px;font-weight:600;color:var(--text2);margin-bottom:10px;letter-spacing:-.3px}
.step p{font-size:15px;line-height:1.8;color:var(--dim);font-weight:300;max-width:600px}
.step-tag{font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;margin-top:14px;display:inline-block;padding:4px 12px;border-radius:2px}
.step:nth-child(1) .step-tag{color:var(--copper);border:1px solid rgba(196,122,74,.2)}
.step:nth-child(2) .step-tag{color:var(--slate);border:1px solid rgba(122,138,150,.2)}
.step:nth-child(3) .step-tag{color:var(--sage);border:1px solid rgba(122,148,120,.2)}
.step:nth-child(4) .step-tag{color:var(--copper2);border:1px solid rgba(212,149,106,.2)}

/* TIMELINE */
.timeline{border-top:1px solid var(--line);position:relative;z-index:2}
.timeline-inner{max-width:900px;margin:0 auto;padding:100px 48px}
.timeline .section-label{color:var(--slate)}
.timeline-title{font-size:36px;font-weight:200;letter-spacing:-1px;line-height:1.12;margin-bottom:48px;color:var(--text2)}
.timeline-title strong{font-weight:700;color:var(--text)}
.tl-row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line2);align-items:baseline}
.tl-row:last-child{border-bottom:none}
.tl-time{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--copper);font-weight:700}
.tl-desc{font-size:14px;color:var(--dim);font-weight:300;line-height:1.6}

/* WHY GRID */
.why{border-top:1px solid var(--line);position:relative;z-index:2}
.why-inner{max-width:900px;margin:0 auto;padding:100px 48px}
.why .section-label{color:var(--copper)}
.why-title{font-size:36px;font-weight:200;letter-spacing:-1px;line-height:1.12;margin-bottom:20px;color:var(--text2)}
.why-title strong{font-weight:700;color:var(--text)}
.why-intro{color:var(--dim);font-size:15px;line-height:1.85;font-weight:300;margin-bottom:48px;max-width:600px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.why-card{background:var(--bg);padding:36px 28px;transition:background .3s}
.why-card:hover{background:var(--card)}
.why-idx{font-family:var(--mono);font-size:10px;letter-spacing:2px;font-weight:400;margin-bottom:12px}
.why-card:nth-child(1) .why-idx{color:var(--copper)}
.why-card:nth-child(2) .why-idx{color:var(--slate)}
.why-card:nth-child(3) .why-idx{color:var(--sage)}
.why-card:nth-child(4) .why-idx{color:var(--copper2)}
.why-card h4{font-size:17px;font-weight:600;margin-bottom:8px;color:var(--text2)}
.why-card p{font-size:13px;line-height:1.75;color:var(--dim);font-weight:300}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .process{padding:0 20px 60px}
  .step{grid-template-columns:48px 1fr;gap:16px;padding:32px 0}
  .step-num{font-size:28px}
  .why-inner{padding:60px 20px}
  .why-grid{grid-template-columns:1fr}
  .timeline-inner{padding:60px 20px}
  .tl-row{grid-template-columns:1fr;gap:4px}
}