/*
 * Contact (/contact/): this page's own styles (29 Sep 2026, next/design-briefs/contact.md). Printed after site.css by
 * PA_Seo::open(['page_css' => ['contact']]). Kit tokens only, phone first; no red anywhere (KIT.md), never amber.
 * The form is the plugin's own markup (PrismAlgo_Contact_Form::render()): styled here by its classes, fields never
 * as buttons, 16 px text so iOS never zooms on focus.
 */

/* hero: phones read head, panel, channels; from 900 px the head and channels sit left, the panel right */
.pa-contact { padding-block: clamp(16px, 3vw, 40px) clamp(48px, 6vw, 88px); }
.pa-contact__grid { display: grid; gap: 28px; }
.pa-contact__grid > * { min-width: 0; }
.pa-contact__head { margin-bottom: 0; }
@media (min-width: 900px) {
	.pa-contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "head form" "ch form"; gap: 36px 56px; align-items: start; }
	.pa-contact__head { grid-area: head; }
	.pa-contact__panel { grid-area: form; }
	.pa-contact__ch { grid-area: ch; }
}

/* the message panel: a lit card; Jim's glass prism sits on its edge and the spectrum leaves it along the top */
.pa-contact__panel { position: relative; margin-top: 22px; padding: 42px clamp(12px, 8vw - 16px, 32px) clamp(20px, 3vw, 32px); border: 1px solid rgba(60, 211, 238, .3); border-radius: var(--pa-r-3); background: var(--pa-card-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(60, 211, 238, .07), 0 60px 120px -56px rgba(60, 211, 238, .45); }
.pa-contact__panel::before { content: ""; position: absolute; top: -1px; left: 60px; right: 24px; height: 2px; background: var(--pa-spectrum); -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.pa-contact__panel::after { content: ""; position: absolute; top: -1px; right: calc(100% - 34px); width: 120px; height: 2px; background: linear-gradient(90deg, transparent, rgba(238, 243, 250, .9)); }
.pa-contact__glass { position: absolute; z-index: 1; top: -30px; left: 14px; width: 64px; height: auto; background: radial-gradient(closest-side, rgba(106, 162, 255, .35), transparent); pointer-events: none; }
@media (min-width: 600px) {
	.pa-contact__panel { padding-top: 54px; }
	.pa-contact__panel::before { left: 92px; }
	.pa-contact__panel::after { right: calc(100% - 48px); }
	.pa-contact__glass { top: -44px; left: 18px; width: 92px; }
}
@media (min-width: 900px) { .pa-contact__panel { margin-top: 48px; } }
.pa-contact__ph { display: grid; gap: 8px; margin-bottom: 22px; color: var(--pa-text-2); font-size: var(--pa-fs-sm); }
.pa-contact__h { font-size: var(--pa-fs-h3); font-weight: 680; letter-spacing: -.025em; color: var(--pa-text); }
/* the one safety instruction reads first and in full contrast, with the lock (brief P9) */
.pa-contact__req { display: flex; align-items: flex-start; gap: 10px; color: var(--pa-text-2); font-size: var(--pa-fs-sm); }
.pa-contact__req b { color: var(--pa-text); font-weight: 650; }
.pa-contact__mini { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-top: -2px; border: 1px solid rgba(60, 211, 238, .3); border-radius: 8px; background: rgba(60, 211, 238, .08); color: var(--pa-fx); font-style: normal; }
.pa-contact__mini svg { width: 15px; height: 15px; }
.pa-contact__down { color: var(--pa-text-2); }

/* the form: one set of fields, Name and Email side by side from 600 px */
.pa-contact [data-pa-contact-form] { margin: 0; }
.pa-contact .elementor-form-fields-wrapper { display: grid; gap: 18px 16px; }
@media (min-width: 600px) {
	.pa-contact .elementor-form-fields-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pa-contact .elementor-form-fields-wrapper > .elementor-col-100 { grid-column: 1 / -1; }
}
.pa-contact .elementor-field-group { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pa-contact .elementor-field-label { font: 600 var(--pa-fs-sm)/1.3 var(--pa-font); color: var(--pa-text); }
.pa-contact .elementor-field-group :is(input, textarea) {
	display: block; width: 100%; min-height: 52px; margin: 0; padding: 13px 16px;
	border: 1px solid var(--pa-line-strong); border-radius: 12px; background: rgba(5, 8, 15, .72); color: var(--pa-text);
	font: 400 var(--pa-fs-base)/1.45 var(--pa-font); -webkit-appearance: none; appearance: none;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.pa-contact .elementor-field-group textarea { min-height: 148px; resize: vertical; }
.pa-contact .elementor-field-group :is(input, textarea)::placeholder { color: var(--pa-text-3); opacity: 1; }
.pa-contact .elementor-field-group :is(input, textarea):hover { border-color: var(--pa-text-3); }
.pa-contact .elementor-field-group :is(input, textarea):focus { border-color: var(--pa-fx); background: var(--pa-ink-0); box-shadow: 0 0 0 3px rgba(60, 211, 238, .16); }
.pa-contact .elementor-field-group :is(input, textarea):focus-visible { outline: 2px solid var(--pa-focus); outline-offset: 2px; border-radius: 12px; }
.pa-contact .elementor-field-group input:-webkit-autofill { -webkit-text-fill-color: var(--pa-text); caret-color: var(--pa-text); box-shadow: 0 0 0 60px var(--pa-ink-1) inset; }
.pa-contact .e-form__buttons { gap: 14px; margin-top: 2px; }
/* the security check keeps its 300 x 65 box reserved, so the button never jumps when it loads */
.pa-contact form[data-pa-contact-form] .cf-turnstile { margin: 0; min-height: 65px; max-width: 100%; }
.pa-contact .cf-turnstile-br { display: none; }
/* before the widget script fills it (or where it cannot load), the box says what goes there */
.pa-contact form[data-pa-contact-form] .cf-turnstile:empty { display: flex; align-items: center; width: 300px; padding: 0 16px; border: 1px dashed var(--pa-line-strong); border-radius: 8px; background: rgba(5, 8, 15, .5); }
.pa-contact form[data-pa-contact-form] .cf-turnstile:empty::before { content: "Cloudflare security check"; color: var(--pa-text-3); font-size: var(--pa-fs-xs); }

/* the form's answers (contact-form.js and the no-JS result): the words carry the meaning, no warning color */
.pa-contact [data-pa-contact-form] .elementor-message { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--pa-line-strong); border-radius: var(--pa-r-2); background: var(--pa-ink-2); color: var(--pa-text); font-size: var(--pa-fs-sm); }
.pa-contact [data-pa-contact-form] .elementor-message-success { border-color: var(--pa-go); }
.pa-contact .elementor-message-success::before { content: "\2713\00a0"; color: var(--pa-go); font-weight: 700; }
.pa-contact .elementor-message-danger::before { content: "!\00a0"; font-weight: 700; }
.pa-contact [data-pa-contact-form] .elementor-help-inline { display: block; margin: 0; padding: 0; border: 0; background: none; color: var(--pa-text); font-size: var(--pa-fs-xs); }
.pa-contact .elementor-error :is(input, textarea) { border-color: var(--pa-text); box-shadow: inset 0 0 0 1px var(--pa-text); }

/* icon tiles (decoration: the words beside them say it) */
.pa-contact__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid rgba(60, 211, 238, .3); border-radius: 12px; background: radial-gradient(circle at 30% 20%, rgba(60, 211, 238, .22), rgba(60, 211, 238, .05)); color: var(--pa-fx); font-style: normal; }
.pa-contact__ic svg { width: 22px; height: 22px; }

/* the channels: Email and Telegram as link cards */
.pa-contact__ch { display: grid; gap: 12px; }
@media (min-width: 600px) and (max-width: 899px) { .pa-contact__ch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-contact__chan { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; align-content: start; padding: 18px 20px; }
.pa-contact__chan .pa-contact__ic { grid-row: 1 / span 3; }
.pa-contact__chan strong { font-size: clamp(1.0625rem, .95rem + .7vw, 1.375rem); overflow-wrap: anywhere; }
.pa-contact__chan b { margin-top: 4px; padding-top: 0; }
.pa-contact__ch .pa-contact__who { grid-column: 1 / -1; padding: 2px 4px 0; }

/* setup help: the privacy note, then the MT5 panel */
.pa-contact-help .pa-contact__lock { display: flex; align-items: center; gap: 16px; margin-top: clamp(28px, 4vw, 44px); padding: 16px 20px; border: 1px solid var(--pa-line-strong); border-radius: var(--pa-r-2); background: var(--pa-ink-0); color: var(--pa-text-2); font-size: var(--pa-fs-sm); }
.pa-contact__lock b { color: var(--pa-text); font-weight: 650; }
.pa-contact__shot { margin-top: clamp(44px, 6vw, 72px); }
.pa-contact__shot-h { display: grid; gap: 10px; margin-bottom: 20px; color: var(--pa-text-2); }
.pa-contact__shot-h .pa-h3 { color: var(--pa-text); letter-spacing: -.025em; }
/* where each answer sits on the panel: a key, not another card grid */
.pa-contact__where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 8px 0 0; }
.pa-contact__where > div { padding-left: 12px; border-left: 2px solid var(--pa-fx); }
.pa-contact__where dt { color: var(--pa-text); font-size: var(--pa-fs-sm); font-weight: 650; }
.pa-contact__where dd { margin: 2px 0 0; color: var(--pa-text-2); font-size: var(--pa-fs-xs); }
/* from 900 px the screenshot sits beside its key instead of under it */
@media (min-width: 900px) {
	.pa-contact__shot { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
	.pa-contact__shot-h { margin: 0; }
}

/* self-serve cards and the closer */
.pa-contact-self .pa-card { gap: 10px; }
.pa-contact-self .pa-contact__ic { margin-bottom: 6px; }
/* stacked (one column), the self-serve cards take the channel cards' icon-left layout: one system, a third shorter */
@media (max-width: 699px) {
	.pa-contact-self .pa-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; align-content: start; padding: 18px 20px; }
	.pa-contact-self .pa-card > * { grid-column: 2; }
	.pa-contact-self .pa-card .pa-contact__ic { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
	.pa-contact-self .pa-card span { margin-top: 4px; }
	.pa-contact-self .pa-card b { margin-top: 4px; }
}
.pa-contact-page .pa-closer .pa-lede { text-wrap: balance; }
.pa-contact-page .pa-closer .pa-note { max-width: 72ch; text-align: center; }