/* How It Works - approved mock composition (rev 3, 2026-10-10) */

/* This page's hero card ends at the metrics row; there is no total block. */
.hw-card-compact .hm-analysis-metrics{margin-bottom:20px}

/* Self-contained kicker so this page does not inherit homepage overrides. */
.hw-kicker{display:flex;align-items:center;gap:15px;color:#71808c;text-transform:uppercase;letter-spacing:.28em;font-size:10px;font-weight:800;margin-left:2px}
.hw-kicker:after{content:"";height:1px;width:42px;background:#aeb9c1}
.hw-kicker.light{color:#dbe5ec}
.hw-kicker.light:after{background:#8fa3b5}

/* ---------- The process ---------- */
.hw-process{background:#fff;padding:52px 0 10px}
.hw-process-head h2{font-size:clamp(30px,3.3vw,42px);line-height:1.05;margin:16px 0 10px}
.hw-process-head p{font-size:15px;line-height:1.5;color:var(--muted);margin:0;max-width:620px}

.hw-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 16px;margin:40px 0 0}
.hw-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.hw-step-num{position:relative;z-index:1;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:17px;font-weight:800}
.hw-step:not(:last-child):after{content:"";position:absolute;top:25px;left:calc(50% + 34px);width:calc(100% - 68px);height:2px;background:#c6cfd8}
.hw-step:not(:last-child):before{content:"";position:absolute;top:21px;left:calc(150% - 42px);width:9px;height:9px;border-top:2px solid #c6cfd8;border-right:2px solid #c6cfd8;transform:rotate(45deg)}
.hw-step-icon{width:74px;height:74px;border-radius:50%;background:#f2f6f9;display:grid;place-items:center;margin:26px 0 18px}
.hw-step-icon svg{width:36px;height:36px;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hw-step-icon svg .red{stroke:var(--red)}
.hw-step h3{font-size:16px;line-height:1.18;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin:0 0 9px;max-width:185px}
.hw-step p{font-size:13px;line-height:1.5;color:var(--muted);margin:0;max-width:198px}

/* ---------- Document scene: upload -> estimate -> completion packet ---------- */
.hw-docs{background:#fff;padding:20px 0 58px}
.hw-scene-wrap{display:flex;justify-content:center;height:388px;overflow:hidden}
.hw-scene{position:relative;flex:0 0 1060px;width:1060px;height:388px;transform-origin:top center}
.hw-scene:before{content:"";position:absolute;z-index:0;left:88px;right:78px;bottom:8px;height:60px;border-radius:50%;background:rgba(18,42,66,.26);filter:blur(28px)}
.hw-sheet{position:absolute;background:#fff;border:1px solid #dce3e9;border-radius:8px;box-shadow:0 16px 32px rgba(16,39,62,.16),0 4px 10px rgba(16,39,62,.09)}

.hw-upload-sheet{left:15px;top:48px;width:330px;height:296px;z-index:1;padding:22px;display:flex;flex-direction:column;transform:rotate(-4deg)}
.hw-upload-sheet>strong{font-size:15px;color:var(--navy);letter-spacing:-.015em}
.hw-dropzone{flex:1;margin:16px 0;border:1.5px dashed #c3cedb;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px}
.hw-dropzone svg{width:30px;height:30px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.hw-dropzone b{font-size:11px;font-weight:600;color:#5d6b78;line-height:1.55}
.hw-dropzone small{font-size:9.5px;color:#8d99a4;margin-top:9px}
.hw-sheet-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:7px;background:var(--navy);color:#fff;font-size:13px;font-weight:750;text-decoration:none}

.hw-est-sheet{left:317px;top:8px;width:472px;height:340px;z-index:3;padding:18px 20px;box-shadow:0 30px 56px rgba(16,39,62,.22),0 8px 18px rgba(16,39,62,.13),0 1px 3px rgba(16,39,62,.1)}
.hw-est-brand{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e8ec;padding-bottom:12px}
.hw-est-brand img{width:132px}
.hw-est-brand span{font-size:12px;font-weight:800;color:#24364a}
.hw-est-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:13px 0 11px}
.hw-est-meta strong{font-size:11px;color:#1b2d40;line-height:1.5}
.hw-est-meta small{display:grid;grid-template-columns:auto auto;gap:3px 14px;justify-content:end;font-size:8.5px;line-height:1.5;white-space:nowrap}
.hw-est-meta small span{color:#6e7d88}
.hw-est-meta small i{font-style:normal;color:#243648;text-align:right}
.hw-est-table{border:1px solid #e1e6ea;border-radius:5px;overflow:hidden}
.hw-est-table>div{display:grid;grid-template-columns:18px 1.1fr 1.75fr 46px;align-items:center;gap:6px;padding:7px 8px;border-bottom:1px solid #e8ecef;font-size:8px;color:#4a5a66}
.hw-est-table>div:last-child{border-bottom:0}
.hw-est-table .head{background:#eef2f5;color:#1c3044;font-size:7.5px;font-weight:800}
.hw-est-table strong{text-align:right;color:#1d3044;font-size:8.5px}

.hw-packet-sheet{left:779px;top:44px;width:266px;height:300px;z-index:2;padding:18px;transform:rotate(3.5deg)}
.hw-packet-sheet>strong{display:block;font-size:11.5px;color:#1a2d40}
.hw-packet-sheet>b{display:block;font-size:10px;font-weight:600;color:#71808b;margin:3px 0 13px}
.hw-packet-sheet ul{list-style:none;padding:0;margin:0}
.hw-packet-sheet li{display:flex;align-items:center;gap:8px;font-size:9.5px;color:#4e5e6b;margin:9px 0}
.hw-packet-sheet li:before{content:"\2713";flex:0 0 auto;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#2f9c70;color:#fff;font-size:8px}
.hw-packet-sheet img{width:100%;height:84px;object-fit:cover;border-radius:4px;margin-top:12px}

/* ---------- Behind the scenes ---------- */
.hw-after{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 0}
.hw-after-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:40px;align-items:start}
.hw-after-copy h2{font-size:clamp(28px,3vw,37px);line-height:1.05;margin:16px 0 13px}
.hw-after-copy h2 span{color:var(--red)}
.hw-after-copy p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;max-width:340px}
.hw-feature{border-left:1px solid var(--line);padding-left:32px}
.hw-feature svg{width:38px;height:38px;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:17px}
.hw-feature svg .red{stroke:var(--red)}
.hw-feature h3{font-size:17px;line-height:1.16;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin:0 0 10px;max-width:190px}
.hw-feature p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}

/* ---------- Closing CTA: contained rounded card, per mock ---------- */
.hw-cta{background:#fff;padding:14px 0 58px}
.hw-cta-inner{position:relative;display:flex;align-items:center;gap:34px;padding:34px 42px;min-height:150px;border-radius:18px;background:linear-gradient(100deg,#0a2135 0%,#102f4c 56%,#143a5c 100%);box-shadow:0 18px 44px rgba(14,40,65,.18)}
.hw-cta-head{flex:0 0 auto}
.hw-cta h2{font-size:clamp(28px,3vw,38px);line-height:1.04;color:#fff;letter-spacing:-.035em;margin:12px 0 0}
.hw-cta h2 span{color:#e8565c}
.hw-cta p{flex:1;font-size:14.5px;line-height:1.5;color:#cdd9e3;margin:0;padding-left:34px;border-left:1px solid rgba(255,255,255,.17)}
.hw-white-btn{flex:0 0 auto;text-decoration:none;background:#fff;color:var(--navy);min-width:206px;min-height:50px;border-radius:11px;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* ---------- Responsive ---------- */
@media(max-width:1060px){
  .hw-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 16px}
  .hw-step:not(:last-child):after,.hw-step:not(:last-child):before{display:none}
  .hw-after-grid{grid-template-columns:1fr 1fr;gap:34px}
  .hw-after-copy{grid-column:1 / -1}
  .hw-after-copy p{max-width:620px}
  .hw-feature:nth-child(even){border-left:0;padding-left:0}
}
@media(max-width:980px){
  .hw-cta-inner{flex-wrap:wrap;gap:22px;padding:30px 32px}
  .hw-cta-head{flex:1 1 100%}
  .hw-cta p{flex:1 1 58%;padding-left:0;border-left:0}
}
@media(max-width:1120px){
  .hw-scene{transform:scale(.85)}
  .hw-scene-wrap{height:330px}
}
@media(max-width:940px){
  .hw-scene{transform:scale(.70)}
  .hw-scene-wrap{height:272px}
}
@media(max-width:720px){
  .hw-process{padding:40px 0 6px}
  .hw-steps{grid-template-columns:1fr;gap:30px}
  .hw-step{align-items:flex-start;text-align:left}
  .hw-step-icon{margin:18px 0 14px}
  .hw-step h3,.hw-step p{max-width:100%}
  .hw-docs{padding:10px 0 40px}
  .hw-scene-wrap{display:block;height:auto;overflow:visible}
  .hw-scene:before{display:none}
  .hw-scene{position:static;flex:none;width:100%;height:auto;transform:none;display:grid;gap:16px}
  .hw-sheet{position:static!important;width:100%!important;height:auto!important;transform:none!important;left:auto;right:auto;top:auto}
  .hw-upload-sheet{min-height:252px}
  .hw-after-grid{grid-template-columns:1fr;gap:28px}
  .hw-feature{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
  .hw-feature h3{max-width:100%}
  .hw-cta{padding:10px 0 42px}
  .hw-cta-inner{display:block;padding:28px 24px;border-radius:16px}
  .hw-cta p{margin:14px 0 20px}
}