/* At-a-glance reference page. Shared homepage palette, no scroll pin. */
.how-page { background:#fffdf9 }
.hw-wrap { width:min(1120px,calc(100% - 48px)); margin-inline:auto }
.hw-eyebrow { display:block; font:500 10px/1.4 var(--font); letter-spacing:.16em; text-transform:uppercase; color:#907347; margin-bottom:13px }
#hw-overview { padding:36px 0 24px; background:radial-gradient(ellipse at 90% 0%,#eee4cb77,transparent 46%),linear-gradient(150deg,#fffdf9,#f7f4ea); border-bottom:1px solid #e5ddcc }
.hw-heading { display:flex; align-items:center; justify-content:space-between; gap:30px }
.hw-heading h1 { font:500 clamp(28px,3.1vw,40px)/1.1 var(--font); letter-spacing:-.05em; margin:0 }
.hw-heading p { font-size:14px; line-height:1.6; color:#75674f; margin:14px 0 0 }
.hw-total { min-width:230px; padding-left:28px; border-left:1px solid #d8cebb; color:#286f4e }
.hw-total > span { font:500 10px/1.4 var(--font); letter-spacing:.09em; text-transform:uppercase; color:#6d725e }
.hw-total > div { display:flex; align-items:center; gap:14px; margin-top:10px }
.hw-total strong { font:600 55px/.95 var(--font); letter-spacing:-.06em }
.hw-total div span { font:400 11px/1.4 var(--font); max-width:60px; color:#727963 }
.hw-map { position:relative; height:370px; margin-top:2px }
.hw-road { position:absolute; inset:0; width:100%; height:370px }
.hw-map ol { list-style:none; margin:0; padding:0 }
.hw-stop { position:absolute; left:var(--stop-x); top:150px; width:150px; transform:translateX(-50%); text-align:center }
.hw-stop--low { top:230px }
.hw-node { width:86px; height:86px; margin:auto; transform:translateY(-50%); border-radius:50%; border:7px solid #f9f7ef; background:#286e50; box-shadow:0 0 0 1px #d6dfce,0 7px 18px #325b3620; display:grid; place-items:center; color:#fffef5; position:relative }
.hw-node::after { content:""; position:absolute; inset:5px; border:1px solid #ffffff30; border-radius:50% }
.hw-node span { font:600 26px/1 var(--font); letter-spacing:-.055em }
.hw-stop--check .hw-node { background:#f4ecdb; color:#776135; box-shadow:0 0 0 1px #ded2b8,0 7px 18px #79663516 }
.hw-stop--check .hw-node::after { border-color:#b3945333 }
.hw-stop-copy { position:absolute; left:-10px; right:-10px; bottom:110px }
.hw-stop--low .hw-stop-copy { bottom:auto; top:62px }
.hw-day { font:500 10px/1.2 var(--font); letter-spacing:.1em; color:#8b734f }
.hw-stop h3 { font:600 14px/1.35 var(--font); letter-spacing:-.02em; margin:7px 0 4px }
.hw-stop-copy p { font:400 11px/1.45 var(--font); color:#7c6f58; margin:0 }
.hw-map-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:18px; border-top:1px solid #ded6c6 }
.hw-map-footer > div { display:flex; gap:23px; flex-shrink:0 }
.hw-map-footer span { display:flex; gap:7px; font:500 11px/1.4 var(--font); color:#48644d }
.hw-map-footer i { font-style:normal }
.hw-map-footer p { margin:0; font:400 10px/1.6 var(--font); color:#796e58; max-width:400px; text-align:right }
#hw-process,#hw-firms { padding:76px 0 }
#hw-process { background:#fffdf9 }
.hw-process-grid { display:grid; grid-template-columns: .9fr 1.4fr; gap:100px }
.hw-section-intro h2 { font:500 clamp(28px,3vw,38px)/1.13 var(--font); letter-spacing:-.045em; margin:0 }
.hw-section-intro p { color:#766951; font:400 14px/1.75 var(--font); max-width:540px; margin:18px 0 0 }
.hw-section-intro a { display:inline-flex; gap:20px; color:#a74920; font:500 12px/1.4 var(--font); margin-top:26px; border-bottom:1px solid #d8b999; padding-bottom:6px }
.hw-process-list { list-style:none; padding:0; margin:0 }
.hw-process-list li { display:flex; gap:22px; padding:20px 0; border-bottom:1px solid #e9e1d3 }
.hw-process-list li:first-child { padding-top:0 }
.hw-process-list li:last-child { border-bottom:0; padding-bottom:0 }
.hw-step-number { flex:0 0 36px; height:36px; border:1px solid #dcd0bb; border-radius:50%; display:grid; place-items:center; color:#947342; font:500 11px/1 var(--font) }
.hw-process-list h3 { font:600 15px/1.4 var(--font); margin:0 0 7px; letter-spacing:-.02em }
.hw-process-list p { font:400 13px/1.7 var(--font); color:#796c56; margin:0 }
#hw-firms { background:#f5f3eb; border-block:1px solid #e5ddce }
.hw-firm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px }
.hw-firm-card { padding:26px; background:#fffdfa; border:1px solid #e0d7c5; border-radius:20px; box-shadow:0 12px 25px -23px #68543760; transition:transform .25s,box-shadow .25s }
.hw-firm-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px -22px #68543755 }
.hw-firm-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px }
.hw-monogram { display:grid; place-items:center; width:46px; height:46px; background:#eaf0e7; color:#2c6749; border:1px solid #dce4d4; border-radius:13px; font:600 14px/1 var(--font); letter-spacing:-.04em }
.hw-firm-card h3 { font:500 24px/1.2 var(--font); letter-spacing:-.04em; margin:0 }
.hw-firm-card > p { font:400 12px/1.5 var(--font); color:#7b6d54; margin-top:10px }
.hw-firm-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:30px; padding-top:20px; border-top:1px solid #e7decc }
.hw-firm-bottom span { max-width:75px; font:400 10px/1.4 var(--font); color:#7c7059 }
.hw-firm-bottom strong { font:600 34px/1 var(--font); letter-spacing:-.06em; color:#2b7650 }
.hw-eligibility { display:flex; gap:10px; align-items:center; margin-top:24px; font:500 12px/1.6 var(--font); color:#52654b }
.hw-eligibility p { margin:0 }
.hw-affiliate { font:400 11px/1.7 var(--font); color:#7a6e59; margin:10px 0 0 }
.hw-review { margin-top:20px }
.how-page #nav a[aria-current="page"] { color:#a94d23 }
@media(max-width:1000px) and (min-width:761px) {
 .hw-stop { width:125px }
 .hw-stop h3 { font-size:12px }
 .hw-stop-copy p { font-size:10px }
 .hw-process-grid { gap:45px }
}
@media(max-width:760px) {
 .hw-wrap { width:calc(100% - 40px) }
 #hw-overview { padding-top:28px }
 .hw-heading { align-items:flex-start; gap:25px; flex-direction:column }
 .hw-heading h1 { font-size:32px }
 .hw-total { border:0; border-top:1px solid #ddd3c0; padding:18px 0 0; width:100%; display:flex; align-items:center; justify-content:space-between }
 .hw-total > span { max-width:90px }
 .hw-total > div { margin:0 }
 .hw-total strong { font-size:42px }
 .hw-road { display:none }
 .hw-map { height:auto; margin:28px 0 }
 .hw-map ol { position:relative; display:grid; gap:0 }
 .hw-map ol::before { content:""; position:absolute; top:30px; bottom:30px; left:34px; width:5px; background:linear-gradient(#34805b,#bed1b7); border-radius:5px }
 .hw-stop { position:relative; top:auto; left:auto; transform:none; width:auto; min-height:102px; display:flex; align-items:center; text-align:left; gap:18px }
 .hw-node { margin:0; transform:none; flex:0 0 72px; width:72px; height:72px; border-width:6px; order:-1 }
 .hw-node span { font-size:23px }
 .hw-stop-copy,.hw-stop--low .hw-stop-copy { position:static }
 .hw-stop h3 { font-size:14px }
 .hw-map-footer { flex-direction:column; align-items:flex-start; gap:14px }
 .hw-map-footer p { text-align:left; font-size:11px }
 #hw-process,#hw-firms { padding:48px 0 }
 .hw-process-grid { grid-template-columns:1fr; gap:30px }
 .hw-firm-grid { grid-template-columns:1fr; gap:14px; margin-top:25px }
 .hw-firm-card { padding:22px }
 .hw-firm-top { margin-bottom:20px }
 .hw-firm-bottom { margin-top:22px }
}
@media(prefers-reduced-motion:reduce) { .hw-firm-card { transition:none } .hw-firm-card:hover { transform:none } }
@media(min-width:761px) { .hw-stop:not(.hw-stop--low) .hw-stop-copy { bottom:145px } }
@media(max-width:760px) {
 .hw-stop { min-height:78px }
 .hw-node span { font-size:21px }
 .hw-map { margin:18px 0 }
 .hw-stop-copy p { font-size:10px }
 .hw-heading { gap:18px }
 .hw-heading p { margin-top:10px }
}
.hw-stop:last-child .hw-node span { font-size:23px }
@media(max-width:760px) { .hw-stop:last-child .hw-node span { font-size:18px } }

/* Premium overview: a full, readable route with continuous reward light. */
#hw-overview { padding:30px 0; background:radial-gradient(ellipse at 0% 20%,#e9efdf80,transparent 45%),radial-gradient(ellipse at 95% 80%,#efe2c666,transparent 50%),#f6f4ec }
#hw-overview > .hw-wrap { padding:28px 30px 20px; width:min(1180px,calc(100% - 40px)); border:1px solid #d9dfcf; border-radius:28px; background:linear-gradient(135deg,#fffefa,#f5f7ef); box-shadow:0 20px 55px -35px #33593e55; overflow:hidden }
.hw-heading { gap:24px }
.hw-heading h1 { font-size:clamp(28px,2.7vw,38px) }
.hw-heading p { max-width:340px; font-size:13px; margin-top:12px }
.hw-value-panel { display:grid; grid-template-columns:1.5fr 1fr; position:relative; isolation:isolate; overflow:hidden; flex:0 0 435px; border-radius:18px; border:1px solid #3b7957; background:linear-gradient(120deg,#1c553e,#2a7551); box-shadow:0 10px 24px -14px #1c543b80; padding:20px 22px; gap:22px }
.hw-total { min-width:0; padding:0; border:0; position:relative }
.hw-total > span,.hw-cost > span { color:#d5e4cf; font:500 9px/1.4 var(--font); letter-spacing:.09em; text-transform:uppercase }
.hw-total > div { gap:10px; align-items:flex-start; flex-direction:column }
.hw-total strong { font-size:54px; font-weight:700; background:linear-gradient(110deg,#fff 10%,#bcdfa8 40%,#f5e6b8 60%,#fff 85%); background-size:230% 100%; color:#eff5df; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:hw-value-sheen 4s ease-in-out infinite }
.hw-total div span { max-width:none; color:#e0e9d8; font-size:10px }
.hw-cost { border-left:1px solid #d8e5cc40; padding-left:22px; position:relative; display:flex; flex-direction:column; justify-content:center }
.hw-cost strong { font:600 44px/1 var(--font); letter-spacing:-.055em; color:#f1e8c8; margin:9px 0 }
.hw-cost small { font:400 10px/1.4 var(--font); color:#e5e7cf }
.hw-value-aura { position:absolute; z-index:-1; width:90%; height:120%; bottom:-65%; left:0; background:radial-gradient(ellipse,#95ecb780,#5ed19944 40%,transparent 70%); filter:blur(14px); animation:hw-aura 5s ease-in-out infinite }
@keyframes hw-value-sheen { 0%,100% {background-position:0% 50%} 50% {background-position:100% 50%} }
@keyframes hw-aura { 0%,100% {transform:translateX(-15%) rotate(-10deg)} 50% {transform:translateX(40%) rotate(12deg)} }
@keyframes hw-road-travel { to {stroke-dashoffset:-100} }
.hw-road-light { animation:hw-road-travel 7s linear infinite; filter:drop-shadow(0 0 4px #8ed5a5) }
.hw-map { margin-top:8px; height:350px }
.hw-road { height:370px }
.hw-node { background:linear-gradient(135deg,#347d58,#1d553e); border:6px solid #fcfdf6; box-shadow:0 0 0 1px #cad9c3,0 8px 20px -7px #34674550; transition:box-shadow .3s,filter .3s }
.hw-node::after { inset:5px; border-color:#d9efc955 }
.hw-node::before { content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid #569468; opacity:0; animation:hw-node-reward 7s ease-in-out var(--stop-delay) infinite }
@keyframes hw-node-reward { 0%,9%,34%,100% {opacity:0; transform:scale(.96)} 15% {opacity:.55; transform:scale(1)} 28% {opacity:0; transform:scale(1.18)} }
.hw-stop--check .hw-node { background:linear-gradient(135deg,#f4f6e9,#deead3); color:#396243; box-shadow:0 0 0 1px #d0ddc3,0 8px 20px -8px #34674535 }
.hw-stop--check .hw-node::after { border-color:#7b9c6350 }
.hw-stop:last-child .hw-node { background:linear-gradient(130deg,#275e43,#398056); box-shadow:0 0 0 1px #b8c89b,0 8px 24px -6px #34674566 }
.hw-stop:last-child .hw-node span { color:#f1e6bc }
.hw-stop h3 { font-weight:600 }
.hw-map-footer { margin-top:10px; padding-top:16px }
.hw-map-footer > div { gap:12px }
.hw-map-footer > div > span { padding:7px 10px; border:1px solid #d9e3cf; border-radius:30px; background:#f6f9ef; color:#356245 }
.hw-process-list { border:1px solid #e0ddce; border-radius:22px; padding:8px 26px; background:linear-gradient(125deg,#fffefa,#f7f8f0); box-shadow:0 18px 30px -30px #31503d55 }
.hw-process-list li,.hw-process-list li:first-child,.hw-process-list li:last-child { padding-block:21px }
.hw-step-number { color:#3a6b4d; border-color:#cfdbc6; background:#f0f5e9 }
.hw-process-list li:last-child .hw-step-number { background:#2a6c4b; color:#f1efd6; border-color:#2a6c4b }
.hw-firm-card { background:linear-gradient(130deg,#fffefa,#f7f9f0) }
.hw-firm-bottom strong { background:linear-gradient(110deg,#1c523a,#518342,#245e43); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent }
@media(max-width:1000px) and (min-width:761px) {
 .hw-value-panel { flex-basis:350px; gap:14px; padding:18px }
 .hw-total strong { font-size:44px }
 .hw-cost { padding-left:14px }
 #hw-overview > .hw-wrap { padding-inline:22px }
 .hw-heading h1 {font-size:28px}
}
@media(max-width:760px) {
 #hw-overview {padding:16px 0}
 #hw-overview > .hw-wrap {width:calc(100% - 24px); padding:24px 18px 18px; border-radius:22px}
 .hw-heading {gap:22px}
 .hw-heading p {font-size:12px}
 .hw-value-panel {flex-basis:auto; width:100%; padding:18px; gap:18px}
 .hw-total {display:block; width:auto; border:0; padding:0}
 .hw-total > div {margin-top:10px; gap:8px}
 .hw-total > span {max-width:none}
 .hw-total strong {font-size:45px}
 .hw-cost {padding-left:18px}
 .hw-cost strong {font-size:39px}
 .hw-map {height:auto; margin:24px 0 16px}
 .hw-map-footer {margin-top:0}
 .hw-map-footer > div {gap:6px; flex-wrap:wrap}
 .hw-map-footer > div > span {font-size:10px; padding:6px 8px}
 .hw-process-list {padding:0 18px}
 .hw-process-list li {gap:16px}
}
@media(prefers-reduced-motion:reduce) {
 .hw-total strong,.hw-value-aura,.hw-road-light,.hw-node::before {animation:none}
}
@media(min-width:761px) { .hw-map { height:376px } }

/* Keep reward figures comfortably inside the inset ring. */
.hw-node span { font-size:25px; letter-spacing:-.035em }
.hw-stop:last-child .hw-node span { font-size:23px }
@media(max-width:760px) { .hw-node span { font-size:22px } .hw-stop:last-child .hw-node span { font-size:20px } }