/* FluxFront — switching steps (#switching) + FAQ (#faq, two-column on desktop). Native <details>, no JS. */
/* ===================== SWITCHING + FAQ ===================== */
.switching .h2 { margin-top: 16px; }
.switch-steps { list-style: none; counter-reset: sw; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.switch-steps li { counter-increment: sw; position: relative; padding: 18px 20px 18px 62px; border-radius: var(--r-lg); background: var(--cream); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 3px; }
.switch-steps li::before { content: counter(sw); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: #fff; background: var(--brand-grad); }
.switch-steps li b { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.switch-steps li span { font-size: var(--t-sm); color: var(--ink-2); }
.switch-photo { aspect-ratio: 16 / 10; }
.faq-sec { background: var(--surface); }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
.faq details { background: transparent; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; position: relative; font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2229' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--d-2) var(--e-out); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 18px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; max-width: 60ch; }