/* The real brand mark and a single confirmation sequence, using only SVG/CSS. */
.ct-feedback {
  width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto;
  padding:32px 34px 24px; border:1px solid var(--rule); border-radius:18px;
  color:var(--fg); background:var(--bg); box-shadow:0 30px 110px #0006;
  overflow:auto; overscroll-behavior:contain; isolation:isolate;
}
.ct-feedback::backdrop { background:rgb(5 6 10 / .68); backdrop-filter:blur(6px); }
.ct-feedback[open] { animation:contact-feedback-in .42s cubic-bezier(.2,.75,.25,1) both; }
.ct-feedback__close {
  position:absolute; top:17px; right:16px; display:grid; place-items:center;
  width:44px; height:44px; padding:12px; border:0; border-radius:50%;
  color:var(--fg-3); background:transparent; cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.ct-feedback__close:hover { background:var(--bg-raised); color:var(--fg); }
.ct-feedback__close svg { width:20px; height:20px; }
.ct-feedback__brand { padding-right:45px; }
.ct-feedback__brand .ct-feedback__logo { display:block; width:170px; max-width:100%; height:auto; color:var(--fg); }
.ct-feedback__signal { display:flex; align-items:center; height:64px; margin:21px 0 20px; }
.ct-feedback__seal { width:64px; height:64px; flex:none; overflow:visible; }
.ct-feedback__rim { stroke:var(--rule-strong); stroke-width:1; }
.ct-feedback__face { fill:var(--bg-raised); stroke:var(--rule); stroke-width:1; }
.ct-feedback__trace { stroke:var(--red); stroke-width:1; stroke-dasharray:1; transform:rotate(-90deg); transform-origin:32px 32px; }
.ct-feedback__check,.ct-feedback__error { stroke:var(--accent-text); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ct-feedback__check { stroke-dasharray:1; }
.ct-feedback__error { display:none; }
.ct-feedback__ripple { stroke:var(--red); stroke-width:1; opacity:0; transform-origin:32px 32px; }
.ct-feedback__route { flex:1; min-width:0; height:64px; margin-left:12px; }
.ct-feedback__guide { stroke:var(--rule); stroke-width:1; vector-effect:non-scaling-stroke; }
.ct-feedback__arrival { stroke:var(--red); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:.16 .84; stroke-dashoffset:-1; opacity:0; }
.ct-feedback[open] .ct-feedback__logo .lg-h { animation:contact-brand-draw .85s .08s ease-out both; stroke-dasharray:250; }
.ct-feedback[open][data-feedback-state="success"] .ct-feedback__arrival { animation:contact-arrival .85s .15s ease-in-out both; }
.ct-feedback[open][data-feedback-state="success"] .ct-feedback__trace { animation:contact-trace .6s .6s ease-out both; }
.ct-feedback[open][data-feedback-state="success"] .ct-feedback__check { animation:contact-trace .42s .95s ease-out both; }
.ct-feedback[open][data-feedback-state="success"] .ct-feedback__ripple { animation:contact-ripple .8s 1.08s ease-out both; }
.ct-feedback[data-feedback-state="error"] .ct-feedback__check,.ct-feedback[data-feedback-state="error"] .ct-feedback__trace { display:none; }
.ct-feedback[data-feedback-state="error"] .ct-feedback__error { display:block; }
.ct-feedback__title { max-width:19ch; margin:0 0 16px; font:600 clamp(28px,5vw,34px)/1.18 var(--font-card); letter-spacing:-.025em; text-wrap:balance; }
.ct-feedback__title:focus { outline:0; }
.ct-feedback__copy { margin:0; color:var(--fg-2); font:400 15px/1.7 var(--font-sans); }
.ct-feedback__attachments { margin:24px 0 0; padding:15px 0 0; border-top:1px solid var(--rule); color:var(--fg-3); font:400 12px/1.6 var(--font-sans); overflow-wrap:anywhere; }
.ct-feedback__attachments .mono { color:var(--fg-2); }
.ct-feedback__footer { display:flex; flex-direction:column; align-items:flex-start; margin-top:21px; gap:6px; }
.ct-feedback__action {
  display:inline-flex; align-items:center; gap:14px; max-width:100%; min-height:44px;
  padding:8px 0; border:0; border-radius:3px; background:transparent; color:var(--fg);
  text-align:left; font:500 14px/1.5 var(--font-sans); cursor:pointer;
}
.ct-feedback__action span { text-decoration:underline; text-decoration-color:var(--rule-strong); text-decoration-thickness:1px; text-underline-offset:5px; transition:text-decoration-color .2s; }
.ct-feedback__action svg { flex:none; width:19px; height:19px; transition:transform .2s ease; }
.ct-feedback__action:hover span { text-decoration-color:var(--accent-text); }
.ct-feedback__action:hover svg { transform:translateX(4px); color:var(--accent-text); }
.ct-feedback__meta { margin:0; color:var(--fg-3); font:400 12px/1.6 var(--font-sans); overflow-wrap:anywhere; }
.ct-feedback__email { display:inline-flex; align-items:center; min-height:32px; font:400 13px/1.5 var(--font-sans); color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.ct-feedback [hidden] { display:none!important; }
.ct-feedback button:focus-visible,.ct-feedback a:focus-visible { outline:2px solid var(--accent-text); outline-offset:4px; }
@keyframes contact-feedback-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes contact-brand-draw { from { stroke-dashoffset:250; } to { stroke-dashoffset:0; } }
@keyframes contact-arrival { 0% { stroke-dashoffset:-1; opacity:0; } 12%,70% { opacity:.8; } 100% { stroke-dashoffset:.2; opacity:0; } }
@keyframes contact-trace { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes contact-ripple { from { opacity:.4; transform:scale(1); } to { opacity:0; transform:scale(1.3); } }
@media(max-width:480px) {
 .ct-feedback { padding:26px 24px 22px; border-radius:15px; }
 .ct-feedback__brand .ct-feedback__logo { width:150px; }
 .ct-feedback__signal { margin:18px 0; }
 .ct-feedback__title { font-size:27px; }
 .ct-feedback__copy { font-size:14px; line-height:1.65; }
 .ct-feedback__attachments { margin-top:20px; }
}
@media(prefers-reduced-motion:reduce) {
 .ct-feedback[open],.ct-feedback[open] * { animation:none!important; }
 .ct-feedback *, .ct-feedback *::before { transition:none!important; }
 .ct-feedback__action:hover svg { transform:none; }
}