/* Janamax — FAQ page (ported from the "Janamax FAQ" design). Builds on home.css. */

body.jm { background: radial-gradient(120% 60% at 50% 0%, #0b2136 0%, #061422 42%, #030a12 100%) no-repeat, #030a12; }

.jm-faq__body {
	padding-top: 18px; padding-bottom: clamp(60px, 6.5vw, 100px);
	display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
}

/* ---------- Accordion ---------- */
.jm-faq__list { flex: 4 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.jm-faq__item { border-radius: 12px; border-right: 1px solid var(--jm-accent); background: var(--jm-card); }
.jm-faq__item[hidden] { display: none; }
.jm-faq__item.is-open { background: linear-gradient(90deg, #243646 0%, #0f2030 100%); }
.jm-faq__q {
	width: 100%; display: flex; align-items: center; gap: 20px; padding: 20px clamp(16px, 2vw, 26px);
	border: 0; background: transparent; cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.jm-faq__num { flex: none; min-width: 34px; font-family: var(--jm-display); font-size: 22px; color: #5F7684; }
.jm-faq__text {
	flex: 1; min-width: 0; font-family: var(--jm-display); font-weight: 300; font-size: clamp(18px, 1.7vw, 21px);
	letter-spacing: 0.03em; line-height: 1.3; color: #eef4f8; text-wrap: pretty; transition: color 0.25s ease;
}
.jm-faq__item:hover .jm-faq__text, .jm-faq__item.is-open .jm-faq__text, .jm-faq__item.is-open .jm-faq__num { color: var(--jm-accent); }
.jm-faq__icon {
	flex: none; width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.3); color: #eef4f8; transition: transform 0.3s ease, background 0.2s ease;
}
.jm-faq__item.is-open .jm-faq__icon { background: var(--jm-accent); border-color: var(--jm-accent); color: #fff; transform: rotate(45deg); }
.jm-faq__a { padding: 0 clamp(16px, 2vw, 26px) 24px calc(clamp(16px, 2vw, 26px) + 54px); }
.jm-faq__a[hidden] { display: none; }
.jm-faq__a p { margin: 0; font-size: 18px; line-height: 1.6; color: #93a7b1; text-wrap: pretty; }

/* ---------- How we start ---------- */
.jm-faq__steps {
	flex: 1 1 300px; max-width: 420px; min-width: 260px; padding: 24px;
	border-radius: 12px; border-right: 1px solid var(--jm-accent); background: var(--jm-card);
}
.jm-faq__steps-title { font-family: var(--jm-display); font-weight: 300; font-size: clamp(18px, 1.7vw, 21px); letter-spacing: 0.03em; line-height: 1.3; color: var(--jm-accent); }
.jm-faq__steps ol { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.jm-faq__steps li { display: flex; align-items: flex-start; gap: 16px; }
.jm-faq__step-num {
	flex: none; width: 40px; height: 40px; border: 2px solid var(--jm-accent); border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-family: var(--jm-display); font-size: 16px; color: var(--jm-accent);
}
.jm-faq__steps li > span:last-child { flex: 1; min-width: 0; }
.jm-faq__step-title { display: block; font-family: var(--jm-display); font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: #eef4f8; }
.jm-faq__step-body { display: block; margin-top: 6px; font-size: 18px; line-height: 1.6; color: #93a7b1; }

/* ---------- CTA ---------- */
.jm-cta--faq { border-top: 0; }
.jm-cta--faq .jm-cta__title { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; }

@media (max-width: 699px) {
	.jm-faq__q { gap: 12px; padding: 14px; }
	.jm-faq__num { min-width: 22px; font-size: 16px; }
	.jm-faq__text { font-size: 16px; }
	.jm-faq__icon { width: 32px; height: 32px; }
	.jm-faq__icon svg { width: 13px; height: 13px; }
	.jm-faq__a { padding: 0 14px 18px 48px; }
	.jm-faq__a p { font-size: 16px; }
	.jm-faq__steps { max-width: none; }
}