/*
 * Free trial sign-up — the public front door at /trial.
 *
 * Spec: plans/specs/Free-Teacher-Trial-Jul-21-26.md §4
 * Approved mock: frontend/_scratch/free-trial-signup-mock.html
 *
 * PUBLIC AND UNAUTHENTICATED. This is the only page a teacher sees before they
 * have an account, so it loads no app chrome and no auth bootstrap.
 *
 * Every rule is gated on `.trial-page` so none of it can leak into the app.
 * Colours come from mainv2.css custom properties with literal fallbacks, because
 * this page must still look right if a variable is ever renamed.
 */

/*
 * Pure white, overriding the #FAFAFA that mainv2.css puts on body. The app's
 * off-white exists to make white cards read as raised panels; this page is a
 * single column with one card, so it reads cleaner flat.
 *
 * The class beats the bare `body` selector on specificity, so no !important.
 */
.trial-page {
    background: var(--bg-primary, #FFFFFF);
}

.trial-page .trial-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 36px 20px 90px;
}

/* ---- Hero ---- */

.trial-page .trial-hero { text-align: center; margin-bottom: 4px; }
.trial-page .trial-hero > img { width: 64px; height: 64px; }

/* Title case, not all caps. The wide tracking that made the uppercase version
   read as a label would look sprayed apart in mixed case, so it comes down with
   it, and the size goes up a little to hold the same visual weight. */
.trial-page .trial-eyebrow {
    color: var(--brand-600, #2F7D32);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .01em;
    margin: 14px 0 6px;
}

.trial-page .trial-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary-900, #111827);
    margin: 0 0 10px;
    line-height: 1.22;
}

.trial-page .trial-sub {
    font-size: 16px;
    color: var(--text-secondary, #4b5563);
    margin: 0 auto 26px;
    max-width: 440px;
    line-height: 1.5;
}

/* ---- The three promises ---- */

.trial-page .trial-points { list-style: none; padding: 0; margin: 0 0 26px; }

/* Each promise is a bold claim with a line of detail under it, so the row aligns
   to the top rather than centring a two-line block against a fixed-height icon. */
.trial-page .trial-points li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 11px 0;
    color: var(--text-primary-900, #374151);
    font-size: 15px;
}

.trial-page .pt-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #EEF6EE;
    color: var(--brand-600, #2F7D32);
}

.trial-page .pt-text { display: block; }

.trial-page .pt-title {
    display: block;
    font-weight: 700;
    color: var(--text-primary-900, #111827);
    line-height: 1.35;
}

.trial-page .pt-desc {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--text-secondary, #4b5563);
    line-height: 1.45;
}

.trial-page .pt-icon svg { width: 21px; height: 21px; display: block; }

/* ---- The card shell, shared by the form and the outcome screens ---- */

.trial-page .trial-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-secondary, #e5e7eb);
    border-radius: 14px;
    padding: 30px 28px;
}

/* ---- Form ---- */

.trial-page .field { margin-bottom: 16px; }

.trial-page .field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary-900, #374151);
    margin-bottom: 6px;
}

.trial-page .field-optional { font-weight: 400; color: #9ca3af; }

.trial-page .field input,
.trial-page .field select {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    border: 2px solid var(--border-secondary, #e5e7eb);
    border-radius: 10px;
    background: #fff;
}

.trial-page .field input:focus,
.trial-page .field select:focus {
    outline: none;
    border-color: var(--brand-600, #2F7D32);
}

.trial-page .field-row { display: flex; gap: 12px; }
.trial-page .field-row .field { flex: 1; }
.trial-page .trial-submit { width: 100%; margin-top: 6px; }

/*
 * Validation lives on the field, not in a summary block at the top. A teacher
 * filling seven inputs needs to be told which one, where it is.
 */
.trial-page .field-error {
    display: none;
    font-size: 13px;
    color: #B42318;
    margin-top: 5px;
}

.trial-page .field.has-error input,
.trial-page .field.has-error select { border-color: #D92D20; }
.trial-page .field.has-error .field-error { display: block; }

/* ---- Footnotes and the escape hatch ---- */

.trial-page .trial-fineprint {
    text-align: center;
    font-size: 13px;
    margin-top: 18px;
    line-height: 1.6;
    color: var(--text-tertiary-600, #6b7280);
}

/* Errors on the connect step: a provider popup that was blocked, or a sign-up
   the server refused. Empty and invisible until there is something to say. */
.trial-page .trial-error {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: #B42318;
}

.trial-page .trial-error:empty { display: none; }

/*
 * The two provider cards were touching (spec §16.10.3). 12px is the product's own
 * spacing for this exact pair: index.html sets `gap: 12px` on the app-body that
 * holds them. The gap lives on this wrapper rather than on
 * `.navigation-card-button`, which is shared with index.html and the invitation
 * flow and must not gain a margin from here.
 */
.trial-page .trial-providers {
    display: grid;
    gap: 12px;
}

.trial-page .trial-alt {
    display: block;
    text-align: center;
    margin-top: 18px;
    width: 100%;
    font-size: 14px;
    color: var(--text-secondary, #4b5563);
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.trial-page .trial-alt:hover { color: var(--brand-600, #2F7D32); }

/* ---- Step switching ---- */

.trial-page .state { display: none; }
.trial-page .state.on { display: block; }

/*
 * Each step takes focus when it appears so a screen reader announces it and a
 * keyboard user carries on from the new content instead of the top of the page.
 * The ring is suppressed because the target is a whole section rather than
 * something you can operate: a blue box drawn around the entire card reads as a
 * selected element. Focus still moves, and it is still announced; only the
 * painted outline goes. Real controls keep their rings.
 */
.trial-page .state:focus { outline: none; }

@media (max-width: 480px) {
    .trial-page .field-row { flex-direction: column; gap: 0; }
    .trial-page .trial-title { font-size: 25px; }
}