/* contact module: join steps, floating IG button, pre-chat dialog */

/* how to join */
.ct-join{background:linear-gradient(180deg,var(--ink),var(--navy) 50%,var(--ink));border-top:1px solid var(--line)}
.ct-steps{list-style:none;padding:0;margin:0 0 36px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:ct}
.ct-steps li{position:relative;min-width:0;padding:64px 22px 24px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.ct-steps li::before{counter-increment:ct;content:counter(ct);position:absolute;top:18px;left:22px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 1rem var(--f-brand);color:#1a1205;background:var(--grad-gold)}
.ct-steps small{font:500 0.6875rem var(--f-mono);letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.ct-steps h3{font-size:1.25rem;margin-block:6px 8px}
.ct-steps p{color:var(--muted);font-size:0.9375rem;margin:0}
.ct-cta .btn{cursor:pointer}
@media (max-width:760px){.ct-steps{grid-template-columns:1fr}}

/* floating chat button: hidden while the intro gate is up */
.ct-fab{position:fixed;z-index:40;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border:0;border-radius:24px;cursor:pointer;
  background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888);color:#fff;font:600 0.875rem var(--f-body);
  box-shadow:0 10px 30px rgb(var(--shade) / .45),0 0 0 1px rgba(255,255,255,.12) inset;transition:transform .2s,box-shadow .2s}
.ct-fab svg{width:20px;height:20px;flex:none}
.ct-fab:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(220,39,67,.4)}
.ct-fab:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
#intro:not([hidden])~.ct-fab{display:none}
@media (max-width:560px){.ct-fab{width:48px;padding:0;justify-content:center}.ct-fab span{display:none}}

/* pre-chat dialog */
.ct-dlg{width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);color:var(--fg);box-shadow:0 30px 80px rgb(var(--shade) / .6)}
.ct-dlg::backdrop{background:rgba(3,5,10,.7);backdrop-filter:blur(3px)}
.ct-dlg form{position:relative;display:grid;gap:14px;padding:24px 20px 20px}
.ct-dlg h3{font-size:1.3125rem;padding-right:32px}
.ct-sub{margin:-6px 0 0;color:var(--muted);font-size:0.8438rem;line-height:1.6}
.ct-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font:400 1.625rem/1 var(--f-body);cursor:pointer}
.ct-x:hover{color:var(--fg);background:var(--line)}
.ct-dlg fieldset{border:0;margin:0;padding:0;min-width:0}
.ct-dlg legend{padding:0;margin-bottom:8px;font-size:0.875rem;font-weight:600}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chips label{position:relative;cursor:pointer}
.ct-chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ct-chips span{display:inline-block;padding:7px 14px;border:1px solid var(--line-2);border-radius:20px;font-size:0.875rem;color:var(--muted);transition:border-color .15s,color .15s,background .15s}
.ct-chips input:checked+span{border-color:var(--gold);color:var(--gold-hi);background:rgb(var(--gold-rgb) / .1)}
.ct-chips input:focus-visible+span{outline:2px solid var(--gold-hi);outline-offset:2px}
.ct-nick{display:grid;gap:6px;font-size:0.875rem;font-weight:600}
.ct-nick input{font:0.9375rem var(--f-body);color:var(--fg);background:var(--ink);border:1px solid var(--line-2);border-radius:6px;padding:10px 12px;width:100%}
.ct-nick input:focus{outline:none;border-color:var(--gold)}
.ct-prev{margin:0;padding:10px 12px;border:1px dashed var(--line-2);border-radius:6px;font:0.8125rem/1.6 var(--f-body);color:var(--muted);white-space:pre-wrap;word-break:break-word}
.ct-go{width:100%;cursor:pointer;white-space:normal;text-align:center}
.ct-skip{justify-self:center;font-size:0.8438rem;color:var(--muted)}

@media (prefers-reduced-motion:reduce){.ct-fab,.ct-chips span{transition:none}.ct-fab:hover{transform:none}}
@media (max-width:560px){body{padding-bottom:72px}} /* keep the last content clear of the floating button */