/* ─────────────────────────────────────────
   HOW IT WORKS PAGE
───────────────────────────────────────── */

/* Steps */
.hiw-steps-list { display: flex; flex-direction: column; }

.hiw-step-row {
    display: grid; grid-template-columns: 80px 1fr;
    border: 1px solid var(--grey-100); border-bottom: none;
    background: #fff; transition: box-shadow 0.2s;
}
.hiw-step-row:last-child { border-bottom: 1px solid var(--grey-100); }
.hiw-step-row:hover { box-shadow: 0 4px 24px rgba(0,48,96,0.08); z-index: 1; position: relative; }

.hiw-step-number-col { display: flex; align-items: flex-start; justify-content: center; padding: 36px 0 0; }
.hiw-step-row--1 .hiw-step-number-col { background: var(--navy-deep); }
.hiw-step-row--2 .hiw-step-number-col { background: #00254A; }
.hiw-step-row--3 .hiw-step-number-col { background: #001A34; }
.hiw-step-row--4 .hiw-step-number-col { background: var(--crimson); }

.hiw-step-num { font-family: var(--serif); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; }
.hiw-step-content { padding: 36px 40px 36px 36px; }
.hiw-step-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.hiw-step-icon { width: 48px; height: 48px; background: var(--navy-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hiw-step-title { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--navy-deep); letter-spacing: 0.02em; }
.hiw-step-desc { font-size: 15px; color: var(--grey-500); line-height: 1.75; margin-bottom: 20px; }
.hiw-step-details { display: flex; flex-direction: column; gap: 10px; }
.hiw-step-detail { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--grey-700); line-height: 1.5; padding: 12px 16px; background: var(--off-white); border-left: 3px solid var(--navy-pale); }
.hiw-step-row--4 .hiw-step-detail { border-left-color: rgba(192,0,48,0.2); }
.hiw-step-detail-tick { width: 18px; height: 18px; background: var(--navy); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.hiw-step-row--4 .hiw-step-detail-tick { background: var(--crimson); }

/* Trust strip */
.hiw-trust-strip { background: var(--navy); padding: 28px 48px; display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.hiw-trust-item { display: flex; align-items: center; gap: 12px; }
.hiw-trust-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hiw-trust-label { font-size: 13px; font-weight: 600; color: #fff; display: block; }
.hiw-trust-sub { font-size: 11px; color: rgba(255,255,255,0.5); display: block; }

/* FAQ */
.hiw-faq-list { display: flex; flex-direction: column; margin-top: 48px; }
.hiw-faq-item { border: 1px solid var(--grey-100); border-bottom: none; background: #fff; }
.hiw-faq-item:last-child { border-bottom: 1px solid var(--grey-100); }
.hiw-faq-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 22px 28px; cursor: pointer; text-align: left; gap: 16px; transition: background 0.15s; }
.hiw-faq-trigger:hover { background: var(--navy-pale); }
.hiw-faq-q { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--navy-deep); letter-spacing: 0.02em; }
.hiw-faq-chevron { width: 28px; height: 28px; background: var(--navy-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, transform 0.3s; }
.hiw-faq-item.open .hiw-faq-chevron { background: var(--crimson); transform: rotate(180deg); }
.hiw-faq-item.open .hiw-faq-chevron svg path { stroke: #fff; }
.hiw-faq-body { display: none; padding: 0 28px 22px; }
.hiw-faq-item.open .hiw-faq-body { display: block; }
.hiw-faq-a { font-size: 14px; color: var(--grey-500); line-height: 1.75; }

/* Responsive */
@media (max-width: 900px) {
    .hiw-step-number-col { display: none; }
    .hiw-step-row { grid-template-columns: 1fr; }
    .hiw-step-content { padding: 24px 20px; }
    .hiw-trust-strip { padding: 24px 20px; gap: 24px; }
}