/* quiz.megalecture.com /how-to/ and /faq/ (3 Nov 2026). Loads after seo.css and uses its tokens. */
.hero--how h1 { font-size:clamp(32px, 7vw, 46px); }
.want { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.want p { flex:1 0 100%; margin:0 0 2px; font-weight:700; color:var(--ink-2); font-size:15px; }
.want a { display:inline-block; padding:12px 18px; border:2px solid var(--ink); border-radius:99px; color:var(--ink); font-weight:700; text-decoration:none; font-size:15.5px; line-height:1.2; background:var(--surface); }
.want a:hover { background:var(--yellow); border-color:var(--yellow); }
.want--faq a { border-width:1.5px; border-color:var(--line); font-weight:600; }
.howgrp { margin-block:44px; } .howgrp > .lead { margin-bottom:6px; }
.how { display:grid; grid-template-columns:minmax(0, 250px) minmax(0, 1fr); gap:20px 28px; align-items:start; padding:22px 0 26px; border-top:1px solid var(--line); scroll-margin-top:16px; }
.how:first-of-type { border-top:0; }
.how__video { position:relative; aspect-ratio:9 / 16; border-radius:22px; overflow:hidden; background:#EEF2F7; box-shadow:0 10px 30px rgba(14,27,42,.14); }
.how__video video { display:block; width:100%; height:100%; object-fit:cover; cursor:pointer; }
.how__play { position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border:0; border-radius:50%; background:var(--yellow); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 20px rgba(14,27,42,.25); padding:0 0 0 4px; }
.how__play:focus-visible { outline:3px solid var(--cyan-ink); outline-offset:3px; }
.how__video.on .how__play { opacity:0; pointer-events:none; }
.how__text h3 { font-size:24px; line-height:1.2; margin:4px 0 8px; letter-spacing:-.01em; }
.how__gives { font-size:17px; line-height:1.5; margin:0 0 14px; color:var(--ink); background:var(--good-bg); border-radius:12px; padding:10px 14px; max-width:none; }
.how__gives b { color:var(--good); margin-right:4px; }
.how__steps { margin:0 0 16px; padding:0; list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:8px; }
.how__steps li { counter-increment:s; position:relative; padding-left:40px; font-size:16px; line-height:1.5; min-height:28px; }
.how__steps li::before { content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background:var(--yellow); color:var(--ink); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.how__try { padding:12px 22px; font-size:15.5px; }
.howmore { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.howmore p { margin:0; }
.faqgrp { margin-block:30px; scroll-margin-top:16px; }
.qa { background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:0 0 8px; }
.qa summary { cursor:pointer; padding:14px 44px 14px 16px; font-weight:700; font-size:16.5px; line-height:1.4; list-style:none; position:relative; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:""; position:absolute; right:16px; top:19px; width:10px; height:10px; border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink); transform:rotate(45deg); transition:transform .2s; }
.qa[open] summary::after { transform:rotate(225deg); top:23px; }
.qa summary:focus-visible { outline:3px solid var(--cyan-ink); outline-offset:-3px; border-radius:12px; }
.qa p { margin:0; padding:0 16px 16px; color:var(--ink-2); max-width:none; }
@media (max-width:640px) {
  .how { grid-template-columns:1fr; gap:16px; }
  .how__video { width:min(100%, 300px); margin:0 auto; }
  .how__text h3 { font-size:22px; }
}
@media (prefers-reduced-motion: reduce) { .qa summary::after { transition:none; } }