/* The security check that stands in front of a gated page.
 *
 * Prefixed qgate- like every other sheet here carries its own prefix, so nothing
 * leaks onto a page that did not ask for it. NOT qh- (home) and NOT qcf-
 * (components/turnstile.css) — the widget block on this page IS a .qcf and is
 * dressed by that sheet, which is the point: one component, one set of rules,
 * and this file only owns the room it sits in.
 *
 * Deliberately quiet. This is a doorway, not a landing page: the visitor is a
 * second away from the site and the design's job is to look unmistakably like
 * QHRM while asking for nothing. Same violet, same radii, same card language as
 * the signup and lead forms. */

.qgate {
    /* The page's only content, so it owns the viewport. min-height rather than
       height: on a short phone in landscape the card must be allowed to push the
       page taller and scroll, not be clipped. */
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Comfortable on a phone, generous on a desktop, and safe-area aware for a
       notched device in landscape. */
    padding: 48px max(18px, env(safe-area-inset-left)) 64px max(18px, env(safe-area-inset-right));
    background:
        radial-gradient(1100px 460px at 50% -8%, #f4f1fe 0%, rgba(244, 241, 254, 0) 62%),
        #ffffff;
}

.qgate__card {
    width: 100%;
    /* Narrow on purpose. The widget is 300px and the text is two short
       paragraphs; a wider card would leave the check floating in whitespace. */
    max-width: 520px;
    padding: 34px 30px 30px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #ece9f8;
    box-shadow: 0 18px 44px rgba(63, 61, 86, .08);
    text-align: left;
}

.qgate__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 13px;
    color: #7c3aed;
    background: #f4f1fe;
}

.qgate__mark svg { width: 23px; height: 23px; }

/* Stated in full rather than borrowing a heading class from the Tailwind bundle:
   that bundle is an artefact of the old Next.js build and only carries the
   utilities that site happened to use, so a utility this page needs but that
   site never used would silently do nothing. */
.qgate__title {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.012em;
    color: #241f47;
}

.qgate__lede {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #6b6a83;
}

/* Refusals and the "try again" states. Reads as the state of the card, not as a
   footnote under it — the same reasoning as .qcf--error in the widget sheet. */
.qgate__alert {
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
    color: #b4123c;
    background: #fff6f8;
    border: 1px solid #fbd0da;
}

.qgate__alert a { color: inherit; text-decoration: underline; }

.qgate__form { margin: 0; }

/* The widget block on this page has no heading above it — the card's own title
   and lede have already said what it is, and repeating "Security check" inside
   the card would be the third time in four lines. */
.qgate .qcf { margin-top: 0; }

.qgate .qcf__hint--bad {
    color: #b4123c;
    font-weight: 600;
}

/* Normally hidden: the check submits itself the moment Cloudflare clears the
   visitor, so there is nothing to press. It is revealed by js/human-check.js only
   when the automatic path did not happen, because a visitor looking at a solved
   check with no way forward is the one state this page must never reach. */
.qgate__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: #7c3aed;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}

.qgate__go:hover { background: #6d28d9; }
.qgate__go:active { transform: translateY(1px); }

.qgate__go:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 3px;
}

/* [hidden] loses to the display above on specificity alone, so the attribute
   would be ignored and the button would always show. */
.qgate__go[hidden] { display: none; }

.qgate__foot {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid #f1eefb;
    font-size: 12px;
    line-height: 1.6;
    color: #8a889e;
}

.qgate__foot a { color: #7c3aed; text-decoration: underline; }

.qgate__host {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #5b5875;
}

/* Phones. The card loses its inset and its border-radius softens rather than
   floating a rounded box inside a near-identical background — at 360px the
   margins are what is scarce, not the decoration. */
@media (max-width: 520px) {
    .qgate {
        /* Top-aligned, not centred. On a short phone the card is taller than the
           space between the header and the fold, and centring a too-tall box
           pushes its top edge off screen — measured at 375x667, where the shield
           and the first line of the heading sat 4px above the viewport. Aligning
           to the start means the card always begins where the visitor is
           already looking, and the page scrolls for the rest. */
        align-items: flex-start;
        min-height: 0;
        padding: 28px 14px 44px;
    }

    .qgate__card {
        padding: 26px 20px 22px;
        border-radius: 16px;
        box-shadow: 0 12px 30px rgba(63, 61, 86, .07);
    }

    .qgate__title { font-size: 21px; }
    .qgate__lede { font-size: 14px; }
}

/* The widget is a fixed 300px and cannot shrink — Cloudflare owns everything
   inside the iframe. Below that, the box scrolls itself rather than pushing the
   card wider than the screen, which is what would otherwise put a horizontal
   scrollbar on the site's front door. */
@media (max-width: 340px) {
    .qgate .qcf__box {
        overflow-x: auto;
    }
}

/* Respect a reduced-motion preference: the only motion here is the button's
   press, and there is no reason to insist on it. */
@media (prefers-reduced-motion: reduce) {
    .qgate__go { transition: none; }
    .qgate__go:active { transform: none; }
}