/* COLERE contact form, channels and footer legal links (legal-1102 patch).
   Loaded after type.css on the three home pages; legal pages load it after reading.css. */

.contact-sheet .notes-line{max-width:560px}

/* form */
.contact-form{margin-top:72px;max-width:640px;display:grid;gap:22px;font-family:var(--sans)}
.contact-form .form-lead{font:var(--fs-b,17px)/1.7 var(--sans);color:var(--ink2,#3a403b);margin:0 0 4px}
.contact-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-form label{display:grid;gap:8px}
.contact-form label>span{font:var(--fs-s,14px)/1.4 var(--sans);color:var(--muted,#686b61);letter-spacing:.01em}
.contact-form label>span em{font-style:normal;margin-left:6px;opacity:.8}
.contact-form input,.contact-form textarea{
  width:100%;box-sizing:border-box;font:var(--fs-b,17px)/1.6 var(--sans);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid #20262259;border-radius:0;padding:8px 0 10px;
  -webkit-appearance:none;appearance:none}
.contact-form textarea{resize:vertical;min-height:132px;border:1px solid #20262259;padding:12px 14px}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--red)}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{box-shadow:0 1px 0 0 var(--red)}
.contact-form .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.contact-form label.consent{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.contact-form label.consent input{width:18px;height:18px;flex:0 0 18px;margin:3px 0 0;padding:0;border:1px solid #20262299;
  -webkit-appearance:auto;appearance:auto;accent-color:var(--red)}
.contact-form label.consent>span{font:var(--fs-s,14px)/1.7 var(--sans);color:var(--ink2,#3a403b);letter-spacing:.02em}
.contact-form .form-note{font:var(--fs-s,14px)/1.7 var(--sans);color:var(--muted,#686b61);margin:0;max-width:34em}
.contact-form .form-note a{border-bottom:1px solid var(--red);padding-bottom:1px}
.contact-form .form-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.contact-form button{
  font:500 var(--fs-s,15px)/1 var(--sans);letter-spacing:.04em;color:var(--paper,#f6f5f0);background:var(--ink);
  border:0;border-radius:0;padding:15px 34px;cursor:pointer}
.contact-form button:hover{background:var(--red)}
.contact-form button:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.contact-form button[disabled]{opacity:.5;cursor:default}
.contact-form .form-status{font:var(--fs-s,14px)/1.6 var(--sans);color:var(--muted,#686b61);margin:0;min-height:1.6em}
.contact-form .form-status[data-state="ok"]{color:var(--ink)}
.contact-form .form-status[data-state="error"]{color:var(--red)}
.contact-form.is-sent label,.contact-form.is-sent .consent,.contact-form.is-sent .form-note,.contact-form.is-sent .field-row{opacity:.45}

/* other channels */
.contact-channels{display:flex;flex-wrap:wrap;gap:40px 56px;margin-top:80px;padding-top:36px;border-top:1px solid #20262222}
.contact-channels figure{margin:0;display:flex;align-items:center;gap:22px}
.contact-channels img,.contact-channels .qr-placeholder{width:124px;height:124px;display:block;background:none;padding:0;box-sizing:border-box}
.contact-channels .qr-placeholder{background:transparent;border:1px dashed #20262259}
.contact-channels figcaption{display:grid;gap:4px;font:var(--fs-s,14px)/1.5 var(--sans);color:var(--muted,#686b61)}
.contact-channels figcaption b{font-weight:500;color:var(--ink)}
.contact-channels figcaption a{color:var(--ink);border-bottom:1px solid var(--red);justify-self:start}

/* footer legal links */
.footer .footer-legal{display:flex;gap:28px}
.footer .footer-legal a:hover{color:var(--red)}

@media(max-width:650px){
  .contact-form{margin-top:56px}
  .contact-form .field-row{grid-template-columns:1fr}
  .contact-channels{margin-top:56px;gap:28px}
  .contact-channels img,.contact-channels .qr-placeholder{width:108px;height:108px}
  .footer .footer-legal{gap:20px}
}

/* privacy pages */
.legal-page h3{font:500 18px/1.5 var(--sans);margin:32px 0 10px}
.legal-page ul{margin:12px 0 0;padding-left:1.2em;max-width:660px}
.legal-page li{font:400 17px/1.85 var(--sans);margin:6px 0}
.legal-page p+p{margin-top:14px}
.legal-page .legal-date{margin-top:52px;font-size:15px;color:var(--muted)}
.legal-page a{border-bottom:1px solid #d2110066}
html[lang^="zh"] .legal-page li,html[lang^="zh"] .legal-page p{letter-spacing:.02em}