/* Update Log */
/* URDS-107	09/22/2026	VV	Styles for the /free-trial enrollment page */

/* Samson One "Brand Blend" palette, from the logo's purple (#40186E) and teal (#48A08E): purple-to-teal gradients on
   the sidebar and the demo box, solid purple for buttons, teal for labels, links and selections (a shade deeper than
   the logo's, #2F7F6F, so it stays readable on white). legal.css uses the same values. */
:root {
    --enroll-purple: #40186E;
    --enroll-purple-dark: #1F0B36;
    --enroll-ink: #2B2340;
    --enroll-muted: #5E6473;
    --enroll-teal: #2F7F6F;
    --enroll-teal-hover: #3A8F7E;
    --enroll-teal-light: #A5D8CC;
    --enroll-button: #40186E;        /* every main button: solid logo purple */
    --enroll-button-hover: #56298C;
    --enroll-bg: #F4F7F8;
    --enroll-border: #D8E2E4;
    --enroll-required: #C94040;
    --enroll-info-bg: #EAF5F2;
    --enroll-font-serif: "Playfair Display", Georgia, serif;
    --enroll-font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Shared radius/shadow scale, so cards, inputs and buttons read as one system. */
    --enroll-radius-sm: .5rem;
    --enroll-radius: .875rem;
    --enroll-radius-lg: 1.25rem;
    --enroll-shadow-card: 0 1px 2px rgba(13, 27, 46, .04), 0 8px 20px -12px rgba(13, 27, 46, .12);
    --enroll-shadow-card-hover: 0 2px 4px rgba(13, 27, 46, .05), 0 14px 28px -14px rgba(13, 27, 46, .16);
}

/* overflow:hidden on both html and body, not just body -- which element the
   viewport scrollbar attaches to is a long-standing browser quirk (depends on
   whether html has its own overflow set), so both are pinned explicitly rather
   than relying on body's alone propagating correctly everywhere. */
html, body { height: 100%; overflow: hidden; }
body {
    margin: 0;
    font-family: var(--enroll-font-sans);
    font-size: .9375rem;
    line-height: 1.55;
    background: var(--enroll-bg);
    color: var(--enroll-ink);
    -webkit-font-smoothing: antialiased;
    /* .enroll-content-body is the one scrollable region (below), so the sidebar
       and step header stay in view the whole time instead of scrolling away with
       the form. */
}

/* App header -- full-width white bar with the Samson One logo (its purple text needs a light background).
   Height stays 52px: the shell below is sized against it. */
.app-header {
    height: 52px;
    background: #fff;
    border-bottom: 1px solid var(--enroll-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
}
.app-header-brand { display: flex; align-items: center; text-decoration: none; }
.app-header-logo { height: 30px; width: auto; display: block; }
.app-header-badge {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--enroll-muted);
}

/* Fixed to exactly the viewport height minus the app header (52px) -- combined
   with body's overflow:hidden above, this is what keeps the sidebar and step
   header fixed in place while only .enroll-content-body scrolls. */
.enroll-shell { display: flex; align-items: stretch; height: calc(100vh - 52px); }

.enroll-sidebar {
    width: 288px;
    flex-shrink: 0;
    background: linear-gradient(165deg, #40186E 0%, #3F4E86 50%, #48A08E 100%);
    color: #fff;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Fully hidden, not auto -- .enroll-content-body is the only region meant to
       ever scroll. overflow-y:auto here was a "safety net" that backfired: it gave
       a second, independent scrollbar for the sidebar whenever its content was
       even slightly taller than the viewport, instead of the one scrollbar the
       form area should have. If the sidebar's content ever doesn't fit a given
       viewport, it should get clipped, not scroll on its own. */
    overflow: hidden;
}
/* Decorative ring, bottom-right corner of the sidebar -- purely ornamental,
   matches the live page's own background flourish. */
.enroll-sidebar::after {
    content: "";
    position: absolute;
    width: 14rem; height: 14rem;
    right: -3.5rem; bottom: -3.5rem;
    border-radius: 50%;
    border: 30px solid rgba(255,255,255,.05);
    pointer-events: none;
}

.enroll-title { font-family: var(--enroll-font-serif); font-size: 1.1rem; margin: 0 0 .25rem; position: relative; }
.enroll-subtitle { font-size: .8rem; color: rgba(255,255,255,.5); margin-bottom: 1.25rem; line-height: 1.5; position: relative; }

.trial-summary {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .75rem;
    padding: .75rem;
    margin-bottom: 1.25rem;
    font-size: .8rem;
    position: relative;
}
.trial-summary-title { text-transform: uppercase; font-size: .625rem; font-weight: 700; letter-spacing: .1em; color: var(--enroll-teal-light); margin-bottom: .5rem; }
.trial-summary-row { display: flex; justify-content: space-between; align-items: center; padding: .15rem 0; }
.trial-summary-row span:first-child { font-size: .69rem; color: rgba(255,255,255,.45); }
.trial-summary-row span:last-child { font-size: .69rem; font-weight: 600; color: rgba(255,255,255,.85); }
.trial-summary-highlight { font-size: .72rem; font-weight: 700; color: #fff; margin: .25rem 0 .2rem; }
.trial-summary-free {
    font-size: .625rem; font-weight: 700; color: #6EE7B7;
    background: rgba(30,123,74,.35); border: 1px solid rgba(30,123,74,.5);
    border-radius: 999px; padding: .1rem .5rem;
}

.enroll-steps { flex: 1; position: relative; display: flex; flex-direction: column; }
.enroll-step { display: flex; gap: .75rem; align-items: flex-start; padding-bottom: 1.25rem; }
.enroll-step:last-child { padding-bottom: 0; }
.enroll-step-track { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.enroll-step-num {
    width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.45);
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.enroll-step-connector { width: 2px; flex: 1; min-height: 1rem; margin-top: .25rem; background: rgba(255,255,255,.13); }
.enroll-step.done .enroll-step-connector { background: rgba(255,255,255,.5); }
.enroll-step.active .enroll-step-num {
    background: #fff; border-color: #fff; color: var(--enroll-purple);
    box-shadow: 0 0 0 5px rgba(255,255,255,.18);
}
.enroll-step.done .enroll-step-num { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); color: var(--enroll-teal); }
/* Digit vs. checkmark inside the sidebar step circle -- both always in the DOM,
   toggled by the .done class so no per-render server-side swap is needed. */
.step-num-check { display: none; }
.enroll-step.done .step-num-digit { display: none; }
.enroll-step.done .step-num-check { display: block; }
.enroll-step-title { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.4); padding-top: .2rem; }
.enroll-step-sub { font-size: .69rem; color: rgba(255,255,255,.3); margin-top: .15rem; line-height: 1.4; }
.enroll-step.active .enroll-step-title { color: #fff; }
.enroll-step.active .enroll-step-sub { color: rgba(255,255,255,.5); }
.enroll-step.done .enroll-step-title { color: rgba(255,255,255,.7); }

.enroll-help { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .69rem; color: rgba(255,255,255,.3); line-height: 1.5; position: relative; }
.enroll-help strong { color: rgba(255,255,255,.5); }
.enroll-help a { color: rgba(255,255,255,.3); }

/* Main content: a white section-header block (title/subtitle) followed by a
   light-blue scroll body holding the form -- mirrors the live page's own
   two-part layout rather than a single undifferentiated column. */
/* min-height: 0 overrides flexbox's default "never shrink below content size" --
   without it, .enroll-content-body's flex:1 below is ignored and it just grows to
   fit the form, pushing the page (not the body) to scroll instead. */
.enroll-content { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.enroll-content-header {
    background: #fff;
    border-bottom: 1px solid var(--enroll-border);
    padding: .75rem 1.75rem;
}
.enroll-step-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--enroll-teal);
    margin-bottom: .1rem;
}
.enroll-content-title {
    font-family: var(--enroll-font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--enroll-purple-dark);
    margin: 0;
}
.enroll-content-subtitle { font-size: .8rem; color: var(--enroll-muted); margin: .15rem 0 0; line-height: 1.5; }

.enroll-content-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.75rem 1.25rem;
}

/* Steps 1-2 and the welcome screen are sibling sections under one URL
   (/free-trial), switched by goToStep(n) in free-trial.js. */
.step-section { display: none; }
.step-section.active { display: block; }

/* Footer bar (Back / progress / Continue): a full-width white bar below .enroll-content-body (outside the scrolling
   area, so the scrollbar stops above it). Only the current step's bar is shown -- goToStep() sets .active. */
.step-footer {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-top: 1px solid var(--enroll-border);
    box-shadow: 0 -6px 16px rgba(13, 27, 46, .08);
    padding: .75rem 1.75rem;
    position: relative;
    z-index: 10;
}
.step-footer.active { display: flex; }
.step-footer-label { font-size: .75rem; font-weight: 500; color: var(--enroll-muted); margin-bottom: .4rem; }
.step-progress-track { width: 9rem; height: 2px; background: var(--enroll-border); border-radius: 999px; overflow: hidden; }
.step-progress-fill { height: 100%; background: var(--enroll-teal); border-radius: 999px; }

.required-asterisk, .text-danger { color: var(--enroll-required); }

/* Card structure (2026-09-21 visual pass) -- each logical group of fields
   (Personal Information, Role, Address, ...) now sits in its own bordered white
   card against .enroll-content-body's light-blue background, instead of being
   separated only by a hairline divider above each label. Same palette, just a
   clearer visual unit per section -- easier to scan, and each card reads as one
   self-contained question instead of the whole form being one continuous column. */
.form-card {
    background: #fff;
    border: 1px solid var(--enroll-border);
    border-radius: .75rem;
    padding: 1.05rem 1.25rem;
    margin-bottom: .85rem;
    box-shadow: var(--enroll-shadow-card);
}
.form-card:last-child { margin-bottom: 0; }
.form-card > *:last-child { margin-bottom: 0; }

.enroll-section-label {
    text-transform: uppercase;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--enroll-teal);
    margin: 0 0 .7rem;
}
/* Tighter spacing between the fields inside a card. */
.form-card .row.g-3 { --bs-gutter-y: .75rem; --bs-gutter-x: 1rem; }

/* Inputs/selects -- rounded, light-blue border, blue focus ring. */
.form-label { font-size: .78rem; font-weight: 600; color: var(--enroll-ink); margin-bottom: .25rem; }
.form-control, .form-select {
    border: 1.5px solid var(--enroll-border);
    border-radius: var(--enroll-radius-sm);
    font-size: .85rem;
    padding: .42rem .7rem;
    color: var(--enroll-purple-dark);
}
.form-control:focus, .form-select:focus {
    border-color: var(--enroll-teal);
    box-shadow: 0 0 0 .2rem rgba(47, 127, 111, .12);
}
.form-text { font-size: .72rem; color: var(--enroll-muted); margin-top: .25rem; }

.form-check.border { border-color: var(--enroll-border) !important; border-radius: var(--enroll-radius-sm); }
.form-check.border:hover { border-color: var(--enroll-teal-light) !important; background: var(--enroll-info-bg); }

/* Option cards -- the whole label is the clickable target with an inline
   native radio/checkbox, matching the live page's Role/Billing Type/Insurance
   Processing selectors (as opposed to Bootstrap's default form-check layout,
   which put the input and label out of alignment at this box width). */
.option-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .8rem;
    border: 1.5px solid var(--enroll-border);
    border-radius: var(--enroll-radius-sm);
    cursor: pointer;
    user-select: none;
    font-size: .85rem;
    font-weight: 500;
    color: var(--enroll-ink);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.option-card:hover { border-color: var(--enroll-teal-hover); background: var(--enroll-info-bg); }
.option-card-icon { flex-shrink: 0; color: var(--enroll-teal); }

.option-card.selected {
    border-color: var(--enroll-teal);
    background: var(--enroll-info-bg);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(47, 127, 111, .12);
}
.option-card input[type="radio"], .option-card input[type="checkbox"] {
    accent-color: var(--enroll-teal);
    width: .875rem;
    height: .875rem;
    flex-shrink: 0;
    margin: 0;
}

/* Field errors (shown after "Create Account & Verify" / "Activate Trial" is clicked, and for bad formats as typed):
   red border only, without Bootstrap's warning icon. */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--enroll-required);
    background-image: none;
    padding-right: .75rem;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    border-color: var(--enroll-required);
    box-shadow: 0 0 0 .2rem rgba(201, 64, 64, .12);
}
.option-card.is-invalid { border-color: var(--enroll-required); }
.form-check-input.is-invalid { border-color: var(--enroll-required); }
.form-check-input.is-invalid ~ .form-check-label { color: inherit; }
.field-validation-error { display: block; font-size: .75rem; margin-top: .25rem; }

/* Info banner -- matches the live page's notices (Step 2's "included features" note). */
.info-banner {
    background: var(--enroll-info-bg);
    border: 1px solid var(--enroll-teal-light);
    border-radius: var(--enroll-radius-sm);
    padding: .65rem .85rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--enroll-muted);
}

/* Step 2's "Activate Trial" button -- the same solid purple as every other main button. */
.btn-submit-trial { background-color: var(--enroll-button); border-color: var(--enroll-button); color: #fff; font-weight: 600; }
.btn-submit-trial:hover, .btn-submit-trial:focus { background-color: var(--enroll-button-hover); border-color: var(--enroll-button-hover); color: #fff; }

/* OTP verification modal (Step 1's "Create Account & Verify"). */
.otp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 46, .55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.otp-modal {
    background: #fff;
    border-radius: var(--enroll-radius-lg);
    padding: 2.25rem 2.25rem 2rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(64, 24, 110, .25);
}
/* Icon sits in a soft blue circle badge rather than bare on the white card --
   matches the confirmation screen's icon treatment for a consistent "milestone
   moment" feel across both. */
.otp-modal-icon-badge {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: var(--enroll-info-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.otp-modal-icon { width: 26px; height: 26px; color: var(--enroll-teal); }
.otp-modal-title { font-family: var(--enroll-font-serif); font-size: 1.45rem; font-weight: 700; color: var(--enroll-purple-dark); margin: 0 0 .6rem; }
.otp-modal-desc { font-size: .875rem; color: var(--enroll-muted); margin-bottom: 1.5rem; line-height: 1.6; }
.otp-modal-desc strong { color: var(--enroll-ink); }
.otp-edit-contact { font-size: .8rem; margin: -1rem 0 1.25rem; }
.otp-edit-contact a { color: var(--enroll-teal); font-weight: 600; text-decoration: none; }
.otp-edit-contact a:hover { text-decoration: underline; }
.otp-digit-row { display: flex; justify-content: center; gap: .55rem; margin-bottom: 1.25rem; }
.otp-digit {
    width: 2.85rem;
    height: 3.25rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--enroll-purple-dark);
    border: 1.5px solid var(--enroll-border);
    border-radius: var(--enroll-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.otp-digit:focus { outline: none; border-color: var(--enroll-teal); box-shadow: 0 0 0 .2rem rgba(47, 127, 111, .14); }
.otp-resend { font-size: .8rem; color: var(--enroll-muted); margin-bottom: 1.5rem; }
.otp-resend a { color: var(--enroll-teal); font-weight: 600; text-decoration: none; }
.otp-resend a:hover { text-decoration: underline; }
.otp-verify-btn { width: 100%; padding: .65rem; font-size: .9375rem; }

/* Error message box -- the OTP modal's card with a soft red badge. */
.message-modal-badge { background: #FBEAEA; }
.message-modal-badge .otp-modal-icon { color: var(--enroll-required); }

/* Encounters-per-month pills -- a hidden radio behind a pill-shaped label,
   matches the live page's rounded-full buttons (no visible radio dot). */
.encounter-pill {
    display: inline-block;
    padding: .35rem 1rem;
    border: 1.5px solid var(--enroll-border);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--enroll-muted);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, color .15s, background .15s;
}
.encounter-pill:hover { border-color: var(--enroll-teal-hover); color: var(--enroll-teal); }
.encounter-pill.selected { border-color: var(--enroll-teal); color: var(--enroll-teal); background: var(--enroll-info-bg); }
.encounter-pill-input { position: absolute; opacity: 0; pointer-events: none; }

/* Step 2 cards -- included trial features (disabled, pre-checked) and the
   read-only "Services Available When You Upgrade" list. */
.feature-card {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border: 1.5px solid var(--enroll-teal);
    background: var(--enroll-info-bg);
    border-radius: var(--enroll-radius-sm);
    padding: .75rem .85rem;
}
.feature-card input { accent-color: var(--enroll-teal); margin-top: .2rem; flex-shrink: 0; }
.service-card {
    height: 100%;
    border: 1.5px solid var(--enroll-border);
    border-radius: var(--enroll-radius-sm);
    background: #fff;
    padding: .75rem .85rem;
}
.service-card .option-title, .service-card .option-desc { color: #000; }
.option-title { font-size: .78rem; font-weight: 600; color: var(--enroll-ink); }
.option-desc { font-size: .72rem; color: var(--enroll-muted); margin-top: .2rem; line-height: 1.45; }
.badge-included {
    margin-left: .25rem; font-size: .625rem; font-weight: 700;
    padding: .05rem .45rem; border-radius: 999px;
    background: #D1FAE5; color: #065F46;
}

/* Reveal panel -- the sub-panel that appears under Lab Integration / Data
   Migration when "Yes" is selected. Was a boxed light-blue callout (2026-09-21
   card-structure pass made every .form-card white, which left this the one
   thing still looking like a separate alert instead of part of the same card)
   -- now just a divided continuation of the card it's already inside. */
.reveal-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--enroll-border);
}
.reveal-panel-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--enroll-teal);
    margin-bottom: .75rem;
}
/* Second-level reveal (the EHR name under "From another EHR"). */
.reveal-subpanel {
    display: none;
    margin-top: .75rem;
    padding-left: .85rem;
    border-left: 3px solid var(--enroll-teal-light);
}

.success-banner {
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: var(--enroll-radius-sm);
    padding: .75rem .85rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--enroll-muted);
}

/* Buttons -- primary blue matching the live page's "Create Account & Verify". */
.btn { font-weight: 600; border-radius: var(--enroll-radius-sm); padding: .5rem 1.1rem; font-size: .875rem; }
.btn-primary {
    background-color: var(--enroll-button);
    border-color: var(--enroll-button);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--enroll-button-hover);
    border-color: var(--enroll-button-hover);
}
.btn-outline-secondary {
    color: var(--enroll-muted);
    border-color: var(--enroll-border);
    font-weight: 500;
}
.btn-outline-secondary:hover {
    background-color: var(--enroll-bg);
    border-color: var(--enroll-border);
    color: var(--enroll-ink);
}

/* Post-submit welcome screen (Step 4) -- welcome copy, support contact, three key
   facts, and the "Schedule a Demo" call to action, centered in the content area. */
.confirmation-screen {
    max-width: 520px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.confirmation-icon { font-size: 3.25rem; line-height: 1; margin-bottom: .5rem; }
.confirmation-title {
    font-family: var(--enroll-font-serif);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--enroll-teal);
    margin: 0 0 1rem;
}
.confirmation-body {
    font-size: .9375rem;
    color: var(--enroll-muted);
    line-height: 1.65;
    margin: 0 0 .75rem;
}
.confirmation-help {
    width: 100%;
    margin-top: .5rem;
    padding: .9rem 1.1rem;
    background: #fff;
    border: 1px solid var(--enroll-border);
    border-radius: var(--enroll-radius-sm);
}
.confirmation-help-title { font-size: .88rem; font-weight: 700; color: var(--enroll-purple-dark); margin-bottom: .25rem; }
.confirmation-help-text { font-size: .76rem; color: var(--enroll-muted); line-height: 1.55; margin-bottom: .5rem; }
.confirmation-help-contact { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; font-size: .8rem; font-weight: 600; color: var(--enroll-ink); }
.confirmation-help-contact a { color: var(--enroll-teal); text-decoration: none; }
.confirmation-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    width: 100%;
    margin: 1.25rem 0 0;
    text-align: left;
}
.confirmation-card {
    background: var(--enroll-info-bg);
    border: 1px solid var(--enroll-teal-light);
    border-radius: var(--enroll-radius-sm);
    padding: .65rem .75rem;
}
.confirmation-card-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--enroll-teal);
    margin-bottom: .15rem;
}
.confirmation-card-value { font-size: .82rem; font-weight: 600; color: var(--enroll-purple-dark); }

/* "See Samson One in action" call to action with a gently pulsing glow. */
.demo-cta {
    width: 100%;
    margin-top: 1.4rem;
    padding: 1.4rem 1.5rem;
    border-radius: var(--enroll-radius);
    background: linear-gradient(120deg, #40186E 0%, #3F4E86 55%, #48A08E 100%);
    animation: demo-glow 2.4s ease-in-out infinite;
}
.demo-badge {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: #FFD166;
    color: var(--enroll-purple);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.demo-title { font-family: var(--enroll-font-serif); font-size: 1.35rem; color: #fff; margin-bottom: .4rem; }
.demo-sub { font-size: .8rem; color: rgba(255,255,255,.85); line-height: 1.55; }
.demo-btn {
    display: block;
    margin-top: 1rem;
    padding: .8rem;
    border-radius: var(--enroll-radius-sm);
    background: #fff;
    color: var(--enroll-purple);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transition: transform .2s, box-shadow .2s;
}
.demo-btn:hover { color: var(--enroll-purple); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.confirmation-restart { margin-top: 1.25rem; padding: .5rem 1.4rem; text-decoration: none; }
@keyframes demo-glow {
    0%, 100% { box-shadow: 0 10px 30px rgba(58, 143, 126, .28); }
    50% { box-shadow: 0 10px 40px rgba(58, 143, 126, .50); }
}

/* ---- Tablet and phone (below 992px): the side-by-side "app shell" above becomes one normally scrolling page ----
   The sidebar turns into a compact band above the form (title, trial summary, the two steps side by side, help email),
   the page itself scrolls instead of .enroll-content-body, and the Back/Continue bar sticks to the bottom of the screen. */
@media (max-width: 991.98px) {
    html, body { height: auto; overflow: visible; }
    /* Fields scrolled into view (errors, the field the keyboard would cover) stop clear of the two fixed bars. */
    html { scroll-padding-top: 64px; scroll-padding-bottom: 120px; }
    /* The logo bar stays at the top while the page scrolls, matching the button bar fixed at the bottom. */
    .app-header { padding: 0 1.25rem; position: sticky; top: 0; z-index: 20; }

    .enroll-shell { display: block; height: auto; }
    .enroll-sidebar { width: auto; padding: 1.25rem 1.25rem 1rem; overflow: visible; }
    .enroll-sidebar::after { display: none; }
    .enroll-subtitle { margin-bottom: .9rem; }

    /* Trial summary as one row of facts instead of a stacked list. */
    .trial-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin-bottom: 1rem; }
    .trial-summary-title { flex-basis: 100%; margin-bottom: 0; }
    .trial-summary-row { gap: .5rem; padding: 0; }
    .trial-summary-highlight { flex-basis: 100%; margin: 0; }

    /* The two steps side by side; the vertical connector line is only meaningful in the tall sidebar. */
    .enroll-steps { flex-direction: row; gap: 1.5rem; }
    .enroll-step { flex: 1; padding-bottom: 0; }
    .enroll-step-connector { display: none; }

    .enroll-help { margin-top: 1rem; padding-top: .75rem; }
    .enroll-help br { display: none; }
    .enroll-help strong { margin-right: .35rem; }

    .enroll-content { display: block; }
    .enroll-content-header { padding: .75rem 1.25rem; }
    .enroll-content-body { overflow: visible; padding: 1rem 1.25rem 1.5rem; }
    /* The whole page scrolls here, so the bar sticks to the bottom of the screen instead. */
    .step-footer { position: sticky; bottom: 0; padding: .75rem 1.25rem; }
}

/* ---- Phone (below 576px) ---- */
@media (max-width: 575.98px) {
    .app-header { padding: 0 1rem; }
    .app-header-logo { height: 26px; }
    .app-header-badge { font-size: .6rem; letter-spacing: .08em; }

    .enroll-sidebar { padding: 1rem 1rem .85rem; }
    .enroll-subtitle { display: none; }
    .trial-summary { padding: .6rem .75rem; gap: .25rem 1rem; }
    .enroll-step-sub { display: none; }
    .enroll-step-title { padding-top: .35rem; }

    .enroll-content-header { padding: .7rem 1rem; }
    .enroll-content-title { font-size: 1.1rem; }
    .enroll-content-body { padding: .85rem .75rem 1.25rem; }
    .form-card { padding: .95rem .9rem; margin-bottom: .7rem; }

    /* 16px text in fields stops iPhones from zooming in when a field is tapped. */
    .form-control, .form-select { font-size: 1rem; }

    /* Footer: progress text on top, then full-width button(s). */
    .step-footer { flex-direction: column; align-items: stretch; gap: .6rem; padding: .7rem 1rem; }
    .step-footer .step-progress-track { width: 100%; }
    .step-footer .btn { width: 100%; padding-top: .65rem; padding-bottom: .65rem; }
    .step-footer .d-flex .btn { flex: 1; }

    /* OTP / message boxes: less padding and slightly smaller digit boxes so all six fit on narrow phones. */
    .otp-modal { padding: 1.75rem 1.25rem 1.5rem; }
    .otp-modal-title { font-size: 1.3rem; }
    .otp-digit-row { gap: .4rem; }
    .otp-digit { width: 2.5rem; height: 3rem; font-size: 1.25rem; }
    .otp-edit-contact { display: flex; flex-direction: column; gap: .25rem; }

    /* Welcome screen. */
    .confirmation-screen { margin: 1rem auto; }
    .confirmation-title { font-size: 1.5rem; }
    .confirmation-cards { grid-template-columns: 1fr; }
    .demo-cta { padding: 1.2rem 1.1rem; }
}