/* ── Page help: the question mark beside a heading, and its pop-up ───────────
   templates/_page_help.html. Used on Log in, Create account, Forgot password
   and Contact (Humera, 3 Oct 2026). Those four pages each carry their own
   button and reset rules, so the selectors here name the element too. */
.page-help-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
button.page-help-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1.5px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
    color: #475569;
    font: 600 13px/1 'DM Sans', Arial, sans-serif;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
}
button.page-help-btn:hover,
button.page-help-btn:focus-visible {
    border-color: #1a1a2e;
    color: #1a1a2e;
    background: #fff;
}
dialog.page-help {
    position: fixed;
    inset: 0;
    margin: auto;
    width: calc(100vw - 40px);
    max-width: 440px;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 24px 26px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #334155;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    font-family: 'DM Sans', Arial, sans-serif;
    text-align: left;
}
dialog.page-help::backdrop {
    background: rgba(15, 23, 42, 0.38);
}
dialog.page-help h2 {
    margin: 0 0 12px;
    color: #1a1a2e;
    font: 700 17px/1.3 'DM Sans', Arial, sans-serif;
}
dialog.page-help p {
    margin: 0 0 10px;
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}
dialog.page-help ul {
    margin: 0 0 12px 18px;
    padding: 0;
    list-style: disc;
}
dialog.page-help li {
    margin: 0 0 6px;
    color: #475569;
    font-size: 14px;
    line-height: 1.55;
}
dialog.page-help button.page-help-close {
    display: block;
    width: auto;
    margin: 8px 0 0 auto;
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    background: #1a1a2e;
    color: #fff;
    font: 600 13px 'DM Sans', Arial, sans-serif;
    cursor: pointer;
}

/* ── Page words: "Good to know", a light bulb row that opens in place ────────
   templates/_page_words.html (Humera, 4 Oct 2026). Sits inside the page's own
   box, under its last line. Closed it is one quiet row; a click opens it and
   the box (and the page) grows to fit. No pop-up, no script. */
details.page-words {
    margin: 22px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #e2e8f0;
    font-family: 'DM Sans', Arial, sans-serif;
    text-align: left;
    color: #475569;
}
details.page-words > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
    color: #1a1a2e;
    font: 600 14px/1.3 'DM Sans', Arial, sans-serif;
}
details.page-words > summary::-webkit-details-marker { display: none; }
details.page-words > summary::after {
    content: '+';
    margin-left: auto;
    color: #64748b;
    font: 400 18px/1 Arial, sans-serif;
}
details.page-words[open] > summary::after { content: '\2212'; }
details.page-words > summary:hover,
details.page-words > summary:focus-visible { color: #2e75b6; }
details.page-words .page-words-bulb {
    flex: 0 0 auto;
    color: #f0a500;
}
details.page-words .page-words-body { padding: 12px 0 2px; }
details.page-words .page-words-body p {
    margin: 0 0 10px;
    color: #475569;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.65;
    text-align: left;
}
details.page-words .page-words-body ul {
    margin: 0 0 10px 18px;
    padding: 0;
    list-style: disc;
}
details.page-words .page-words-body li {
    margin: 0 0 6px;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: left;
}
details.page-words .page-words-body a { color: #2e75b6; }

/* ── Pop-up: a second heading inside it (Create account, 4 Oct 2026) ───────── */
dialog.page-help h3 {
    margin: 16px 0 8px;
    color: #1a1a2e;
    font: 700 15px/1.3 'DM Sans', Arial, sans-serif;
}

/* ── How it works: questions that open on a click of their question mark ────
   templates/landing.html (Humera, 4 Oct 2026). */
details.faq-more > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    cursor: pointer;
}
details.faq-more > summary::-webkit-details-marker { display: none; }
details.faq-more > summary h3 { margin: 0; }
details.faq-more .faq-more-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid #94a3b8;
    border-radius: 50%;
    color: #475569;
    font: 600 13px/1 'DM Sans', Arial, sans-serif;
}
details.faq-more[open] .faq-more-mark,
details.faq-more > summary:hover .faq-more-mark {
    border-color: #f0a500;
    color: #1a1a2e;
}
details.faq-more > p { margin-top: 10px; }

/* ── Page note: the short block at the very bottom of a page ─────────────────
   Homepage and Try It Free (Humera, 3 Oct 2026): "anything else that you need
   to add ... put them at the bottom ... a bit of space below the last line of
   content that exists on the page." */
.page-note {
    max-width: 680px;
    margin: clamp(28px, 7vh, 72px) auto 24px;
    text-align: center;
}
.page-note .page-note-heading,
.final-cta .page-note .page-note-heading {
    margin: 0 0 8px;
    color: #475569;
    font: 600 15px/1.4 'DM Sans', Arial, sans-serif;
}
.page-note .page-note-text,
.final-cta .page-note .page-note-text {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}