/* Cloudflare Turnstile, the bot gate in front of the account-creating forms.
 *
 * Its own component sheet rather than a page one, because two forms carry it
 * now (/free-hr-software/signup and the SignupFlow touchpoints) and the rest
 * can be switched on from configuration. Prefixed qcf- (Cloudflare) like every
 * other sheet here keeps its own prefix, so nothing leaks onto a page that did
 * not ask for it. NOT qts- — pages/talk-to-sales.css already owns that one, and
 * while .qts and .qts-card never actually collide, two sheets sharing a prefix
 * is how the next pair of rules quietly does.
 *
 * Nothing here reaches inside the widget: Cloudflare serves it in an iframe and
 * owns every pixel of it. What this file controls is the frame around it and
 * the space it occupies. */

/* The last thing between the form and the button, so it is dressed as a sibling
   of the consent box directly above it rather than as a stray third-party card:
   same tint, border, radius and rhythm. The two read as a pair of
   confirmations, which is what they are. */
.qcf {
    margin-top: 12px;
    padding: 12px 15px 13px;
    border-radius: 14px;
    background: #faf9fe;
    border: 1px solid #ece9f8;
    transition: background-color .18s ease, border-color .18s ease;
}

.qcf__head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}

.qcf__ic {
    display: inline-flex;
    flex: none;
    width: 15px;
    height: 15px;
    color: #7c3aed;
}

.qcf__ic svg { width: 100%; height: 100%; }

/* Matches .qfs-label by value rather than by borrowing the class: this heads a
   block, not a labelled input, and it has to look the same on forms dressed by
   entirely different stylesheets. */
.qcf__t {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .005em;
    color: #3f3d56;
}

/* Reserving the height is what stops the Continue button jumping down the page
   when the widget finishes loading a moment after the form paints — the single
   most noticeable thing a third-party embed does to a layout. 65px is the
   widget's height at the sizes this form uses.

   Deliberately a BLOCK, not a flex container. It does not matter at the fixed
   sizes, but Turnstile's size:flexible measures the element it is rendered
   into, and as a flex item that element shrinks to its own content — so a
   widget asked to be flexible gets handed 300px anyway. Measured when this was
   flex: 725px box, 300px widget. Leave it a block so switching Size back to
   flexible works. */
.qcf__box { min-height: 65px; }

/* Nothing to reserve space for. Cloudflare's script never ran — blocked, or
   the network filtered it — so the div is still literally empty and the height
   above would hold open a gap the widget is never going to fill, under a
   message explaining that it is not coming. */
.qcf__box:empty { min-height: 0; }

/* Left, not centred. The widget keeps Cloudflare's own size rather than being
   stretched across the form, so it needs an edge to sit against — and that edge
   is the one the heading above it and the hint below it already start from.
   Centring a 300px badge inside a 700px block leaves it floating between two
   columns of nothing. */
.qcf__box > * { margin-inline: 0; }

/* Capped to what Cloudflare actually draws at each size, because the embed does
   NOT hold itself to it: their testing widget is width:100% and fills whatever
   box it is handed, which is how a widget asked for 'normal' came back 813px
   wide. The modifier comes from Signup:Turnstile:Size, so the cap and the size
   requested of Cloudflare can never drift apart.

   flexible gets no cap on purpose — filling the line is the whole point of it. */
.qcf__box--normal { max-width: 300px; }
.qcf__box--compact { max-width: 150px; }

/* The two lines under the widget. Stated in full rather than leaning on a page
   sheet's .qfs-err, because this component appears on forms styled by different
   stylesheets and has to read identically on all of them. */
.qcf__hint,
.qcf__err {
    display: block;
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.55;
}

.qcf__hint { color: #7b7a92; }

.qcf__err {
    font-weight: 600;
    color: #e11d48;
}

/* The whole block answers for the failure, not just the line of text under it —
   the widget above is the thing that went wrong, and a red sentence beneath an
   otherwise calm box reads as a footnote rather than as the state of the
   control. */
.qcf--error {
    background: #fff6f8;
    border-color: #fbd0da;
}

.qcf--error .qcf__ic { color: #e11d48; }