.help-page { max-width:1160px; }
.help-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:40px; align-items:center; padding:32px 0 40px; border-bottom:1px solid #e5dcee; background:radial-gradient(ellipse at 85% 50%,#eee3fb99,transparent 55%); }
.help-hero h1 { font:500 clamp(2.2rem,4.5vw,3.6rem)/1.12 Georgia,serif; letter-spacing:-.04em; color:#30213f; margin:16px 0; }
.help-hero h1 em { color:#8051ff; font-weight:400; }
.help-hero p { max-width:520px; font-size:.9rem; line-height:1.85; color:#82718e; }
.help-hero>img { display:block; width:100%; height:auto; }
.help-hero a { display:inline-block; margin-top:12px; font-size:.8rem; color:#7955a4; text-underline-offset:4px; }
.help-start,.help-faq { padding-top:40px; }
.help-section-heading h2 { font:500 clamp(1.6rem,3vw,2rem)/1.3 Georgia,serif; color:#30213f; margin:10px 0; }
.help-section-heading>p { color:#82718e; font-size:.85rem; }
.help-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; list-style:none; padding:0; margin:24px 0; }
.help-steps>li { position:relative; padding:18px; border:1px solid #e5d9f2; border-radius:14px 5px 16px 6px; background:#fcfaff; }
.help-step-number { position:absolute; top:12px; left:14px; color:#aa8cc9; font:1.1rem Georgia,serif; }
.help-steps img { display:block; width:130px; max-width:100%; height:96px; object-fit:contain; margin:0 auto 14px; }
.help-steps h3 { font-size:.9rem; color:#513a66; margin:0 0 8px; }
.help-steps p { font-size:.77rem; color:#82718e; line-height:1.8; margin:0; }
.help-start>.btn-primary { display:inline-flex; font-size:.8rem; }
.help-faq-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:36px; margin-top:24px; align-items:start; }
.help-topics { display:grid; gap:8px; position:sticky; top:100px; }
.help-topics a { display:flex; justify-content:space-between; gap:12px; padding:14px; border:1px solid #e5d9f2; border-radius:8px; background:#f7f2fc; color:#7955a4; text-decoration:none; font-size:.8rem; }
.help-topics a:hover { background:#eee4f9; }
.help-topic { margin-bottom:32px; }
.help-topic h3 { font:500 1.4rem Georgia,serif; color:#513a66; margin:0 0 14px; }
.help-page [id] { scroll-margin-top:110px; }
.help-question { border-bottom:1px solid #e5d9f2; }
.help-question summary { display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none; cursor:pointer; padding:17px 4px; font-size:.85rem; font-weight:500; color:#4b375c; line-height:1.6; }
.help-question summary::-webkit-details-marker { display:none; }
.help-question summary>span { font-size:1.25rem; color:#9a75c0; flex-shrink:0; }
.help-question[open] summary>span { transform:rotate(45deg); }
.help-question p { margin:0; padding:0 26px 20px 4px; color:#7e6f89; font-size:.83rem; line-height:1.9; }
.help-question summary:focus-visible,.help-topics a:focus-visible { outline:2px solid #a384d1; outline-offset:3px; }
.help-contact { display:flex; align-items:center; gap:24px; padding:24px; margin:20px 0; background:#f1e9fa; border:1px solid #dfd1ee; border-radius:16px; }
.help-contact>img { width:90px; height:auto; }
.help-contact>div { flex:1; min-width:0; }
.help-contact h2 { font:500 1.5rem Georgia,serif; color:#513a66; margin:0 0 8px; }
.help-contact p { color:#82718e; font-size:.8rem; line-height:1.8; margin:0; }
.help-contact>a { font-size:.78rem; flex-shrink:0; }
@media(max-width:800px) { .help-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .help-faq-layout { grid-template-columns:minmax(0,1fr); gap:20px; } .help-topics { position:static; grid-template-columns:repeat(3,minmax(0,1fr)); } .help-topics a { padding:12px; font-size:.72rem; } }
@media(max-width:600px) { .help-hero { grid-template-columns:minmax(0,1fr); gap:12px; padding-top:20px; } .help-hero>img { width:200px; justify-self:center; } .help-steps { gap:12px; } .help-steps>li { padding:14px; } .help-topics { grid-template-columns:minmax(0,1fr); gap:6px; } .help-contact { flex-wrap:wrap; padding:20px; gap:14px; } .help-contact>img { width:64px; } .help-contact>a { width:100%; text-align:center; } }
