/* Support (route "support"), 29 Sep 2026: the help center to the homepage standard (next/design-briefs/support.md).
   Loaded only by templates/support.php (PA_Seo::open page_css). The kit's tokens and card recipe; phone first. */

.pa-sup-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pa-page .pa-sup-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the kit's one card depth, for this page's own small cards */
.pa-sup-card { position: relative; border-radius: var(--pa-r-2); background: var(--pa-card-bg); border: 1px solid var(--pa-card-line); box-shadow: var(--pa-elev); }

/* hero: a real search field (16 px and up, so iOS never zooms), the button beside it from 600 px */
.pa-sup-search { display: grid; gap: 10px; margin-top: 22px; }
.pa-sup-search__k { font: 600 var(--pa-fs-sm)/1.3 var(--pa-font); color: var(--pa-text); }
.pa-sup-search__bar { display: grid; gap: 10px; }
.pa-sup-search__f { position: relative; display: block; }
.pa-page .pa-sup-search__ic { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--pa-text-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.pa-field { width: 100%; min-height: 52px; padding: 0 20px 0 48px; border: 1px solid var(--pa-line-strong); border-radius: 999px; background: var(--pa-ink-2); color: var(--pa-text); font: 400 var(--pa-fs-base)/1.2 var(--pa-font); cursor: text; -webkit-appearance: none; appearance: none; transition: border-color .2s; }
.pa-field::placeholder { color: var(--pa-text-3); opacity: 1; }
.pa-field:hover { border-color: var(--pa-text-2); }
.pa-field:focus-visible { border-color: var(--pa-focus); }
.pa-sup-search .pa-btn { min-height: 52px; }
@media (max-width: 599px) { .pa-sup-search .pa-btn, .pa-sup-search .pa-btn:hover, .pa-sup-search .pa-btn:focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); } }
.pa-sup-hero__direct { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 4px !important; }
.pa-sup-hero__direct span { font-size: var(--pa-fs-sm); color: var(--pa-text-2); }
@media (min-width: 600px) { .pa-sup-search__bar { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 1024px) { .pa-sup-hero .pa-hero__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }

/* hero: the six topics; from 768 px the refraction board (one beam into the glass prism, a ray to each topic) */
.pa-sup-board { display: grid; gap: 12px; margin-top: 30px; }
.pa-sup-board__k { font: 650 var(--pa-fs-xs)/1.3 var(--pa-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-text-2); }
.pa-sup-board__art { display: none; }
.pa-sup-topics { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* the ray's hue where it lands (the spectrum's stops, site.css --pa-spectrum), carried into that topic's section below:
   light only, the word carries the meaning */
.pa-support-page { --sup-c1: #9d90ff; --sup-c2: #6aa2ff; --sup-c3: #47c4f2; --sup-c4: #3dd9b6; --sup-c5: #57e077; --sup-c6: #9ce263; }
.pa-sup-topics li:nth-child(1), #installation { --sup-c: var(--sup-c1); } .pa-sup-topics li:nth-child(2), #license { --sup-c: var(--sup-c2); }
.pa-sup-topics li:nth-child(3), #settings { --sup-c: var(--sup-c3); } .pa-sup-topics li:nth-child(4), #trading { --sup-c: var(--sup-c4); }
.pa-sup-topics li:nth-child(5), #errors { --sup-c: var(--sup-c5); } .pa-sup-topics li:nth-child(6), #billing { --sup-c: var(--sup-c6); }
.pa-sup-topic { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 60px; height: 100%; padding: 9px 16px 9px 12px;
	border-radius: var(--pa-r-2); background: var(--pa-card-bg); border: 1px solid var(--pa-card-line); box-shadow: var(--pa-elev); color: var(--pa-text); text-decoration: none; overflow: hidden;
	transition: border-color .2s, transform .25s var(--pa-ease); }
.pa-sup-topic::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sup-c); box-shadow: 0 0 14px var(--sup-c); }
.pa-sup-topic:hover { border-color: var(--pa-line-strong); }
.pa-sup-topic__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--pa-ink-1); border: 1px solid var(--pa-line); color: var(--pa-lit); }
.pa-sup-topic__t { display: grid; gap: 2px; min-width: 0; }
.pa-sup-topic__t b { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; }
.pa-sup-topic__t span { display: none; font-size: var(--pa-fs-sm); color: var(--pa-text-2); }
.pa-sup-topic__n { font-size: var(--pa-fs-xs); color: var(--pa-text-2); }
.pa-sup-topic__n::after { content: "\2192"; margin-left: 8px; color: var(--pa-go); }
@media (min-width: 600px) { .pa-sup-topic__t span { display: block; } }
@media (min-width: 768px) {
	.pa-sup-board { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); grid-template-areas: "k k" "art list"; column-gap: 0; margin-top: 40px; }
	.pa-sup-board__k { grid-area: k; }
	.pa-sup-board__art { grid-area: art; display: block; position: relative; }
	.pa-sup-board__art::before { content: ""; position: absolute; left: 20%; top: 30%; width: 50%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(106, 162, 255, .22), transparent); }
	.pa-page .pa-sup-board__art svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
	.pa-sup-board__art path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
	.pa-sup-board__ray { opacity: .85; }
	.pa-page .pa-sup-board__glass { position: absolute; z-index: 1; left: 46%; top: 50%; width: min(150px, 62%); transform: translate(-50%, -56%); }
	.pa-sup-topics { grid-area: list; grid-auto-rows: 1fr; }
}
@media (min-width: 1024px) {
	.pa-sup-topic { padding-block: 11px; }
	.pa-sup-topic__t { grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; gap: 16px; }
}

/* quick start: the kit's steps (titles on one line here, so no reserved second line), then the five checks */
@media (min-width: 900px) { .pa-sup-start .pa-steps h3 { min-height: 0; } }
.pa-sup-start__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 18px !important; }
.pa-sup-check { display: grid; gap: 18px; margin-top: clamp(28px, 4vw, 44px); padding: clamp(20px, 3vw, 30px); overflow: hidden; }
.pa-sup-check::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--pa-spectrum); opacity: .55; }
.pa-sup-check__h { font-size: var(--pa-fs-h3); }
.pa-sup-check__h span { color: var(--pa-text-3); }
.pa-sup-check ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pa-sup-check li { position: relative; min-height: 28px; padding: 3px 0 0 42px; font-size: var(--pa-fs-sm); font-weight: 500; color: var(--pa-text); }
.pa-sup-check li::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--pa-fx); box-shadow: 0 0 14px rgba(60, 211, 238, .35); }
.pa-sup-check li::after, .pa-sup-send li::before { content: ""; position: absolute; width: 10px; height: 5px; border-left: 2px solid var(--pa-fx); border-bottom: 2px solid var(--pa-fx); transform: rotate(-45deg); }
.pa-sup-check li::after { left: 9px; top: 10px; }
.pa-sup-check > p { font-size: var(--pa-fs-sm); color: var(--pa-text-2); }
@media (min-width: 900px) {
	.pa-sup-check ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
	.pa-sup-check li { padding: 42px 0 0; }
}

/* the answers: numbered groups; the heads stay in view on desktop beside their answers */
/* a search: the count sits on the wrap's left edge, the Clear search link under the field at its own width */
.pa-sup-status { padding-block: clamp(4px, 1vw, 12px) clamp(28px, 4vw, 44px); }
.pa-sup-status .pa-head { margin-bottom: 0; }
.pa-sup-search > .pa-link { justify-self: start; }
.pa-sup-chip { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--pa-card-bg); border: 1px solid var(--pa-card-line);
	border-color: color-mix(in srgb, var(--sup-c) 45%, transparent); box-shadow: var(--pa-elev), 0 0 24px -6px var(--sup-c); color: var(--sup-c); }
.pa-sup-grp__head .pa-eyebrow::before { background: var(--sup-c); }
.pa-sup-grp__head .pa-h2-2 { display: block; }
.pa-sup-s { display: inline-block; }
.pa-sup-grp .pa-faq { border-top: 2px solid color-mix(in srgb, var(--sup-c) 55%, transparent); }
.pa-sup-grp .pa-faq__item[open] > .pa-faq__q::after { border-color: var(--sup-c); }
.pa-page .pa-sup-chip .pa-sup-ic { width: 26px; height: 26px; }
@media (min-width: 900px) { .pa-sup-grp .pa-hfaq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (min-width: 900px) and (min-height: 760px) { .pa-sup-grp__head { position: sticky; top: calc(var(--pa-header-h) + 28px); } }

.pa-sup-files { display: grid; margin: 4px 0 0; padding: 4px 16px; font: 500 var(--pa-fs-sm)/1.4 var(--pa-mono); }
.pa-sup-files div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 0; }
.pa-sup-files div + div { border-top: 1px solid var(--pa-line); }
.pa-sup-files dt { color: var(--pa-text); }
.pa-sup-files dt span { color: var(--pa-text-3); }
.pa-sup-files dd { margin: 0; color: var(--pa-fx); }
.pa-sup-files dd::before { content: "\2192"; margin-right: 12px; color: var(--pa-text-3); }

.pa-sup-slots { display: grid; gap: 10px; margin-top: 4px; }
.pa-sup-slots ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pa-sup-slots li { display: grid; gap: 6px; align-content: start; padding: 14px 14px 12px; }
.pa-sup-slots li.is-hi { border-color: color-mix(in srgb, var(--sup-c, var(--pa-fx)) 60%, transparent); }
.pa-sup-slots b { font: 700 clamp(2.25rem, 1.8rem + 1.6vw, 3rem)/1 var(--pa-font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--pa-text); }
.pa-sup-slots span { font-size: var(--pa-fs-xs); font-weight: 600; color: var(--pa-text-2); }

.pa-sup-profiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.pa-sup-profiles li { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border: 1px solid var(--pa-line-strong); border-radius: 999px; font-size: var(--pa-fs-sm); font-weight: 500; color: var(--pa-text); }
.pa-sup-profiles .is-def { border-color: var(--pa-fx); box-shadow: 0 10px 30px -14px rgba(60, 211, 238, .7); }
.pa-sup-profiles small { font: 650 var(--pa-fs-xs)/1 var(--pa-font); letter-spacing: .08em; text-transform: uppercase; color: var(--pa-fx); }

.pa-sup-proof { display: grid; gap: 10px; margin-top: 4px; padding: 16px 18px 12px; overflow: hidden; }
.pa-sup-proof::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--pa-spectrum); opacity: .7; }
.pa-sup-proof__k, .pa-sup-send__k { font: 650 var(--pa-fs-xs)/1.3 var(--pa-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-text-2); }
/* the gain and the max drawdown at the same size, side by side down to 360 px; then where they come from */
.pa-sup-proof .pa-strip { column-gap: 14px; }
.pa-sup-proof .pa-strip b { font-family: var(--pa-font); font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 700; letter-spacing: -.03em; }
.pa-sup-proof__foot { padding-top: 10px; border-top: 1px solid var(--pa-line); font-size: var(--pa-fs-xs); line-height: 1.45; color: var(--pa-text-2); }
@media (max-width: 389px) { .pa-sup-proof { padding-inline: 14px; } .pa-sup-proof .pa-strip b { font-size: 1.125rem; } }

.pa-sup-send { display: grid; gap: 12px; margin-top: 4px; padding: 16px 18px; }
.pa-sup-send ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--pa-fs-sm); color: var(--pa-text); }
.pa-sup-send li { position: relative; padding-left: 24px; }
.pa-sup-send li::before { left: 2px; top: .45em; border-color: var(--sup-c, var(--pa-fx)); }
.pa-sup-send__no { font-size: var(--pa-fs-xs); color: var(--pa-text-3); }

