/* Contact page content; shared components belong to common.css. */
#main{--page:#b71f2d;--raised:#c72b39;--panel:#141414;--muted:#c7c7c7;color:#fff;background:var(--page);}
#main .hero{position:relative;height:248px;overflow:hidden;}
#main .cover{position:absolute;inset:0;background:#141414 url("../images/faq/background.webp") center / cover no-repeat;}
#main .hero::after{position:absolute;inset:0;content:"";pointer-events:none;background:linear-gradient(180deg, rgba(20, 20, 20, 0.08), rgba(20, 20, 20, 0.2));}
#main .inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:18px var(--site-gutter) 16px;}
#main .breadcrumb{display:flex;align-items:center;gap:9px;color:#e4e4e4;font-size:12px;line-height:19px;}
#main .breadcrumb a, #main .breadcrumb b{color:inherit;font-weight:400;}
#main .breadcrumb a:hover, #main .breadcrumb a:focus-visible{color:#ff8993;text-decoration:underline;text-underline-offset:4px;}
#main .eyebrow{margin-top:7px;color:#e4e4e4;font-size:10px;line-height:17px;font-weight:800;letter-spacing:1.2px;}
#main .hero h1{margin:0;font-size:40px;line-height:50px;font-weight:900;letter-spacing:7px;}
#main .inner > p{margin:0;color:#e4e4e4;font-size:15px;line-height:24px;}
#main .badges{display:flex;align-items:center;gap:36px;margin-top:16px;font-size:12px;}
#main .badges span{display:flex;align-items:center;gap:7px;}
#main img{display:block;object-fit:contain;}
#main .badges img{width:22px;height:22px;}
#main .content{display:grid;grid-template-columns:minmax(0, 1fr) 380px;grid-template-areas:"form channels" "quick quick";align-items:start;gap:32px;width:calc(100% - var(--site-gutter) * 2);margin:0 auto;padding:32px 0 40px;}
#main .channels{grid-area:channels;}
#main .forms{display:contents;}
#main .message{grid-area:form;}
#main .panel, #main .quick{min-width:0;padding:28px;border-radius:16px;background:var(--raised);}
#main .heading > span{color:#f6d9dd;font-size:11px;line-height:18px;font-weight:800;letter-spacing:1px;}
#main .heading h2{margin:0;font-size:24px;line-height:32px;font-weight:900;}
#main .heading p{margin:4px 0 0;color:#f6d9dd;font-size:13px;line-height:22px;}
#main .grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;margin-top:24px;}
#main .grid article{display:grid;grid-template-columns:32px minmax(0, 1fr);align-items:center;gap:10px;min-height:116px;padding:16px 12px;border-radius:16px;background:var(--panel);}
#main .grid img{width:32px;height:32px;}
#main .grid h3, #main .note h3{margin:0;font-size:15px;line-height:23px;font-weight:800;}
#main .grid p, #main .note p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:20px;}
#main .note{display:grid;grid-template-columns:36px minmax(0, 1fr);align-items:start;gap:14px;margin-top:16px;padding:20px 16px;border-radius:16px;background:var(--panel);}
#main .note img{width:36px;height:36px;}
#main .note span{display:block;margin-top:8px;color:var(--muted);font-size:12px;line-height:20px;}
#main form{display:grid;gap:24px;margin-top:24px;}
#main .fields{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px;}
#main form label{display:grid;min-width:0;gap:9px;font-size:14px;line-height:22px;font-weight:700;}
#main input, #main select, #main textarea{min-width:0;width:100%;border:0;border-radius:12px;color:#fff;background:var(--panel);font:inherit;font-weight:400;color-scheme:dark;}
#main input::placeholder, #main textarea::placeholder{color:#b8b8b8;opacity:1;}
#main input:focus-visible, #main select:focus-visible, #main textarea:focus-visible, #main button:focus-visible, #main .quick a:focus-visible{outline:2px solid #fff;outline-offset:3px;}
#main input, #main select{height:50px;padding:0 16px;}
#main select{padding-right:36px;appearance:none;background-image:linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);background-position:calc(100% - 20px) 23px, calc(100% - 15px) 23px;background-repeat:no-repeat;background-size:5px 5px;}
#main .count{position:relative;display:block;}
#main textarea{display:block;height:140px;padding:14px 16px 30px;resize:vertical;}
#main .count > em{position:absolute;right:16px;bottom:10px;color:var(--muted);font-size:11px;font-style:normal;font-weight:400;}
#main .count b{font-weight:400;}
#main .upload > span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:100px;padding:18px;border-radius:12px;background:var(--panel);text-align:center;transition:color 0.2s ease, background-color 0.2s ease;}
#main .upload input{position:absolute;inset:0;height:100%;opacity:0;cursor:pointer;}
#main .upload b{max-width:100%;overflow-wrap:anywhere;font-size:13px;}
#main .upload em{color:inherit;opacity:0.78;font-size:12px;font-style:normal;font-weight:400;}
#main .upload > span:hover, #main .upload > span:focus-within{color:#141414;background:#fff;}
#main .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;}
#main .actions .consent{display:flex;align-items:center;gap:9px;margin-right:auto;cursor:pointer;}
#main .consent input{flex:0 0 18px;width:18px;height:18px;margin:0;padding:0;accent-color:#141414;cursor:pointer;}
#main .consent a{margin-left:4px;color:#fff;text-decoration:underline;text-underline-offset:4px;}
#main .consent a:hover, #main .consent a:focus-visible{color:#141414;}
#main .actions > p{margin:0;color:#f6d9dd;font-size:12px;}
#main .actions > div{display:flex;gap:12px;}
#main button{display:inline-flex;align-items:center;justify-content:center;min-width:108px;min-height:50px;padding:12px 20px;border:0;border-radius:12px;color:#fff;background:var(--panel);font:inherit;font-size:14px;line-height:22px;font-weight:700;cursor:pointer;transition:color 0.2s ease, background-color 0.2s ease;}
#main button:hover, #main button:focus-visible, #main button.submit{color:#141414;background:#fff;}
#main button.submit:hover, #main button.submit:focus-visible{color:#fff;background:var(--panel);}
#main .status{margin:0;color:#fff;font-size:13px;line-height:22px;}
#main .status:empty{display:none;}
#main .quick{grid-area:quick;display:grid;grid-template-columns:160px repeat(4, minmax(0, 1fr));align-items:center;gap:20px;}
#main .quick .heading h2{font-size:23px;line-height:31px;}
#main .quick a{display:flex;align-items:center;gap:12px;min-width:0;min-height:92px;padding:18px;border-radius:16px;color:#fff;background:var(--panel);transition:color 0.2s ease, background-color 0.2s ease;}
#main .quick img{flex:0 0 36px;width:36px;height:36px;}
#main .quick a span{display:grid;min-width:0;gap:5px;}
#main .quick b{font-size:15px;line-height:22px;}
#main .quick em{color:inherit;opacity:0.78;font-size:12px;line-height:19px;font-style:normal;}
#main .quick a:hover, #main .quick a:focus-visible{color:#141414;background:#fff;}
#main .quick a:hover img, #main .quick a:focus-visible img{filter:brightness(0);}
@media (max-width: 1100px){
#main .content{grid-template-columns:minmax(0, 1fr) 340px;gap:24px;}
#main .panel, #main .quick{padding:24px 20px;}
#main .grid article{grid-template-columns:28px minmax(0, 1fr);gap:8px;padding:14px 10px;}
#main .grid img{width:28px;height:28px;}
#main .quick{grid-template-columns:repeat(2, minmax(0, 1fr));}
#main .quick .heading{grid-column:1 / -1;}
}
@media (max-width: 820px){
#main .content{grid-template-columns:minmax(0, 1fr);grid-template-areas:"channels" "form" "quick";}
}
@media (max-width: 720px){
#main .hero{height:235px;}
#main .inner{padding:14px var(--site-gutter) 12px;}
#main .breadcrumb{gap:6px;font-size:10px;}
#main .eyebrow{margin-top:5px;font-size:9px;}
#main .hero h1{font-size:31px;line-height:41px;letter-spacing:4px;}
#main .inner > p{font-size:13px;}
#main .badges{justify-content:center;gap:20px;width:100%;margin-top:17px;font-size:10px;}
#main .badges span{gap:4px;}
#main .badges img{width:20px;height:20px;}
#main .content{padding:24px 0 28px;}
#main .panel, #main .quick{padding:20px 16px;}
#main .heading h2{font-size:21px;line-height:29px;}
#main .heading p{font-size:12px;line-height:20px;}
#main .grid{margin-top:20px;}
#main .grid article{grid-template-columns:1fr;justify-items:center;gap:10px;min-height:140px;padding:18px 10px;text-align:center;}
#main .grid img{width:44px;height:44px;}
#main .fields{grid-template-columns:1fr;}
#main form{margin-top:20px;gap:20px;}
#main input, #main select, #main textarea{font-size:16px;}
#main .actions{flex-direction:column;align-items:stretch;gap:14px;}
#main .actions > div{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));}
#main button{min-width:0;}
#main .quick{gap:12px;}
#main .quick .heading{margin-bottom:8px;}
#main .quick .heading h2{font-size:21px;line-height:29px;}
#main .quick a{gap:9px;min-height:92px;padding:14px 10px;}
#main .quick img{flex-basis:28px;width:28px;height:28px;}
#main .quick b{font-size:13px;line-height:20px;}
#main .quick em{font-size:11px;line-height:18px;}
}