/* Homepage v5 sections (home_v5.py): light/dark rhythm, line art, chips, panels, grid. */
.h5{position:relative;padding:clamp(80px,9vw,140px) 0;font-family:Geist,Inter,system-ui,sans-serif}
.h5-in{width:var(--shell,min(1680px,calc(100vw - 64px)));margin:0 auto}
.h5-light{background:#f3f2ee;color:#121513}
.h5-dark{background:#0c0d10;color:#eef1ee}
.h5-eyebrow{display:block;font:500 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#2f7a55;margin-bottom:18px}
.h5-dark .h5-eyebrow{color:#3fae7a}
.h5 h2{margin:0;font-size:clamp(34px,4.2vw,60px);line-height:1.05;letter-spacing:-.035em;font-weight:400;max-width:18ch}
.h5 h2 em{font-style:normal;color:#2f7a55}
.h5-dark h2 em{color:#3fae7a}
.h5-head{display:grid;gap:0;margin-bottom:56px}
.h5-head p{margin:22px 0 0;max-width:56ch;font-size:17px;line-height:1.65;color:#4a524d}
.h5-center{justify-items:center;text-align:center}.h5-center h2{max-width:22ch}
.h5-btn{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:28px;padding:13px 22px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer}
.h5-btn-dark{background:#121513;color:#fff;border:1px solid #121513}
.h5-btn-dark:hover{background:#2f7a55;border-color:#2f7a55}
/* Chips */
.h5-sellable .h5-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(40px,6vw,110px);align-items:start}
.h5-sellable .h5-head{position:sticky;top:110px;margin:0}
.h5-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
.h5-group h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.h5-gico{color:#2f7a55}
.h5-chips{display:flex;flex-wrap:wrap;gap:8px}
.h5-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #d9dbd4;border-radius:4px;background:#fbfaf7;font-size:13.5px;color:#262b28}
.h5-check{color:#2f7a55}
/* Panels */
.h5-panels{display:flex;gap:0;height:clamp(420px,42vw,560px);border-radius:14px;overflow:hidden;border:1px solid #ffffff1a}
.h5-panel{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;color:inherit;text-decoration:none;background:#0f1214;
 border-right:1px solid #ffffff1a;transition:flex .5s cubic-bezier(.2,.8,.2,1)}
.h5-panel:last-child{border-right:0}
.h5-panels:hover .h5-panel{flex:.8}.h5-panels .h5-panel:hover{flex:1.6}
.h5-art{position:absolute;inset:0;opacity:.85;transition:opacity .4s}
.h5-art svg{width:100%;height:100%;display:block}
.h5-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#0c0d10f0 85%)}
.h5-panel-copy{position:relative;z-index:1;padding:clamp(22px,2.4vw,36px);max-width:440px}
.h5-panel h3{margin:0 0 10px;font-size:clamp(24px,2.2vw,32px);font-weight:400;letter-spacing:-.02em}
.h5-panel p{margin:0;color:#b9c2bd;font-size:15px;line-height:1.55;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s,opacity .4s}
.h5-panel:hover p,.h5-panel:focus-visible p{max-height:120px;opacity:1}
.h5-go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#3fae7a;font-size:14px}
.h5-arrow{transition:transform .2s}.h5-panel:hover .h5-arrow{transform:translateX(4px)}
/* Handled grid */
.h5-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start;margin-bottom:64px}
.h5-lede{margin:0;font-size:17px;line-height:1.7;color:#4a524d;max-width:58ch;padding-top:34px}
.h5-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #d9dbd4;background:#fbfaf7}
.h5-cell{display:flex;gap:18px;padding:clamp(22px,2.6vw,36px);border-bottom:1px solid #d9dbd4}
.h5-cell:nth-child(odd){border-right:1px solid #d9dbd4}
.h5-cell:nth-last-child(-n+2){border-bottom:0}
.h5-ccheck{color:#2f7a55;margin-top:4px;flex:0 0 auto}
.h5-cell h3{margin:0 0 6px;font-size:clamp(19px,1.6vw,24px);font-weight:400;letter-spacing:-.015em}
.h5-cell p{margin:0;color:#59615c;font-size:14.5px;line-height:1.6}
@media(max-width:900px){
 .h5-sellable .h5-in,.h5-split{grid-template-columns:minmax(0,1fr)}
 .h5-sellable .h5-head{position:static;margin-bottom:24px}
 .h5-panels{flex-direction:column;height:auto}
 .h5-panel{min-height:260px;border-right:0;border-bottom:1px solid #ffffff1a}
 .h5-panels:hover .h5-panel,.h5-panels .h5-panel:hover{flex:1}
 .h5-panel p{max-height:none;opacity:1}
 .h5-lede{padding-top:0}
}
@media(max-width:600px){
 .h5-groups,.h5-grid{grid-template-columns:minmax(0,1fr)}
 .h5-cell:nth-child(odd){border-right:0}.h5-cell:nth-last-child(-n+2){border-bottom:1px solid #d9dbd4}.h5-cell:last-child{border-bottom:0}
}
/* Full-bleed when used inside an inner page's main column */
.h5-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:clamp(64px,8vw,120px)}
.h5-bleed + .h5-bleed{margin-top:0}
.h5-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.h5-grid-5 .h5-cell{flex-direction:column;gap:14px;border-right:1px solid #d9dbd4!important;border-bottom:0!important}
.h5-grid-5 .h5-cell:last-child{border-right:0!important}
.h5-num{font:500 12px 'Geist Mono',ui-monospace,monospace;color:#2f7a55;letter-spacing:.06em}
@media(max-width:1000px){.h5-grid-5{grid-template-columns:minmax(0,1fr)}.h5-grid-5 .h5-cell{border-right:0!important;border-bottom:1px solid #d9dbd4!important}.h5-grid-5 .h5-cell:last-child{border-bottom:0!important}}
/* Homepage estimate email form: stack input and button on phones instead of wrapping inside a pill */
@media(max-width:600px){
 form:has(> input[placeholder="you@company.com"]){flex-direction:column;border-radius:20px!important;padding:6px!important;gap:6px!important}
 form:has(> input[placeholder="you@company.com"]) > input{min-width:0!important;width:100%;padding:12px 14px!important}
 form:has(> input[placeholder="you@company.com"]) > span{display:flex!important;width:100%}
 form:has(> input[placeholder="you@company.com"]) > span > a{flex:1;justify-content:center;padding:13px 20px!important}
}
/* Homepage tool picker: keep long names such as Monday.com inside their tile */
button:has(> span > img[data-brand]){gap:8px!important;padding-left:10px!important;padding-right:10px!important}
button:has(> span > img[data-brand]) > span:nth-child(2){letter-spacing:-.01em;overflow-wrap:anywhere}