/* Product-specific art and typography share the same compact preference flow. */
@font-face{font-family:'Preference Space';src:url('/preference-assets/space-grotesk-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
:root[data-brand=shvl]{--canvas:#f8f6ef;--ink:#203e40;--muted:#516361;--rule:#ccd1c8;--field:#fffdf7;--action:#203e40;--heading:'SHVL Inter',sans-serif}
:root[data-brand=tenderlead]{--canvas:#f5f3e9;--ink:#182a25;--muted:#4c5b51;--rule:#cbd1c5;--field:#fcfbf5;--action:#3d7953;--heading:'Preference Space',sans-serif}
:root[data-brand=fleetkeep]{--canvas:#fecf02;--ink:#20282e;--muted:#394147;--rule:#a88d1c;--field:#fff;--action:#20282e;--action-ink:#fff;--heading:'SHVL Inter',sans-serif}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]){font-family:'SHVL Inter',Arial,sans-serif}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) body{min-height:100svh;display:flex;flex-direction:column;overflow-x:clip}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 64px;border:0}
:root[data-brand=shvl] #brand-home{font:900 28px/1 'SHVL Inter',sans-serif;letter-spacing:-.03em}
:root[data-brand=tenderlead] #brand-home{font:600 22px/1.2 'Preference Space',sans-serif;letter-spacing:-.015em}
:root[data-brand=fleetkeep] .preference-wordmark{display:block;width:100px;height:76px;object-fit:contain}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) #preference-home{font:400 13px/1.4 'SHVL Inter',sans-serif;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) main{width:100%;max-width:none;margin:40px 0 0;flex:1;display:flex;flex-direction:column;text-align:center}
:root[data-brand=fleetkeep] main{margin-top:8px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) main>.mark{display:none}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) #preference,:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) #success{width:min(calc(100% - 48px),560px);margin-inline:auto}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) h1{font-family:var(--heading);font-size:clamp(36px,4.5vw,48px);font-weight:600;line-height:1.1;letter-spacing:-.045em;margin:0;text-wrap:balance}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) #preference-summary{max-width:46ch;margin:18px auto 28px;font-size:16px;line-height:1.7}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) #unsubscribe-form{width:min(100%,380px);margin-inline:auto;text-align:left}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) input[type=email]{padding:7px 12px;font:400 14px/20px 'SHVL Inter',sans-serif;min-height:36px;border-radius:6px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) .hint{font-size:13px;margin-bottom:20px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) .scope{font-size:13px;margin:20px 0}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) #verification{display:flex;justify-content:center;margin-block:16px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) button{display:block;margin:4px auto 0;font:500 14px/22px 'SHVL Inter',sans-serif;padding:7px 16px;min-height:36px;width:auto;border-radius:6px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) main::after{content:"";order:1;flex:1;min-height:300px;margin-top:4px;background-image:linear-gradient(180deg,var(--canvas),transparent 42%),linear-gradient(0deg,var(--canvas),transparent 24%),var(--preference-art);background-size:100% 100%,100% 100%,cover;background-position:center,center,center 60%}
:root:is([data-brand=shvl],[data-brand=tenderlead]) main::after{opacity:.88;background-image:linear-gradient(180deg,var(--canvas),transparent 52%),linear-gradient(0deg,var(--canvas),transparent 30%),var(--preference-art)}
:root[data-brand=shvl]{--preference-art:url('/preference-assets/shvl-lake.avif')}
:root[data-brand=tenderlead]{--preference-art:url('/preference-assets/tenderlead-river.avif')}
:root[data-brand=fleetkeep] main::after{background-image:url('/preference-assets/fleetkeep-vehicles.webp');background-size:auto min(100%,330px);background-repeat:no-repeat;background-position:center bottom;min-height:300px;margin-top:20px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) footer{order:2;justify-content:center;gap:12px 24px;border:0;margin:0;padding:20px 24px 28px;font-size:11px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) :is(a,button,input):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) #success h1:focus{outline:none}
@media(max-width:760px){
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) header{padding:20px 24px 8px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) h1{font-size:36px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) #preference-home{font-size:12px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) main::after{min-height:280px}
:root[data-brand=fleetkeep] main::after{background-size:calc(100% - 32px) auto;min-height:180px}
:root[data-brand=fleetkeep] .preference-wordmark{width:76px;height:58px}
}
@media(max-width:760px),(pointer:coarse){
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) input[type=email]{min-height:44px;padding-block:9px;font-size:16px;line-height:24px}
:root:is([data-brand=shvl],[data-brand=tenderlead],[data-brand=fleetkeep]) button{min-height:44px;padding-block:10px;font-size:15px}
}
