/* Страница «Помощь» в языке главной. Плитки .fa и 3D-значки .fa-3d берутся из sections.css (как на главной). */
.pe-top { padding: clamp(70px, 7vw, 130px) 0 clamp(30px, 3vw, 54px); background: radial-gradient(60% 90% at 50% 0%, #7c50f93d, transparent 70%); text-align: center; }
.pe-head { display: grid; justify-items: center; gap: clamp(16px, 1.6vw, 26px); }
.pe-head h1 { margin: 0; font-size: clamp(54px, 8vw, 150px); line-height: .95; letter-spacing: -.04em; font-weight: 780; }
.pe-sub { margin: 0; color: var(--t2); font-size: clamp(17px, 1.3vw, 22px); }
.pe-head .hs-big { width: min(820px, 100%); height: clamp(60px, 4.4vw, 82px); border-radius: 99px; border-color: #a281ff77; box-shadow: 0 0 0 6px #7c50f91c, 0 24px 70px -30px #7c50f9; }
.pe-body { display: grid; gap: clamp(36px, 4vw, 64px); padding-bottom: 0; }
.pe-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.pe .ht.fa { display: grid; align-content: end; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: clamp(20px, 2vw, 36px); min-height: clamp(220px, 17vw, 330px); border-radius: 26px; border: 1px solid color-mix(in srgb, var(--c) 28%, #1c2029); background: radial-gradient(90% 100% at 100% 100%, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%), linear-gradient(180deg, #11131a, #0b0d12); }
.pe .ht.fa:hover { transform: none; border-color: color-mix(in srgb, var(--c) 70%, #1c2029); }
.pe .ht.fa.on { border-color: var(--c); }
.pe .ht.fa .fa-3d { right: clamp(22px, 2.4vw, 40px); top: clamp(20px, 2vw, 32px); bottom: auto; width: clamp(96px, 7.6vw, 150px); }
.pe .ht.fa .fa-txt { display: block; } .pe .ht.fa .fa-txt h3 { font-size: clamp(20px, 1.8vw, 30px); color: #fff; } .pe .ht.fa .fa-txt p { font-size: clamp(15px, 1.15vw, 19px); max-width: none; color: #c3c8d6; }
.pe .hp h2 { margin-top: 0; }
.pe-pops { display: grid; gap: 0; }
.pe-pops h2 { margin: 0 0 14px; font-size: clamp(26px, 2.4vw, 44px); letter-spacing: -.02em; }
.pe .pq { border-top: 1px solid #2e3441; } .pe .pq:last-child { border-bottom: 1px solid #2e3441; }
.pe .pq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: clamp(18px, 1.6vw, 28px) 0; font-size: clamp(18px, 1.5vw, 26px); font-weight: 600; transition: color .2s; }
.pe .pq summary::-webkit-details-marker { display: none; }
.pe .pq summary::after { content: "+"; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #7c50f92e; color: #cdbcff; font-size: 24px; line-height: 1; transition: transform .3s var(--ease), background .2s; }
.pe .pq summary:hover { color: #cdbcff; }
.pe .pq[open] summary::after { content: "−"; background: #7c50f9; color: #fff; }
.pe .pq p { margin: 0 0 clamp(18px, 1.6vw, 28px); max-width: 46em; color: #cfd3de; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.6; }
@media (max-width: 900px) { .pe-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pe-grid { grid-template-columns: 1fr; } }

.pe .hs kbd { background: transparent; border-color: #a281ff66; color: #cdbcff; }
.pe .hi summary::after { content: "+"; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #7c50f92e; color: #cdbcff; font-size: 24px; line-height: 1; }
.pe .hi[open] summary::after { content: "−"; background: #7c50f9; color: #fff; }
.pe .hi summary { align-items: center; font-size: clamp(18px, 1.5vw, 26px); }
.pe .hp h2 { font-size: clamp(26px, 2.4vw, 44px); letter-spacing: -.02em; margin-bottom: 14px; }
.pe .docs-line { text-align: left; margin: 0; font-size: 16px; }

.pe-pops .pk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 22px); align-items: start; }
.pe .pk { border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c) 30%, #1c2029); background: radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c) 14%, transparent), transparent 62%), linear-gradient(180deg, #11131a, #0b0d12); transition: border-color .25s; }
.pe .pk:hover, .pe .pk[open] { border-color: color-mix(in srgb, var(--c) 65%, #1c2029); }
.pe .pk summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: clamp(16px, 1.5vw, 24px) clamp(18px, 1.8vw, 28px); }
.pe .pk summary::-webkit-details-marker { display: none; }
.pe .pk-i { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff); } .pe .pk-i .ic { width: 24px; height: 24px; }
.pe .pk summary b { font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; line-height: 1.25; }
.pe .pk p { margin: 0; padding: 0 clamp(18px, 1.8vw, 28px) 10px calc(clamp(18px, 1.8vw, 28px) + 64px); color: #c3c8d6; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pe .pk-more { display: inline-block; margin: 0 0 clamp(16px, 1.5vw, 24px) calc(clamp(18px, 1.8vw, 28px) + 64px); color: #cdbcff; font-size: 16px; text-decoration: none; } .pe .pk-more::after { content: " →"; } .pe .pk-more:hover { text-decoration: underline; }
@media (max-width: 800px) { .pe-pops .pk-grid { grid-template-columns: 1fr; } }

.pe .pk summary::after { content: "+"; margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, transparent); color: #fff; font-size: 22px; line-height: 1; }
.pe .pk[open] summary::after { content: "−"; background: var(--c); }
.pe .pk-i { width: 52px; height: 52px; border-radius: 16px; } .pe .pk-i .ic { width: 28px; height: 28px; }
.pe .pk p { padding-left: calc(clamp(18px, 1.8vw, 28px) + 70px); } .pe .pk-more { margin-left: calc(clamp(18px, 1.8vw, 28px) + 70px); }
.pe .pe-docs { display: flex; align-items: center; gap: 22px; min-height: 0; padding: clamp(18px, 1.8vw, 28px) clamp(20px, 2vw, 34px); text-decoration: none; color: inherit; border-radius: 26px; border: 1px solid color-mix(in srgb, var(--c) 40%, #1c2029); background: radial-gradient(60% 140% at 100% 100%, color-mix(in srgb, var(--c) 20%, transparent), transparent 62%), linear-gradient(180deg, #11131a, #0b0d12); }
.pe .pe-docs:hover { border-color: var(--c); }
.pe .pe-docs .fa-txt h3 { margin: 0; font-size: clamp(22px, 2vw, 32px); } .pe .pe-docs .fa-txt p { margin: 4px 0 0; color: #c3c8d6; font-size: clamp(15px, 1.1vw, 18px); }
.pe .pe-docs::after { content: "→"; margin-left: auto; color: #cdbcff; font-size: 28px; }
.pe .pe-docs .fa-txt { min-height: 0; height: auto; align-self: center; padding: 0; }

/* Карточки «Спрашивают чаще всего»: ответ целиком, без обрезки */
.pe .pk p { display: block; overflow: visible; -webkit-line-clamp: unset; padding-right: clamp(18px, 1.8vw, 28px); }
.pe .pk > *:not(summary) { min-width: 0; }
/* Открытая тема: в новом виде, как карточки вопросов */
.pe #hpanels { display: grid; }
.pe .hp { display: grid; gap: 12px; padding: clamp(20px, 2vw, 34px); border-radius: 26px; border: 1px solid #a281ff55; background: linear-gradient(160deg, #7c50f91c, #7c50f906); }
.pe .hp h2 { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 6px; font-size: clamp(26px, 2.4vw, 44px); letter-spacing: -.02em; }
.pe .hp h2 { cursor: pointer; } .pe .hp h2::after { content: "✕"; flex: none; width: 40px; height: 40px; display: grid; place-items: center; font: 500 18px var(--ui); letter-spacing: 0; color: #cdbcff; border-radius: 50%; border: 1px solid #a281ff66; }
.pe .hi { border: 1px solid #a281ff44; border-radius: 18px; background: #0b0d12b3; }
.pe .hi:last-child { border-bottom: 1px solid #a281ff44; }
.pe .hi summary { padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 26px); font-size: clamp(17px, 1.4vw, 23px); }
.pe .hi p { margin: 0; padding: 0 clamp(16px, 1.6vw, 26px) clamp(14px, 1.4vw, 22px); max-width: 52em; color: #cfd3de; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.65; }
.pe .hi[open] { border-color: #a281ff; }

.pe-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); margin-top: clamp(12px, 1.4vw, 22px); }
.pe .ht.mini { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c) 30%, #1c2029); background: radial-gradient(80% 160% at 100% 100%, color-mix(in srgb, var(--c) 14%, transparent), transparent 62%), linear-gradient(180deg, #11131a, #0b0d12); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .25s; }
.pe .ht.mini:hover, .pe .ht.mini.on { transform: none; border-color: var(--c); }
.pe .ht.mini i { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff); } .pe .ht.mini i .ic { width: 24px; height: 24px; }
.pe .ht.mini span { display: grid; gap: 2px; } .pe .ht.mini b { font-size: clamp(17px, 1.3vw, 21px); color: #fff; } .pe .ht.mini em { font-style: normal; color: #b4bac8; font-size: 14px; }
@media (max-width: 900px) { .pe-more { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pe-more { grid-template-columns: 1fr; } }
.pe .pk p + p { margin-top: 10px; }
.pe .hp { scroll-margin-top: 90px; }

/* Открытая тема: те же карточки, что и «Спрашивают чаще всего», в два столбца, цвет темы */
#p-start { --c: #8c63ff; } #p-rec { --c: #ff5fa2; } #p-clips { --c: #22c3e6; } #p-acc { --c: #ffb547; } #p-store { --c: #2ec27e; } #p-priv { --c: #9b72ff; } #p-trouble { --c: #ff8a3d; } #p-faq { --c: #4c7dff; }
.pe .hp { grid-template-columns: 1fr 1fr; align-items: start; padding: 0; border: 0; background: none; gap: clamp(12px, 1.4vw, 22px); }
.pe .hp h2 { grid-column: 1 / -1; }
.pe .hi { border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c) 30%, #1c2029); background: radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c) 14%, transparent), transparent 62%), linear-gradient(180deg, #11131a, #0b0d12); }
.pe .hi:last-child { border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, #1c2029); }
.pe .hi[open], .pe .hi:hover { border-color: color-mix(in srgb, var(--c) 65%, #1c2029); }
.pe .hi summary::after { background: color-mix(in srgb, var(--c) 22%, transparent); color: #fff; }
.pe .hi[open] summary::after { background: var(--c); }
.pe-pops .pk-grid { align-items: start; }
@media (max-width: 800px) { .pe .hp { grid-template-columns: 1fr; } }