/* How we work and its exact style-key examples only. Shared assets unchanged. */
.how-page .mainnav a[aria-current="page"], .how-page .mobile-menu a[aria-current="page"], .how-page .eyebrow { background:var(--sky); color:var(--teal); }
.hw-opening { padding-top:64px; padding-bottom:72px; }
.hw-opening-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:88px; align-items:center; margin-top:28px; }
.hw-opening h1 { font-size:clamp(46px,5.3vw,76px); line-height:1.04; letter-spacing:-.03em; }
.hw-opening-note { margin-top:20px; font-size:16px; color:var(--slate); }
.hw-route { list-style:none; padding:0; margin:0; }
.hw-stage { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:40px; padding-bottom:56px; }
.hw-stage::before { content:""; position:absolute; left:12px; top:24px; bottom:-24px; width:24px; background:repeating-linear-gradient(180deg,var(--white) 0 14px,transparent 14px 26px) center / 3px 100% repeat-y,var(--teal); }
.hw-stage:last-child { padding-bottom:0; }
.hw-stage:last-child::before { display:none; }
.hw-number { position:relative; display:grid; place-items:center; width:48px; height:48px; border:2px solid var(--teal); border-radius:16px; background:var(--white); color:var(--teal); font-size:19px; font-weight:650; }
.hw-stage-grid { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:64px; border-top:1px solid var(--line); padding-top:22px; }
.hw-story h2 { font-size:clamp(30px,2.65vw,38px); line-height:1.12; letter-spacing:-.025em; }
.hw-story > p { margin-top:18px; }
.hw-story .hw-support { font-size:15px; line-height:1.55; color:var(--slate); }
.hw-link { display:inline-block; margin-top:16px; font-size:15px; font-weight:600; }
.hw-result { min-width:0; padding-top:4px; }
.hw-result-label { font-size:13px; line-height:1.5; font-weight:600; color:var(--slate); margin-bottom:12px; }
.hw-output { font-size:23px; line-height:1.35; letter-spacing:-.015em; color:var(--teal); font-weight:600; max-width:26ch; }
.hw-choice .hw-number { background:var(--amber); border-color:var(--amber); color:var(--graphite); }
.hw-choice .hw-result { background:var(--peach); border-radius:24px; padding:24px; align-self:start; }
.hw-choice .hw-result-label { color:var(--teal); }
.hw-evidence { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hw-evidence span { background:var(--cloud); border-radius:8px; padding:6px 10px; font-size:13px; line-height:1.5; color:var(--teal); }
.hw-arrival { margin:24px 0 0; }
.hw-confirmations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hw-confirmations > div { background:var(--cloud); padding:20px; border-radius:20px; }
.hw-confirmations h3 { font-size:20px; line-height:1.25; }
.hw-confirmations p { font-size:15px; line-height:1.5; margin-top:10px; }
.hw-confirmations span { display:block; border-top:1px solid var(--line); padding-top:12px; margin-top:18px; font-size:13px; line-height:1.5; color:var(--slate); }
.hw-arrival figcaption { font-size:13px; line-height:1.5; color:var(--slate); margin-top:14px; }
.hw-arrival figcaption b { color:var(--teal); font-weight:600; }
.hw-closing { padding-top:80px; }
.hw-close { padding:56px; border-radius:40px; background:var(--teal); }
.hw-close h2 { color:var(--white); font-size:clamp(36px,3.7vw,50px); line-height:1.08; letter-spacing:-.025em; }
.hw-close > p { margin-top:20px; max-width:46em; }
.hw-close .actions { margin-top:28px; }
.hw-close .hw-employer { background:var(--mint); border-color:var(--mint); color:var(--teal); }
.hw-close .hw-agency { background:var(--peach); border-color:var(--peach); color:var(--teal); }
.hw-close .btn:hover { background:var(--white); border-color:var(--white); }
.hw-close-note { font-size:15px; line-height:1.55; color:var(--white); }
.hw-close > p { color:var(--white); }
.how-page .site-footer { margin-top:80px; }
.hw-key-examples { margin-top:32px; }
@media(max-width:1100px) { .hw-opening-grid { gap:48px; } .hw-stage { column-gap:28px; } .hw-stage-grid { gap:32px; } .hw-confirmations { grid-template-columns:minmax(0,1fr); } }
@media(max-width:960px) { .hw-opening-grid { grid-template-columns:minmax(0,1fr); gap:28px; } .hw-stage-grid { grid-template-columns:minmax(0,1fr); gap:24px; } .hw-result { max-width:620px; } .hw-output { max-width:34ch; } .hw-confirmations { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
 .hw-opening { padding-top:36px; padding-bottom:48px; }
 .hw-opening-grid { margin-top:22px; gap:24px; }
 .hw-opening h1 { font-size:46px; }
 .hw-stage { column-gap:20px; padding-bottom:40px; }
 .hw-stage-grid { padding-top:8px; border:0; gap:22px; }
 .hw-story h2 { font-size:30px; }
 .hw-story > p { margin-top:16px; }
 .hw-output { font-size:20px; }
 .hw-result-label { margin-bottom:8px; }
 .hw-choice .hw-result { padding:20px; }
 .hw-confirmations { grid-template-columns:minmax(0,1fr); }
 .hw-closing { padding-top:56px; }
 .hw-close { padding:32px 24px; border-radius:24px; }
 .hw-close h2 { font-size:36px; }
 .hw-close .btn { width:100%; font-size:16px; padding-left:12px; padding-right:12px; }
 .how-page .site-footer { margin-top:56px; }
}