/* =========================================
   GET STARTED PAGE
   Loaded only by get-started.html. Builds on the shared
   .demo-page / .demo-form styles in style.css; every rule
   is scoped under .gs-page so no other page is affected.
========================================= */

/* style.css gives .demo-form display:grid, which would otherwise
   override the browser's [hidden] rule and show a hidden form. */
.gs-page [hidden]{
    display:none !important;
}

.gs-page :focus-visible{
    outline:3px solid #2563eb;
    outline-offset:2px;
}

.gs-heading{
    margin-bottom:36px;
}

.gs-heading h1{
    color:#0f172a;
    font-size:40px;
    letter-spacing:-.02em;
    margin-bottom:12px;
}

.gs-heading p{
    line-height:1.6;
}

/* ---------- Plan summary and "no plan" panel ---------- */

.gs-plan,
.gs-plan-missing{
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:24px;
    padding:28px 32px;
    margin-bottom:24px;
}

.gs-plan-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    margin-bottom:10px;
}

.gs-plan h2{
    font-size:16px;
    color:#1e40af;
}

.gs-change-plan{
    color:#2563eb;
    font-weight:600;
    text-decoration:none;
}

.gs-change-plan:hover{
    text-decoration:underline;
}

.gs-plan-name{
    font-size:28px;
    font-weight:800;
    color:#0f172a;
}

.gs-plan-price{
    font-size:20px;
    font-weight:700;
    color:#2563eb;
    margin-top:4px;
}

.gs-plan-note{
    color:#1e40af;
    line-height:1.5;
    margin-top:10px;
}

.gs-plan-missing h2{
    font-size:22px;
    color:#0f172a;
    margin-bottom:10px;
}

.gs-plan-missing p{
    color:#334155;
    line-height:1.6;
    margin-bottom:22px;
}

.gs-plan-missing .btn-primary{
    display:inline-block;
}

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

.gs-notice{
    background:#fffbeb;
    border:1px solid #fcd34d;
    color:#78350f;
    border-radius:12px;
    padding:14px 16px;
    font-weight:700;
    line-height:1.5;
}

.gs-hint{
    color:#64748b;
    font-size:14px;
    line-height:1.5;
}

.gs-form fieldset{
    border:0;
    border-top:1px solid #e2e8f0;
    margin:0;
    padding:22px 0 0;
    min-width:0;
}

/* Floating the legend keeps it inside the fieldset's content box so
   normal spacing applies (legends otherwise sit in the border area). */
.gs-form legend{
    float:left;
    width:100%;
    padding:0;
    margin-bottom:14px;
    font-size:19px;
    font-weight:800;
    color:#0f172a;
}

.gs-form legend + *{
    clear:both;
}

.gs-form fieldset > .gs-hint{
    margin-bottom:14px;
}

.gs-fields{
    display:grid;
    gap:18px;
}

.gs-optional{
    color:#64748b;
    font-weight:500;
}

.gs-form input[aria-invalid="true"]{
    border-color:#dc2626;
    box-shadow:0 0 0 3px rgba(220,38,38,.12);
}

.gs-error-summary{
    color:#b91c1c;
    font-weight:700;
}

/* "Review sample agreements" block above Continue to Agreements.
   The link opens in a new tab so entered details are kept. */
.gs-review{
    border-top:1px solid #e2e8f0;
    padding-top:20px;
    display:grid;
    gap:8px;
    color:#334155;
    line-height:1.55;
}

.gs-review-link{
    color:#2563eb;
    font-weight:700;
    justify-self:start;
}

.gs-form .demo-submit{
    font:inherit;
    font-size:17px;
    font-weight:700;
    margin-top:6px;
}

/* In flight or already submitted: visibly inactive, no hover lift. */
.gs-form .demo-submit:disabled{
    opacity:.65;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* Submission confirmation: shown only after the backend accepted the
   request and returned the same submission reference. */
.gs-status{
    border:1px solid #86efac;
    background:#f0fdf4;
    border-radius:12px;
    padding:16px;
    color:#14532d;
    line-height:1.5;
}

.gs-status strong{
    display:block;
    color:#14532d;
    margin-bottom:4px;
}

.gs-status-reference{
    display:block;
    font-size:14px;
    color:#166534;
    overflow-wrap:anywhere;
}

@media (max-width:600px){
    .gs-page .demo-form-section{
        padding:40px 14px;
    }

    .gs-page .demo-form{
        padding:24px 20px;
    }

    .gs-plan,
    .gs-plan-missing{
        padding:22px 20px;
    }

    .gs-heading h1{
        font-size:32px;
    }
}