/* OpenPaygents / Humanscaled-adjacent visual system
   Source: BradKhan/humanscaled/brand/art-direction.md, Route A; site/styles.css
   Explicitly scoped to the product surface. No financial functionality changed. */
body.op-product {
 --hs-paper:#f4f1e8; --hs-ink:#1a2925; --hs-forest:#234535;
 --hs-forest-deep:#182e24; --hs-forest-light:#315946; --hs-copper:#c0a488;
 --hs-line:rgba(26,41,37,.18); --hs-muted:#536157;
 --ink:var(--hs-ink); --muted:var(--hs-muted); --accent:var(--hs-forest);
 margin:0; background:var(--hs-paper); color:var(--hs-ink);
 font-family:"Manrope", "Helvetica Neue", Arial, sans-serif;
 -webkit-font-smoothing:antialiased;
}
.op-product a { color:inherit; text-decoration:none }
.op-product a:focus-visible {outline:3px solid #a87736;outline-offset:4px}
.op-product::selection {background:#bdc8b1;color:#1a2925}
.op-product .skip-link {position:fixed;left:12px;top:-100px;background:#fff;padding:12px;z-index:40}
.op-product .skip-link:focus {top:12px}
.op-product em {font-style:italic;font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.063em}
.hs-header {width:100%;max-width:1600px;min-height:92px;padding:21px clamp(24px,4.4vw,76px);margin-inline:auto;display:flex;align-items:center;gap:38px;border-bottom:1px solid var(--hs-line);position:relative;z-index:10}
.hs-logo {display:flex;align-items:center;gap:14px;white-space:nowrap}
.hs-mark {font:italic 35px Georgia,serif;line-height:1;letter-spacing:-4px;min-width:44px;color:var(--hs-forest)}
.hs-mark span,.hs-footer-brand span {color:#a47e4c}
.hs-name {font-size:21px;font-weight:700;letter-spacing:-1px}
.hs-parent {font:700 9px "Manrope",Arial,sans-serif;letter-spacing:1.55px;padding-left:15px;border-left:1px solid #9caa9d;color:#637064}
.hs-nav {margin-left:auto;display:flex;gap:clamp(13px,2.6vw,40px);align-items:center}
.hs-nav a {font-size:12px;font-weight:600;color:#3e5146;transition:color .2s}
.hs-nav a:hover,.hs-header-action:hover {color:#9e713d}
.hs-header-action {border-bottom:1px solid var(--hs-ink);padding:0 0 8px;font-size:12px;font-weight:700;white-space:nowrap}
.hs-header-action span {margin-left:21px}
.hs-hero {padding:0 clamp(24px,4.4vw,76px);max-width:1600px;margin:auto}
.hs-kicker {display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--hs-line);padding:19px 0;font-size:9px;letter-spacing:1.65px;font-weight:700;color:#5d6b60}
.hs-kicker-side {margin-left:auto;color:#7d806e}
.hs-bullet,.hs-mini-dot {width:6px;height:6px;border-radius:50%;background:#78946c;display:inline-block;flex:none}
.hs-hero-layout {display:grid;grid-template-columns:56% 44%;min-height:680px;position:relative;border-bottom:1px solid var(--hs-line)}
.hs-hero-copy {padding:clamp(58px,7.4vw,116px) clamp(26px,5vw,80px) 54px 0;display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:2}
.hs-hero-overline {font-size:14px;color:var(--hs-forest);font-weight:500;line-height:1.6;max-width:30ch;margin:0 0 19px}
.hs-hero h1 {margin:19px 0 29px;max-width:11ch;font-size:clamp(61px,6.7vw,112px);font-weight:500;line-height:.99;letter-spacing:-.089em}
.hs-hero h1 em {color:var(--hs-forest)}
.hs-hero-deck {max-width:575px;font-size:clamp(15px,1.25vw,18px);line-height:1.79;color:#526058;margin:0 0 34px}
.hs-hero-actions {display:flex;gap:31px;align-items:center;flex-wrap:wrap}
.hs-button {display:inline-flex;justify-content:center;align-items:center;gap:40px;background:var(--hs-forest);color:#fff!important;border:1px solid var(--hs-forest);border-radius:100px;min-height:52px;padding:14px 21px 14px 26px;font-size:12px;font-weight:700;white-space:nowrap;transition:background .2s,transform .2s}
.hs-button:hover {background:#345742;transform:translateY(-2px)}
.hs-button span {font-size:15px}
.hs-text-link {display:inline-flex;gap:24px;align-items:center;border-bottom:1px solid var(--hs-ink);padding:10px 0 8px;font-size:12px;font-weight:700;white-space:nowrap}
.hs-text-link:hover {color:#986b38;border-bottom-color:currentColor}
.hs-availability {font-size:11px;line-height:1.6;display:flex;align-items:center;gap:9px;margin:auto 0 0;color:#6a766d;padding-top:35px}
.hs-hero-art {position:relative;min-height:660px;overflow:hidden;background:radial-gradient(ellipse at 60% 34%,#fcf6e9 0,#e9e8da 51%,#d5d8c6 100%);border-left:1px solid var(--hs-line)}
.hs-hero-art:before {content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;background-image:repeating-linear-gradient(0deg,transparent,transparent 4px,#233e2e06 5px),linear-gradient(90deg,#f4f1e852,transparent 20%,transparent 90%)}
.hs-structure {position:absolute;inset:-6% -18% -6% -15%;width:130%;height:111%;object-fit:cover;filter:drop-shadow(8px 20px 30px #22352a22)}
.hs-art-credit {position:absolute;bottom:20px;left:24px;right:24px;display:flex;justify-content:space-between;z-index:4;font-size:8px;letter-spacing:1.5px;font-weight:700;color:#415548;text-shadow:0 1px 2px #f6f2e8}
.hs-hero-footer {display:flex;justify-content:space-between;padding:18px 0 31px;font-size:9px;color:#728076;letter-spacing:1.45px;font-weight:700}
.hs-section {display:grid;grid-template-columns:22% minmax(0,1fr);padding:108px clamp(24px,4.4vw,76px) 114px;max-width:1600px;margin:auto;border-bottom:1px solid var(--hs-line)}
.hs-side-label {font-size:10px;font-weight:700;letter-spacing:1.4px;color:#596d5e;padding-top:10px}
.hs-section-body {min-width:0}
.hs-section-intro {display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,.72fr);gap:clamp(36px,5vw,98px);align-items:end;margin-bottom:64px}
.hs-section h2 {font-size:clamp(40px,5vw,78px);line-height:1.04;letter-spacing:-.072em;font-weight:500;margin:0}
.hs-section-intro>p,.hs-purpose-grid>div>p {font-size:15px;color:#556358;line-height:1.88;margin:0;max-width:52ch}
.hs-capabilities {border-top:1px solid var(--hs-line)}
.hs-capabilities article {display:grid;grid-template-columns:74px 1fr minmax(120px,.23fr);gap:28px;align-items:start;padding:28px 0;border-bottom:1px solid var(--hs-line)}
.hs-capability-icon {display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#e1e5d8;color:#3d5a44;font:400 33px Georgia,serif}
.hs-capabilities h3 {font:400 clamp(27px,3vw,42px) Georgia,serif;letter-spacing:-1.3px;line-height:1.2;margin:0 0 12px}
.hs-capabilities p {font-size:13px;line-height:1.77;color:#57675b;max-width:56ch;margin:0}
.hs-capability-status {justify-self:end;text-align:right;font-size:9px;line-height:1.7;font-weight:700;letter-spacing:.6px;color:#798475;padding-top:9px}
.hs-quote {margin-top:64px;background:#e6e7db;border-radius:16px;padding:29px 34px 34px;position:relative}
.hs-quote>span {font-size:9px;letter-spacing:1.5px;font-weight:700;color:#657767}
.hs-quote p {font:400 clamp(24px,2.6vw,38px) Georgia,serif;letter-spacing:-.7px;line-height:1.3;max-width:750px;margin:19px 0 17px}
.hs-quote small {font-size:11px;line-height:1.7;color:#677568}
.hs-purpose {max-width:none;background:var(--hs-forest-deep);color:var(--hs-paper);border:0;grid-template-columns:minmax(12%,1fr) minmax(0,1120px) minmax(12%,1fr);padding:106px 4.4vw 100px}
.hs-purpose>.hs-side-label {color:#b7c8b4}
.hs-purpose>.hs-section-body {grid-column:2}
.hs-purpose-grid {display:grid;grid-template-columns:1fr .75fr;gap:70px;padding:0 0 50px;border-bottom:1px solid #83998a55}
.hs-purpose-grid h2 {font-size:clamp(44px,4.5vw,73px)}
.hs-purpose-grid>div>p {color:#bfcdbf;font-size:15px;line-height:1.92;margin:0 0 16px}
.hs-purpose-grid>div>p:last-child {margin-bottom:0}
.hs-industries {display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px;margin:33px 0 18px}
.hs-industry {display:grid;grid-template-columns:160px 1fr;gap:19px;align-items:center;padding:27px 0;border-bottom:1px solid #83998a4b}
.hs-industry span {font-size:10px;font-weight:700;letter-spacing:.7px;color:#a7b7a6}
.hs-industry strong {font-size:16px;font-weight:500;line-height:1.5;color:#f3f1e6}
.hs-purpose-footnote {font-size:11px;color:#aebead;line-height:1.9;margin:28px 0 0;max-width:80ch}
.hs-engineering {padding-top:114px;padding-bottom:116px}
.hs-stack {border:1px solid #c5cbc0;border-radius:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;background:#e7e8db}
.hs-stack>div {padding:28px 23px 34px;min-height:145px;border-right:1px solid #c5cbc0;position:relative}
.hs-stack>div:last-child {border:0}
.hs-stack>div:not(:last-child):after {content:"›";position:absolute;right:-7px;top:53px;z-index:2;background:#e7e8db;color:#947857;font:26px Georgia}
.hs-stack span {display:block;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#687a6c;margin-bottom:23px}
.hs-stack strong {font-size:16px;letter-spacing:-.4px;font-weight:600;line-height:1.55}
.hs-engineering-foot {display:grid;grid-template-columns:1fr 1fr;gap:66px;padding:47px 0 12px}
.hs-engineering-foot h3 {font:400 28px Georgia,serif;letter-spacing:-1px;margin:0 0 10px}
.hs-engineering-foot p {font-size:13px;line-height:1.85;color:#536359;max-width:56ch;margin:0}
.hs-engineering-link {margin-top:23px}
.hs-final {background:#1a2e24;color:#f4f1e8;padding:42px clamp(24px,4.4vw,76px) 100px}
.hs-final-top {display:flex;justify-content:space-between;border-bottom:1px solid #51695a;max-width:1448px;margin:auto;padding-bottom:24px;font-size:10px;letter-spacing:1.5px;color:#b2c6b4}
.hs-final-grid {display:grid;grid-template-columns:1.5fr 1fr;gap:90px;align-items:end;padding-top:73px;max-width:1448px;margin:auto}
.hs-final h2 {font-size:clamp(48px,6vw,88px);line-height:.98;letter-spacing:-.075em;font-weight:500;margin:0}
.hs-final p {font-size:15px;line-height:1.85;color:#b8c9bc;max-width:560px;margin:29px 0 0}
.hs-final-actions {display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding-bottom:12px}
.hs-button-light {color:#192e22!important;background:#f3f1e6;border-color:#f3f1e6}
.hs-button-light:hover {background:#d7dfd0}
.hs-text-light {color:#e7eadd!important;border-bottom-color:#a9b9ac!important}
.hs-footer {display:flex;align-items:center;gap:25px;justify-content:space-between;padding:29px clamp(24px,4.4vw,76px) 40px;background:#f4f1e8;font-size:11px;color:#5b695f}
.hs-footer-brand {font-size:23px;font-weight:700;letter-spacing:-1px;color:#1a2925!important}
.hs-footer-brand span {color:#a47e4c}
.hs-footer a:not(.hs-footer-brand) {border-bottom:1px solid #89978a}
@media(max-width:1150px){
 .hs-header{gap:19px}.hs-parent{display:none}.hs-nav{gap:17px}
 .hs-hero-layout{grid-template-columns:58% 42%}.hs-hero h1{font-size:clamp(57px,7vw,84px)}
 .hs-hero-art{min-height:610px}.hs-section{grid-template-columns:18% minmax(0,1fr)}
 .hs-purpose{grid-template-columns:1fr}.hs-purpose>.hs-section-body{grid-column:1}
 .hs-purpose>.hs-side-label{margin-bottom:35px}
 .hs-purpose-grid{gap:36px}.hs-industry{grid-template-columns:125px 1fr}
}
@media(max-width:790px){
 .hs-header{flex-wrap:wrap;padding:17px 22px;min-height:0;gap:15px}
 .hs-logo{gap:8px}.hs-mark{font-size:29px;min-width:34px}.hs-name{font-size:19px}.hs-nav{order:3;width:100%;margin:0;justify-content:space-between;border-top:1px solid var(--hs-line);padding-top:14px}.hs-nav a{font-size:11px}
 .hs-header-action{margin-left:auto;font-size:11px}
 .hs-hero{padding:0 22px}.hs-kicker-side{display:none}.hs-kicker{font-size:8px}
 .hs-hero-layout{grid-template-columns:1fr}.hs-hero-copy{padding:68px 0 46px}
 .hs-hero h1{font-size:clamp(61px,10vw,91px);margin-top:17px;max-width:11ch}
 .hs-hero-deck{max-width:600px}.hs-availability{margin-top:35px;padding:0}
 .hs-hero-art{min-height:420px;border-left:0;border-top:1px solid var(--hs-line)}
 .hs-structure{inset:-43% -6% -35% -4%;width:115%;height:180%}
 .hs-section{grid-template-columns:1fr;padding:70px 22px}
 .hs-side-label{margin-bottom:32px}.hs-section-intro{grid-template-columns:1fr;gap:25px;margin-bottom:40px}
 .hs-purpose{padding:70px 22px}.hs-purpose>.hs-side-label{margin-bottom:32px}
 .hs-purpose-grid{grid-template-columns:1fr;gap:24px}.hs-industries{grid-template-columns:1fr}
 .hs-industry{grid-template-columns:132px 1fr}
 .hs-capabilities article{grid-template-columns:57px 1fr;gap:20px}.hs-capability-status{grid-column:2;justify-self:start;padding:0}
 .hs-capability-icon{width:50px;height:50px}.hs-engineering-foot{gap:32px}
 .hs-stack{grid-template-columns:repeat(2,1fr)}.hs-stack>div:nth-child(2){border-right:0}
 .hs-stack>div:nth-child(-n+2){border-bottom:1px solid #c5cbc0}
 .hs-final-grid{grid-template-columns:1fr;gap:35px}.hs-final{padding:33px 22px 75px}
 .hs-final-top{gap:30px;flex-wrap:wrap}.hs-footer{padding:25px 22px 32px;flex-wrap:wrap}
}
@media(max-width:480px){
 .hs-header{padding:14px 16px}.hs-header-action{display:none}
 .hs-nav{gap:10px;overflow-x:auto}.hs-nav a{white-space:nowrap;font-size:10px}
 .hs-hero{padding:0 17px}.hs-hero-copy{padding:55px 0 40px}
 .hs-hero h1{font-size:clamp(47px,12vw,65px);line-height:1.02}
 .hs-hero-deck{font-size:14px;line-height:1.75}.hs-hero-actions{gap:16px}
 .hs-button{min-height:50px;padding:12px 17px 12px 19px;gap:24px}
 .hs-text-link{font-size:11px;gap:13px}
 .hs-hero-art{min-height:310px}.hs-art-credit{font-size:7px;left:12px;right:12px}
 .hs-hero-footer{gap:17px;font-size:8px}
 .hs-section{padding:55px 17px}.hs-purpose{padding:55px 17px}.hs-section h2{font-size:clamp(38px,10vw,53px)}
 .hs-section-intro>p,.hs-purpose-grid>div>p{font-size:13px}
 .hs-capabilities h3{font-size:30px}
 .hs-industry{grid-template-columns:1fr;gap:7px}
 .hs-quote{padding:24px 20px}
 .hs-engineering-foot{grid-template-columns:1fr;gap:31px}
 .hs-stack strong{font-size:13px}.hs-stack>div{padding:19px 15px;min-height:140px}
 .hs-final{padding:30px 17px 64px}.hs-final h2{font-size:clamp(43px,11vw,60px)}
 .hs-footer{gap:12px;padding:24px 17px}
}
@media(prefers-reduced-motion:reduce){.op-product *, .op-product *:before, .op-product *:after{transition:none!important;animation:none!important}}

/* Genuine commissioned Humanscaled-adjacent organic hero asset, optimized WebP. */
.hs-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;display:block}
@media(max-width:790px){.hs-hero-image{object-position:63% 50%}}
@media(max-width:480px){.hs-hero-image{object-position:61% 50%}}