/* The kind "hub" (work order 51): the digital products page. From content/digital-new, word for word, without its
   trial colours (the range vl-digital-products does their work) and without the phone ground and glow strength of
   its first screen (the range's phone_wash and phone_glow do that). */
.svc .dh{position:relative;overflow:hidden;background:var(--wash);padding:56px 0 50px}
.svc .dh::before,.svc .dh::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;pointer-events:none}
.svc .dh::before{width:420px;height:420px;background:var(--a);top:-220px;left:-80px}
.svc .dh::after{width:380px;height:380px;background:var(--b);bottom:-240px;right:4%}
.svc .dh .w{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:44px;align-items:center}
.svc .dh .dtag{display:inline-flex;align-items:center;gap:8px;font:800 12.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--ba),var(--bb));border-radius:999px;padding:8px 14px}
.svc .dh .dtag::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:dp 1.6s ease-in-out infinite}
@keyframes dp{50%{opacity:.25}}
.svc .dh h1{font-size:clamp(36px,5.4vw,60px);line-height:1.03;margin:16px 0 16px}
.svc .dh .lead{font-size:18.5px;line-height:1.6;color:var(--mute);margin:0 0 8px;max-width:560px}
.svc .dn{background:#fff;border:1px solid #fff;border-radius:26px;padding:26px;box-shadow:0 30px 70px -40px var(--bb)}
.svc .dn h2{font:800 24px/1.15 var(--disp);margin:0 0 6px}
.svc .dn>p{font-size:15.5px;line-height:1.55;color:var(--mute);margin:0 0 16px}
.svc .dn label.fl{display:block;font:700 14.5px var(--body);margin-bottom:6px}
.svc .dn input[type=email]{width:100%;min-height:52px;font:500 16px var(--body);color:var(--ink);border:1.5px solid #E3CFDA;border-radius:12px;padding:11px 14px;margin-bottom:14px}
.svc .dn input[type=email]:focus{outline:0;border-color:var(--a);box-shadow:0 0 0 4px var(--tint-from)}
.svc .dn .who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.svc .dn .who label{position:relative;cursor:pointer}
.svc .dn .who input{position:absolute;opacity:0;width:1px;height:1px}
.svc .dn .who span{display:block;border:2px solid #E3CFDA;border-radius:14px;padding:12px 14px;font:700 15.5px var(--disp)}
.svc .dn .who small{display:block;font:500 13px/1.35 var(--body);color:var(--mute);margin-top:2px}
.svc .dn .who input:checked+span{border-color:var(--a);background:var(--pick);box-shadow:0 0 0 4px var(--tint-from)}
.svc .dn .who input:focus-visible+span{outline:3px solid var(--a);outline-offset:2px}
.svc .dn .cs{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--mute);margin-bottom:16px;cursor:pointer}
.svc .dn .cs input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--ba)}
.svc .dn .btn{width:100%}
.svc .dn .er{display:none;font-size:13.5px;font-weight:700;color:#B42318;margin:-6px 0 12px}
.svc .dn .bad .er,.svc .dn .er.on{display:block}
.svc .dn .fine{font-size:13px;line-height:1.5;color:var(--mute);margin:12px 0 0}
.svc .dn .ok{text-align:center;padding:14px 0}
.svc .dn .ok .tk{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 12px;border-radius:50%;background:linear-gradient(135deg,var(--ba),var(--bb));color:#fff;font-size:28px;line-height:1}
.svc .d3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.svc .d3 div{background:var(--glass);border:1px solid #fff;border-radius:22px;padding:22px;box-shadow:0 18px 44px -32px var(--b)}
.svc .d3 i{font-style:normal;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--ba),var(--bb));color:#fff;font:800 20px var(--disp);margin-bottom:12px}
.svc .d3 b{display:block;font:700 20px/1.2 var(--disp);margin-bottom:6px}
.svc .d3 span{font-size:15.5px;line-height:1.55;color:var(--mute)}
.svc .df1{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 30px;align-items:center;border-radius:26px;padding:30px;color:#fff;background:linear-gradient(125deg,var(--bold-from),var(--bold-to))}
.svc .df1 small{font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.svc .df1 h2{color:#fff;font-size:clamp(26px,3.4vw,36px);margin:6px 0 8px}
.svc .df1 p{margin:0;font-size:17px;line-height:1.55;max-width:620px;opacity:.97}
.svc .df1 ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.svc .df1 li{background:rgba(255,255,255,.16);border-radius:999px;padding:9px 16px;font:700 14.5px var(--body);white-space:nowrap}
.svc .dw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.svc .dw a{display:block;background:var(--glass);border:1px solid #fff;border-radius:20px;padding:20px;text-decoration:none;color:var(--ink);box-shadow:0 14px 34px -28px var(--b);transition:transform .25s}
.svc .dw a:hover{transform:translateY(-4px)}
.svc .dw b{display:block;font:700 19px var(--disp);margin-bottom:4px}
.svc .dw span{display:block;font-size:15px;line-height:1.5;color:var(--mute)}
.svc .dw em{display:block;font-style:normal;font:700 14.5px var(--body);color:var(--deep);margin-top:10px}
.svc .dw em::after{content:" \2192"}
@media(max-width:900px){.svc .dh .w{grid-template-columns:1fr;gap:26px}.svc .d3,.svc .dw{grid-template-columns:1fr}.svc .df1{grid-template-columns:1fr;padding:24px 20px}.svc .df1 ul{display:flex;flex-wrap:wrap}}
@media(max-width:719px){.svc .dh{padding:30px 0 34px}.svc .dh::before,.svc .dh::after{width:280px;height:280px}.svc .dn{padding:20px 18px}.svc .dh .lead{font-size:17px}}
@media(prefers-reduced-motion:reduce){.svc .dh .dtag::before{animation:none}.svc .dw a{transition:none}}