/* The closing block on every page (8 Oct 2026, owner: one unified form): the blue panel on the left half, the demo form on a grey tile on the right half. Moved here from customer-portal.html. */
/* closing section: demo request form with a human check */
.cl-copy p{max-width:44ch}
.cl-pts{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cl-pts li{position:relative;padding-left:28px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.45}
.cl-pts li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.cl-cal{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}
.cl-cal:hover{text-decoration-color:#fff}
.cl-cal .ic{width:16px;height:16px}
.cl-form{background:#fff;color:var(--ink);border-radius:20px;padding:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.cl-in,.cl-done{display:flex;flex-direction:column;gap:16px}
.cl-form h3{margin:0;font:600 22px/1.25 var(--display);letter-spacing:-.01em}
.cl-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cl-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.cl-f>span{font:500 13px/1.3 var(--body);color:var(--ink2)}
.cl-f>span i{font-style:normal;color:var(--ink3);font-weight:400;margin-left:4px}
.cl-f input,.cl-f select,.cl-f textarea{width:100%;font:400 15px/1.4 var(--body);color:var(--ink);background:#fff;border:1px solid rgba(17,17,17,.18);border-radius:10px;padding:10px 12px;min-height:44px;transition:border-color .2s,box-shadow .2s}
.cl-f textarea{resize:vertical;min-height:84px}
.cl-f input::placeholder,.cl-f textarea::placeholder{color:#A0A0A6}
.cl-f select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2355555A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/16px no-repeat;padding-right:36px}
.cl-f select:invalid{color:#A0A0A6}
.cl-f input:focus,.cl-f select:focus,.cl-f textarea:focus{outline:none;border-color:var(--glu);box-shadow:0 0 0 3px rgba(43,143,217,.18)}
.cl-f.bad input,.cl-f.bad select{border-color:#D92D20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.cl-human{display:flex;align-items:center;gap:14px;background:#F7F7F8;border:1px solid rgba(17,17,17,.12);border-radius:10px;padding:14px 14px 14px 16px;min-height:72px}
.cl-human.bad{border-color:#D92D20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.cl-box{position:relative;width:30px;height:30px;flex:none;border:0;padding:0;background:none;cursor:pointer;border-radius:4px}
.cl-box:focus-visible{outline:2px solid var(--glu);outline-offset:3px}
.cl-box .sq{position:absolute;inset:0;border:2px solid #C1C1C6;border-radius:4px;background:#fff;transition:opacity .2s,transform .2s,border-color .2s}
.cl-box:hover .sq{border-color:#8F8F95}
.cl-box .spin{position:absolute;inset:1px;border-radius:50%;border:3px solid rgba(43,143,217,.18);border-top-color:var(--glu);opacity:0;animation:mx-rot .8s linear infinite}
.cl-box .tick{position:absolute;inset:-2px;width:34px;height:34px;color:#1F9D5C;opacity:0;transform:scale(.4);transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.cl-human[data-state=busy] .sq{opacity:0;transform:scale(.6)}
.cl-human[data-state=busy] .spin{opacity:1}
.cl-human[data-state=done] .sq{opacity:0}
.cl-human[data-state=done] .tick{opacity:1;transform:none}
.cl-hl{flex:1;font:500 15px/1.3 var(--body);color:var(--ink)}
.cl-hb{display:flex;flex-direction:column;align-items:center;gap:2px;color:#8F8F95}
.cl-hb svg{width:24px;height:24px}
.cl-hb small{font-size:10px;line-height:1;letter-spacing:.02em}
.close .cl-err{margin:-4px 0 0;font-size:13px;color:#B42318}
.cl-go{align-self:flex-start;border:0;cursor:pointer}
.close .cl-fine{margin:-4px 0 0;font-size:12.5px;color:var(--ink3)}
.cl-done{align-items:flex-start;padding:24px 0}
.cl-done .ok{width:48px;height:48px;border-radius:50%;background:var(--done-t);color:var(--done);display:grid;place-items:center}
.cl-done .ok svg{width:26px;height:26px}
.close .cl-done p{margin:0;color:var(--ink2)}
@keyframes mx-rot{to{transform:rotate(360deg)}}
@media (max-width:559px){.cl-form{padding:20px}.cl-row2{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.cl-box .spin{animation-duration:2s}.cl-box .tick{transition:none}}
.close.has-form{overflow:hidden;overflow:clip}
@media (max-width:767px){.cl-f input,.cl-f select,.cl-f textarea{font-size:16px}}
.cl-hl{cursor:pointer;user-select:none;-webkit-user-select:none}
/* 3. close with a form: the home's blue panel on the left half, the form on a grey tile on the right half */
.close6 .c6f{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1000px){.close6 .c6f{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}}
@media (min-width:1000px){.close6 .c6f .c6{min-height:600px}}
.close6 .c6f .c6{align-items:flex-start;text-align:left;gap:0;padding:clamp(28px,4vw,56px)}
.close6 .c6f .t-h2{font-size:clamp(28px,3.3vw,46px);line-height:1.08;letter-spacing:-.03em;max-width:13em;text-wrap:pretty}
.close6 .c6f .c6m{max-width:30em}
.close6 .cl-pts{margin-top:clamp(28px,3vw,40px);gap:12px}
.close6 .cl-pts li{font-size:16px;line-height:1.4;color:rgba(255,255,255,.92);padding-left:32px}
.close6 .cl-pts li::before{top:1px;width:20px;height:20px;background-color:rgba(255,255,255,.18)}
.close6 .cl-cal{margin-top:auto;padding-top:clamp(32px,4vw,56px);font-size:16px;text-decoration-color:rgba(255,255,255,.5)}
.close6 .cl-cal:focus-visible{outline-color:#fff}
.close6 .cl-form{display:flex;flex-direction:column;background:var(--panel);box-shadow:none;border-radius:24px;padding:clamp(20px,3.2vw,44px)}
.close6 .cl-form h3{margin:0 0 4px;font:500 clamp(22px,2vw,28px)/1.2 var(--display);font-variation-settings:"opsz" 32;letter-spacing:-.02em}
.close6 .cl-f>span{font-size:14px}
.close6 .cl-f input,.close6 .cl-f select,.close6 .cl-f textarea{border-radius:12px;min-height:48px;padding:12px 14px}
.close6 .cl-f select{padding-right:40px}
.close6 .cl-f textarea{min-height:96px}
.close6 .cl-human{background:#fff;border-radius:12px}
.close6 .cl-hb{color:var(--ink2)}
.close6 .cl-hb small{font-size:12px}
.close6 .cl-err{font-size:14px}
.close6 .cl-fine{font-size:13px;color:var(--ink2)}
.close6 .cl-go{margin-top:4px}
.close6 .cl-done{flex:1;justify-content:center;padding:clamp(24px,4vw,56px) 0}
.close6 .cl-done .ok{background:#fff}
.close6 .cl-done p{font-size:16px;line-height:1.5;max-width:28em}
.close.close6.has-form .wrap{display:block}

/* page tone (8 Oct, owner): on the blue panel the second action is a tinted, see-through button */
.close6 .cl-pts{margin-bottom:clamp(28px,4vw,48px)}
.close6 .cl-cal{margin-top:auto;padding:0 18px;min-height:44px;display:inline-flex;align-items:center;gap:8px;border-radius:999px;text-decoration:none;font-weight:500;color:#fff;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);transition:background-color .2s ease-out}
@media (hover:hover){.close6 .cl-cal:hover{background:rgba(255,255,255,.24)}}
/* sweep, 8 Oct: the calendar button is one line high on every page (an older page rule added 45 px above its text on the
   customer portal), with a lighter fill so its text stays above 4.5:1 */
.close.close6 .cl-cal{padding:0 18px!important;min-height:44px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}

/* a field people never see; a filled one marks the request as a bot */
.cl-form .cl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cl-form .cl-go:disabled{opacity:.6;cursor:default}

.close .cl-fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}