@charset "utf-8";

/* The FAQ includes its own spacing before the shared footer. */
#footer.mt400 { margin-top: 0 !important; }

.ezl-faq {
    max-width: 828px;
    margin: 0 auto;
    padding: 160px 24px 120px;
    box-sizing: content-box;
    font-size: 18px;
    line-height: 1.4;
    color: #000;
}
.ezl-faq *, .ezl-faq *::before, .ezl-faq *::after { box-sizing: border-box; }
.ezl-faq h1, .ezl-faq h2, .ezl-faq p { transform: none; }
.ezl-faq__hero {
    min-height: 320px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}
.ezl-faq__hero h1 { font-size: 38px; font-weight: 700; line-height: 1.3; color: #111; }
.ezl-faq__hero p { margin-top: 12px; font-size: 20px; font-weight: 600; line-height: 1.3; color: #4d4d4d; }
.ezl-faq__hero-image { width: 172px; height: 172px; flex-shrink: 0; }
.ezl-faq__list { display: flex; flex-direction: column; gap: 24px; }
.ezl-faq__item { position: relative; background: #f9f9f9; border-radius: 24px; padding: 28px 48px 132px; }
.ezl-faq__item h2 { font-size: inherit; font-weight: inherit; }
.ezl-faq__toggle { display: block; width: 100%; text-align: left; line-height: 1.4; }
.ezl-faq__number { display: block; margin-bottom: 8px; font-size: 16px; line-height: 22px; font-weight: 500; }
.ezl-faq__question { display: block; max-width: 620.41px; font-size: 20px; line-height: 28px; font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.ezl-faq__arrow { position: absolute; left: 48px; bottom: 28px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.ezl-faq__arrow img { width: 37px; height: 37px; transform: rotate(180deg); }
.ezl-faq__item.is-animating { overflow: hidden; }
.ezl-faq__list { overflow-anchor: none; }
.ezl-faq__illustration { --faq-icon-offset: -50%; display: none; position: absolute; right: 48px; top: 50%; width: 111.59px; height: 64px; transform: translateY(var(--faq-icon-offset)); transition: transform 180ms ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
    .ezl-faq__item:hover .ezl-faq__illustration { transform: translateY(var(--faq-icon-offset)) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .ezl-faq__illustration { transition: none; }
}
.ezl-faq__illustration--apple { width: 122.75px; height: 70.4px; }
.ezl-faq__answer { margin-top: 36px; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.ezl-faq__answer[hidden] { display: none; }
.ezl-faq__answer p + p { margin-top: 18px; }
.ezl-faq__answer .ezl-faq__note { font-size: 16px; line-height: 1.5; color: #94979d; }
.ezl-faq__copy + .ezl-faq__note { margin-top: 36px; }
.ezl-faq__steps { padding: 24px; border-radius: 12px; background: #fff6d5; font-weight: 500; text-align: center; }
.ezl-faq__item.is-collapsed { padding-bottom: 86px; }
.ezl-faq__item.is-collapsed .ezl-faq__toggle { width: calc(100% - 111.59px); }
.ezl-faq__item.is-collapsed .ezl-faq__toggle::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.ezl-faq__item.is-collapsed .ezl-faq__arrow img { transform: none; }
.ezl-faq__item.is-collapsed .ezl-faq__illustration { display: block; }
.ezl-faq__toggle:focus-visible { outline: 2px solid #111; outline-offset: 6px; border-radius: 4px; }
.ezl-faq__toggle:focus-visible .ezl-faq__arrow { outline: 2px solid #111; outline-offset: 4px; border-radius: 50%; }
.ezl-faq a:focus-visible { outline: 2px solid #111; outline-offset: 5px; }
.ezl-faq__support, .ezl-faq__download { padding: 64px 28px; border-radius: 24px; background: #fff6d5; text-align: center; }
.ezl-faq__support > img { width: 72px; height: 72px; }
.ezl-faq__support p { margin-top: 16px; font-size: 20px; }
.ezl-faq__support a { display: inline-block; margin-top: 16px; font-size: 24px; font-weight: 600; }
.ezl-faq__download h2 { font-size: 24px; font-weight: 600; }
.ezl-faq__download h2 span { padding: 0 10px; background: linear-gradient(transparent 42%, #ffdf56 42%); }
.ezl-faq__download p { margin-top: 8px; font-size: 20px; }
.ezl-faq__stores { max-width: 563px; margin: 36px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ezl-faq__stores a { display: block; }
.ezl-faq__stores a img { width: 200px; height: 66.67px; }
.ezl-faq__stores > img { width: 140px; height: 140px; padding: 13px; border: 2px solid #ffb400; border-radius: 23px; background: #fff; }
.ezl-faq__update, .ezl-faq__mobile { display: none; }
.ezl-faq__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 767px) {
    .ezl-faq { padding: 107px 24px 50px; }
    .ezl-faq__hero { min-height: 346px; padding: 40px 11px; margin-bottom: 0; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 24px; }
    .ezl-faq__hero h1 { font-size: 28px; font-weight: 600; line-height: 1.4; }
    .ezl-faq__hero p { font-size: 18px; line-height: 1.5; }
    .ezl-faq__hero-image { width: 118px; height: 118px; }
    .ezl-faq__list { gap: 28px; }
    .ezl-faq__item { padding: 24px 24px 140px; }
    .ezl-faq__question { font-size: 18px; line-height: 25px; font-weight: 500; }
    .ezl-faq__item.is-collapsed { padding-bottom: 140px; }
    .ezl-faq__item.is-collapsed .ezl-faq__toggle { width: 100%; }
    .ezl-faq__arrow { left: 24px; bottom: 38px; }
    .ezl-faq__item.is-collapsed .ezl-faq__arrow { bottom: 38px; }
    .ezl-faq__illustration { --faq-icon-offset: 0%; display: block; top: auto; right: 26px; bottom: 26px; }
    .ezl-faq__illustration--apple { right: 16px; bottom: 23px; }
    .ezl-faq__answer { font-size: 16px; }
    .ezl-faq__steps { padding: 24px; text-align: left; }
    .ezl-faq__answer .ezl-faq__note { font-size: 14px; }
    .ezl-faq__support { padding: 64px 24px; }
    .ezl-faq__support-break { display: block; }
    .ezl-faq__download, .ezl-faq__pc { display: none; }
    .ezl-faq__mobile { display: inline; }
    .ezl-faq__update { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 24px; background: #111; color: #fff; border-radius: 8px; font-size: 18px; font-weight: 500; }
    .ezl-faq__update img { width: 24px; height: 24px; }
}
