/* Home proposal: color rhythm + a working piece in each "Start with what brings you here" path.
   Section surfaces only; existing components keep their own styling. */

/* ---------- Color rhythm ----------
   hero (unchanged) / router: white reading section with tool panels on tint /
   journey: tint (it is a tool) / Gwinnett: navy (the one big idea) / closing CTA: tint */
.s .home-details{background:var(--tint);padding-top:56px;border-top:1px solid var(--rule)}
.s .home-details .home-disclosure:first-child{border-top-color:#C9CDD2}
.s .home-details .home-disclosure{border-bottom-color:#C9CDD2}
.s .home-details .jr{background:#fff}

/* ---------- Tool panels inside each path ---------- */
.hp-tool{margin:0 32px 22px;padding:22px 22px 20px;background:var(--tint);border-top:2px solid var(--gold);display:flex;flex-direction:column;gap:14px;min-width:0}
.hp-tool>.lab{font-size:11px}
.hp-tool .fine{font-size:12.5px}
.hp-go{align-self:flex-start;font-size:15px}

/* payment: reuses site.js payment math through .pb[data-pay]; undo the full builder's layout */
.s .router .hp-pay.pb{display:flex;grid-template-columns:none;border:0;border-top:2px solid var(--gold);background:var(--tint);margin-top:0}
.hp-pay .pb input[type=range],.hp-pay input[type=range]{margin-top:6px;height:26px}
.hp-pay .pb-row label{font-size:11px}
.hp-pay .pb-row label output{font-size:17px}
.hp-pay-out{background:var(--navy);color:#fff;padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px}
.hp-big{font-family:'Source Serif 4',Georgia,serif;font-size:44px;line-height:1;letter-spacing:-.02em}
.hp-big small{font-family:Archivo,sans-serif;font-size:15px;color:var(--mist);margin-left:6px;letter-spacing:0}
.hp-pay .pb-bar{height:12px}
.hp-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:#DEE0E4}
.hp-leg i{display:inline-block;width:9px;height:9px;margin-right:6px}
.hp-leg b{color:#fff;font-weight:600;margin-left:4px}

/* commercial sentence builder: same data and script as /commercial, compact chips */
.hp-line{font-size:23px;line-height:1.4;color:var(--navy)}
.hp-bl{border-bottom:3px solid var(--gold);padding:0 2px}
.hp-bl span{display:inline}
.hp-ch{display:grid;gap:14px}
.hp-ch>div{display:flex;flex-wrap:wrap;gap:7px}
.hp-chl{width:100%;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.hp-chp{appearance:none;font:600 13.5px Archivo,sans-serif;color:var(--navy);background:#fff;border:1.5px solid var(--rule);border-radius:999px;padding:7px 12px;cursor:pointer;min-height:40px;transition:border-color .2s,background .2s}
.hp-chp:hover{border-color:var(--navy)}
.hp-chp[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.hp-chp:focus-visible,.hp-opts a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.s .router .hp-res{display:block;background:var(--navy);color:#fff;padding:16px 16px 18px;border:0;grid-template-columns:none}
.hp-res .hp-k{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.s .router .hp-res h3.hp-n{font-size:22px;margin-top:8px;line-height:1.2}
.hp-res p{color:#DEE0E4;font-size:14.5px;margin-top:8px;line-height:1.5}
.hp-res .hp-docs b{color:#fff;font-weight:600}
.cpk-res.flash .hp-n{animation:jrIn .45s cubic-bezier(.2,.8,.2,1)}

/* VA first question: same wording and answers as the finder on /va */
.hp-step{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.s .router .hp-q{font-size:22px;line-height:1.25;margin-top:-6px}
.hp-opts{display:grid;gap:8px}
.s .router .hp-opts a{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:10px 16px;background:#fff;border:1.5px solid var(--rule);font:600 15px/1.35 Archivo,sans-serif;color:var(--navy);text-decoration:none;transition:border-color .2s,background .2s}
.s .router .hp-opts a:hover{border-color:var(--navy);background:#fff}
.hp-opts a .ic{color:var(--gold)}
.s .router .hp-opts a+a{border-left:1.5px solid var(--rule)}
.s .router .hp-opts a:hover+a{border-left-color:var(--rule)}

@media (min-width:901px) and (max-width:1240px){.hp-tool{margin:0 22px 20px;padding:18px}}
@media (max-width:900px){
  .hp-tool{margin:0 4px 20px;padding:20px 16px 18px}
  .s .home-details{padding-top:40px}
}
@media (prefers-reduced-motion:reduce){.cpk-res.flash .hp-n,.hp-pay .pb-bar span{animation:none;transition:none}}
/* the router's own `.router a` card styling must not reach links inside the tools */
.s .router .hp-tool a.hp-go{display:inline-flex;flex-direction:row;gap:8px;padding:0 0 3px;border:0;border-bottom:1.5px solid var(--gold);flex:none;background:none}
.s .router .hp-tool a.hp-go:hover{background:none;border-bottom-color:var(--navy)}
@media (min-width:901px){
  .s .router .rc>a.rc-main{flex:none}
  .s .router .rc>.home-shortcuts{margin-top:auto}
}