/* Cleaner Registration Page
   ==========================================================================
   Rebuilt on the css/rc.css token set so this page matches the public site.
   It previously ran on styles.css alone, whose --color-primary is a teal
   (#0d9488) with no relationship to the ReadyClean forest — a cleaner arriving
   from the homepage landed on what looked like a different company.

   House rules, same as css/rc.css and css/home.css:
     - No raw hex outside the brand colours; everything is a var(--rc-*).
     - Mobile-first. min-width queries only, and only at 640 / 1024 / 1280.
     - Anything tappable is at least var(--rc-tap) tall.
   ========================================================================== */

.cr-main { min-height: 100vh; background: var(--rc-cream); }

/* ---------- hero ---------- */

.cr-hero {
    background: var(--rc-forest);
    color: var(--rc-ink-inverse);
    padding: var(--rc-section-y) 0;
}
.cr-hero-layout { text-align: left; }

.cr-hero-title {
    font-family: var(--rc-font-display);
    font-size: var(--rc-text-3xl);
    font-weight: 400;
    line-height: 1.1;
    color: var(--rc-ink-inverse);
    margin: 0 0 var(--rc-space-4);
}

.cr-hero-subtitle {
    font-size: var(--rc-text-lg);
    color: var(--rc-ink-inverse-muted);
    max-width: var(--rc-measure);
    line-height: 1.6;
    margin: 0 0 var(--rc-space-6);
}

.cr-value-highlight { color: var(--rc-sage); }

.cr-value-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-2);
    padding: var(--rc-space-2) var(--rc-space-4);
    border-radius: var(--rc-radius-pill);
    background: rgba(216, 205, 184, 0.12);
    border: 1px solid var(--rc-line-inverse);
    font-size: var(--rc-text-sm);
    font-weight: 600;
    margin-bottom: var(--rc-space-5);
}

.cr-badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rc-sage);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.cr-value-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-3);
    margin-bottom: var(--rc-space-6);
}

.cr-value-benefit {
    display: flex;
    align-items: center;
    gap: var(--rc-space-3);
    font-size: var(--rc-text-base);
}

.cr-value-benefit svg { color: var(--rc-sage); flex-shrink: 0; }

.cr-value-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rc-space-4);
    padding: var(--rc-space-5) 0;
    border-top: 1px solid var(--rc-line-inverse);
    border-bottom: 1px solid var(--rc-line-inverse);
    margin-bottom: var(--rc-space-5);
}

.cr-value-stat-title {
    font-family: var(--rc-font-display);
    font-size: var(--rc-text-xl);
    font-weight: 600;
    color: var(--rc-ink-inverse);
    margin: 0 0 var(--rc-space-1);
}

.cr-value-stat-desc {
    font-size: var(--rc-text-xs);
    color: var(--rc-ink-inverse-subtle);
    margin: 0;
}

.cr-value-areas-label {
    font-size: var(--rc-text-sm);
    font-weight: 600;
    color: var(--rc-ink-inverse-muted);
    margin: 0 0 var(--rc-space-1);
}

.cr-value-areas-list {
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-inverse-subtle);
    line-height: 1.5;
    max-width: var(--rc-measure);
    margin: 0;
}

/* ---------- "we're not a lead site" comparison ---------- */

.cr-compare { padding: var(--rc-section-y) 0; background: var(--rc-surface); }

.cr-section-title {
    font-family: var(--rc-font-display);
    font-size: var(--rc-text-2xl);
    font-weight: 400;
    color: var(--rc-ink);
    margin: 0 0 var(--rc-space-5);
}

/* The table is the whole argument, so it must stay readable on a phone.
   Android Chrome widens the LAYOUT viewport to fit wide content — the entire
   page then pans sideways. Keeping the overflow on this wrapper, and letting
   cells wrap by default, stops that at the source. */
.cr-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cr-compare__table td:first-child,
.cr-compare__table th.cr-compare__feature-head { color: var(--rc-ink-muted); }
.cr-compare__us { background: var(--rc-cream); color: var(--rc-ink); font-weight: 600; }

.cr-compare__logo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: var(--rc-space-2);
    font-family: var(--rc-font-display);
    font-weight: 600;
}
.cr-compare__logo-r { color: var(--rc-forest); }
.cr-compare__logo-c { color: var(--rc-sage); }

@media (min-width: 640px) {
    .cr-compare__table { min-width: 560px; }
}

/* ---------- how it works ---------- */

.cr-how { padding: var(--rc-section-y) 0; }

.cr-how-steps {
    list-style: none;
    counter-reset: crstep;
    padding: 0;
    margin: 0 0 var(--rc-space-6);
    display: grid;
    gap: var(--rc-space-5);
}
.cr-how-steps li {
    counter-increment: crstep;
    padding-left: var(--rc-space-7);
    position: relative;
}
.cr-how-steps li::before {
    content: counter(crstep);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--rc-space-6);
    height: var(--rc-space-6);
    display: grid;
    place-items: center;
    background: var(--rc-forest);
    color: var(--rc-ink-inverse);
    border-radius: var(--rc-radius-pill);
    font-size: var(--rc-text-sm);
}
.cr-how-steps strong {
    display: block;
    color: var(--rc-ink);
    margin-bottom: var(--rc-space-1);
}
.cr-how-steps span {
    color: var(--rc-ink-muted);
    font-size: var(--rc-text-sm);
}

.cr-selfemployed {
    color: var(--rc-ink-subtle);
    font-size: var(--rc-text-sm);
    max-width: var(--rc-measure);
    margin: 0;
}

/* ---------- wizard shell ---------- */

.cr-container {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--rc-section-y) var(--rc-gutter) var(--rc-space-9);
}

.cr-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--rc-space-6);
}
.cr-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rc-space-2);
}
.cr-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rc-line-soft);
    color: var(--rc-ink-subtle);
    font-weight: 600;
    font-size: var(--rc-text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--rc-dur-state) var(--rc-ease), color var(--rc-dur-state) var(--rc-ease);
}
.cr-step.active .cr-step-num { background: var(--rc-forest); color: var(--rc-ink-inverse); }
.cr-step.done .cr-step-num { background: var(--rc-forest-soft); color: var(--rc-ink-inverse); }
/* Four uppercase labels ("AVAILABILITY" is the widest) cannot fit across a
   375px screen. They used to overflow and get clipped by .rc-page's
   overflow-x: hidden, so the first and last read as "UNT" and "DOCUM".
   On a phone only the current step is named; all four appear once there
   is room. */
.cr-step-label {
    display: none;
    font-size: var(--rc-text-xs);
    font-weight: 600;
    color: var(--rc-ink-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.cr-step.active .cr-step-label { display: block; }
.cr-step.active .cr-step-label,
.cr-step.done .cr-step-label { color: var(--rc-ink); }

@media (min-width: 640px) {
    .cr-step-label { display: block; }
}
.cr-step-line {
    flex: 1;
    height: 1px;
    background: var(--rc-line);
    margin: 0 var(--rc-space-2) var(--rc-space-6);
    min-width: var(--rc-space-6);
}

.cr-card {
    background: var(--rc-surface);
    border: 1px solid var(--rc-line-soft);
    border-radius: var(--rc-radius-md);
    padding: var(--rc-space-5);
    overflow: hidden;
}
@media (min-width: 640px) {
    .cr-card { padding: var(--rc-space-7); }
}

.cr-step-content { display: none; }
.cr-step-content.active { display: block; }

.cr-step-title {
    font-family: var(--rc-font-display);
    font-size: var(--rc-text-xl);
    font-weight: 400;
    color: var(--rc-ink);
    margin: 0 0 var(--rc-space-2);
}
.cr-step-desc {
    color: var(--rc-ink-muted);
    margin: 0 0 var(--rc-space-6);
    font-size: var(--rc-text-sm);
}

/* Shown when somebody reloads mid-application: their account already exists,
   so throwing them back to step 1 would be a dead end. */
.cr-resume-banner {
    background: var(--rc-cream);
    border-left: 3px solid var(--rc-forest);
    padding: var(--rc-space-4);
    margin-bottom: var(--rc-space-5);
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-strong);
}

/* Live count of people near the applicant's postcode who asked for a cleaner. */
.cr-demand {
    margin: var(--rc-space-3) 0 0;
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-strong);
    background: var(--rc-cream);
    border-radius: var(--rc-radius-md);
    padding: var(--rc-space-3) var(--rc-space-4);
}

/* ---------- form elements ---------- */

.cr-form-group { margin-bottom: var(--rc-space-5); position: relative; }
.cr-label {
    display: block;
    font-weight: 600;
    font-size: var(--rc-text-sm);
    color: var(--rc-ink);
    margin-bottom: var(--rc-space-2);
}
.cr-required { color: var(--rc-ink-subtle); }
.cr-hint {
    font-size: var(--rc-text-xs);
    color: var(--rc-ink-subtle);
    margin: 0 0 var(--rc-space-3);
}
.cr-input {
    width: 100%;
    min-height: var(--rc-tap);
    padding: var(--rc-space-3) var(--rc-space-4);
    border: 1px solid var(--rc-line);
    border-radius: var(--rc-radius-sm);
    font-size: var(--rc-text-base);
    font-family: var(--rc-font-ui);
    color: var(--rc-ink);
    background: var(--rc-surface);
    transition: border-color var(--rc-dur-state) var(--rc-ease);
    outline: none;
}
.cr-input:focus { border-color: var(--rc-forest); }
.cr-input:focus-visible { outline: 2px solid var(--rc-forest); outline-offset: 2px; }
.cr-textarea { resize: vertical; min-height: 120px; }
.cr-char-count {
    font-size: var(--rc-text-xs);
    color: var(--rc-ink-subtle);
    float: right;
    margin-top: var(--rc-space-1);
}

/* ---------- uploads ---------- */

.cr-photo-upload {
    display: flex;
    align-items: center;
    gap: var(--rc-space-5);
    padding: var(--rc-space-5);
    border: 1px dashed var(--rc-line);
    border-radius: var(--rc-radius-md);
    margin-bottom: var(--rc-space-5);
    transition: border-color var(--rc-dur-state) var(--rc-ease);
}
.cr-photo-upload:hover { border-color: var(--rc-sage); }
.cr-photo-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--rc-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--rc-ink-subtle);
}
.cr-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.cr-photo-label { font-weight: 600; font-size: var(--rc-text-sm); margin: 0 0 var(--rc-space-1); }
.cr-photo-hint { font-size: var(--rc-text-xs); color: var(--rc-ink-subtle); margin: 0 0 var(--rc-space-2); }
.cr-photo-btn { min-height: var(--rc-tap); font-size: var(--rc-text-sm); cursor: pointer; }

.cr-dbs-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rc-space-3);
    padding: var(--rc-space-6) var(--rc-space-5);
    border: 1px dashed var(--rc-line);
    border-radius: var(--rc-radius-md);
    margin-bottom: var(--rc-space-4);
    text-align: center;
    transition: border-color var(--rc-dur-state) var(--rc-ease);
}
.cr-dbs-upload:hover { border-color: var(--rc-sage); }
.cr-dbs-upload.has-file { border-style: solid; border-color: var(--rc-forest); background: var(--rc-cream); }
.cr-dbs-icon { color: var(--rc-ink-subtle); }
.cr-dbs-label { font-weight: 600; font-size: var(--rc-text-sm); color: var(--rc-ink); }

/* "I don't have this yet" — the soft gate that keeps an applicant in the
   funnel instead of losing them at the last step. */
.cr-softgate {
    display: flex;
    align-items: center;
    gap: var(--rc-space-2);
    min-height: var(--rc-tap);
    margin-bottom: var(--rc-space-5);
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-muted);
}

/* ---------- availability ---------- */

.cr-availability { display: flex; flex-direction: column; gap: var(--rc-space-3); }

/* Stacked by default; the four-column row only once there is room for it. */
.cr-avail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--rc-space-3);
    padding: var(--rc-space-3) var(--rc-space-4);
    border: 1px solid var(--rc-line);
    border-radius: var(--rc-radius-md);
    transition: border-color var(--rc-dur-state) var(--rc-ease);
}
.cr-avail-row.active { border-color: var(--rc-forest); background: var(--rc-cream); }
.cr-avail-day {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--rc-space-2);
    min-height: var(--rc-tap);
    font-weight: 600;
    font-size: var(--rc-text-sm);
    color: var(--rc-ink);
}
.cr-avail-day input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--rc-forest); }
.cr-avail-time { font-size: var(--rc-text-sm); }
.cr-avail-time label {
    display: block;
    font-size: var(--rc-text-xs);
    color: var(--rc-ink-subtle);
    margin-bottom: var(--rc-space-1);
}
.cr-avail-time select {
    width: 100%;
    min-height: var(--rc-tap);
    padding: var(--rc-space-2) var(--rc-space-3);
    border: 1px solid var(--rc-line);
    border-radius: var(--rc-radius-sm);
    font-size: var(--rc-text-sm);
    font-family: var(--rc-font-ui);
    background: var(--rc-surface);
    color: var(--rc-ink);
    outline: none;
}
.cr-avail-time select:focus { border-color: var(--rc-forest); }
.cr-avail-time select:disabled { background: var(--rc-cream); color: var(--rc-ink-subtle); }

@media (min-width: 640px) {
    .cr-avail-row { grid-template-columns: 130px 1fr 1fr; }
    .cr-avail-day { grid-column: auto; }
}

/* ---------- notes, terms, buttons ---------- */

.cr-privacy-note {
    display: flex;
    align-items: center;
    gap: var(--rc-space-2);
    font-size: var(--rc-text-xs);
    color: var(--rc-ink-muted);
    background: var(--rc-cream);
    padding: var(--rc-space-3) var(--rc-space-4);
    border-radius: var(--rc-radius-sm);
    margin-bottom: var(--rc-space-3);
}
.cr-privacy-note svg { flex-shrink: 0; color: var(--rc-forest); }

.cr-terms { margin-bottom: var(--rc-space-5); }
.cr-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--rc-space-3);
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-strong);
    cursor: pointer;
}
.cr-checkbox-label input { margin-top: 3px; accent-color: var(--rc-forest); }
.cr-checkbox-label a { color: var(--rc-forest); text-decoration: underline; }

.cr-btn-row { display: flex; gap: var(--rc-space-3); margin-top: var(--rc-space-2); }
.cr-btn-next, .cr-btn-submit { flex: 1; min-height: var(--rc-tap); }
.cr-btn-back { flex: 0 0 auto; min-height: var(--rc-tap); }

/* This page loads styles.css for the shared header, whose .btn-primary is the
   old teal. Repaint the buttons here so the page reads as one brand. */
.cr-main .btn-primary,
.nav .btn-primary {
    background: var(--rc-forest);
    border-color: var(--rc-forest);
    color: var(--rc-ink-inverse);
}
.cr-main .btn-outline {
    background: transparent;
    border-color: var(--rc-line);
    color: var(--rc-ink);
}

/* ---------- error, success ---------- */

.cr-error {
    color: var(--rc-ink);
    font-size: var(--rc-text-sm);
    background: var(--rc-cream);
    border-left: 3px solid var(--rc-forest);
    border-radius: var(--rc-radius-sm);
    padding: var(--rc-space-3) var(--rc-space-4);
    margin-bottom: var(--rc-space-4);
    display: none;
}
.cr-error.visible { display: block; }

.cr-success { text-align: center; padding: var(--rc-space-5) 0; }
.cr-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--rc-forest);
    color: var(--rc-ink-inverse);
    font-size: var(--rc-text-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--rc-space-5);
}
.cr-success-title {
    font-family: var(--rc-font-display);
    font-size: var(--rc-text-2xl);
    font-weight: 400;
    color: var(--rc-ink);
    margin: 0 0 var(--rc-space-3);
}
.cr-success-desc {
    color: var(--rc-ink-muted);
    max-width: 46ch;
    margin: 0 auto var(--rc-space-6);
    line-height: 1.7;
}

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--rc-line-inverse-strong);
    border-top-color: var(--rc-cream);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- lifted from inline style attributes ---------- */

.cr-postcode-row {
    display: flex;
    align-items: center;
    gap: var(--rc-space-3);
    flex-wrap: wrap;
}
.cr-postcode-status { font-size: var(--rc-text-sm); font-weight: 600; }

.cr-input--short { max-width: 220px; }
.cr-input--upper { text-transform: uppercase; }

.cr-subsection {
    margin-top: var(--rc-space-6);
    padding-top: var(--rc-space-6);
    border-top: 1px solid var(--rc-line-soft);
}
.cr-subsection-title {
    font-family: var(--rc-font-display);
    font-size: var(--rc-text-lg);
    font-weight: 400;
    color: var(--rc-ink);
    margin: 0 0 var(--rc-space-1);
}

.cr-field-pair { display: flex; gap: var(--rc-space-3); flex-wrap: wrap; }
.cr-field-pair > .cr-form-group { flex: 1; min-width: 180px; }

/* ==========================================================================
   The guide sections.
   The page has to educate and pre-qualify, not just sell: what we offer, what
   we need from you, how the job actually reaches you, and what you see before
   you commit. Long-form reading, so these lean on measure and rhythm rather
   than boxes.
   ========================================================================== */

.cr-need,
.cr-before,
.cr-resp,
.cr-regular,
.cr-faq { padding: var(--rc-section-y) 0; }

.cr-need { background: var(--rc-surface); }
.cr-resp { background: var(--rc-surface); }

.cr-lede {
    color: var(--rc-ink-muted);
    max-width: var(--rc-measure);
    margin: 0 0 var(--rc-space-6);
}

/* ---------- what you'll need ---------- */

.cr-need-list { margin: 0; display: grid; gap: 0; }
.cr-need-item {
    display: grid;
    gap: var(--rc-space-1);
    padding: var(--rc-space-5) 0;
    border-top: 1px solid var(--rc-line-soft);
}
.cr-need-item:last-child { border-bottom: 1px solid var(--rc-line-soft); }
.cr-need-item dt {
    font-weight: 600;
    color: var(--rc-ink);
    font-size: var(--rc-text-base);
}
.cr-need-item dd {
    margin: 0;
    color: var(--rc-ink-muted);
    font-size: var(--rc-text-sm);
    max-width: var(--rc-measure);
}

@media (min-width: 640px) {
    .cr-need-item { grid-template-columns: 15rem 1fr; gap: var(--rc-space-5); align-items: baseline; }
}

/* ---------- what you see before you accept ---------- */

.cr-check-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--rc-space-5);
    display: grid;
    gap: var(--rc-space-3);
}
.cr-check-grid li {
    position: relative;
    padding-left: var(--rc-space-6);
    color: var(--rc-ink-strong);
    font-size: var(--rc-text-sm);
}
.cr-check-grid li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--rc-forest);
    border-bottom: 2px solid var(--rc-forest);
    transform: rotate(-45deg);
}
.cr-check-grid strong { color: var(--rc-ink); }

@media (min-width: 640px) {
    .cr-check-grid { grid-template-columns: 1fr 1fr; gap: var(--rc-space-3) var(--rc-space-6); }
}

/* The honest note about what is withheld until acceptance. Deliberately not
   styled as a warning — it is a fairness point, not a caveat to skim past. */
.cr-note {
    max-width: var(--rc-measure);
    margin: 0;
    padding: var(--rc-space-4) var(--rc-space-5);
    background: var(--rc-cream);
    border-left: 3px solid var(--rc-sage);
    color: var(--rc-ink-strong);
    font-size: var(--rc-text-sm);
}
.cr-note strong { color: var(--rc-ink); }

/* ---------- what we expect from you ---------- */

.cr-resp-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--rc-space-6);
    display: grid;
    gap: var(--rc-space-4);
    max-width: var(--rc-measure);
}
.cr-resp-list li {
    position: relative;
    padding-left: var(--rc-space-5);
    color: var(--rc-ink-muted);
    font-size: var(--rc-text-sm);
}
.cr-resp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: var(--rc-space-3);
    height: 1px;
    background: var(--rc-sage);
}
.cr-resp-list strong { color: var(--rc-ink); }

.cr-callout {
    max-width: var(--rc-measure);
    margin: 0;
    padding: var(--rc-space-5);
    background: var(--rc-forest);
    color: var(--rc-ink-inverse-muted);
    font-size: var(--rc-text-sm);
}
.cr-callout strong { color: var(--rc-ink-inverse); }

/* ---------- regulars + mid-page CTA ---------- */

.cr-midcta { margin-top: var(--rc-space-5); min-height: var(--rc-tap); }

/* ---------- FAQ ---------- */

.cr-faq-list { max-width: var(--rc-measure); }
.cr-faq-item {
    border-bottom: 1px solid var(--rc-line-soft);
    padding: var(--rc-space-2) 0;
}
.cr-faq-item summary {
    min-height: var(--rc-tap);
    font-size: var(--rc-text-base);
    color: var(--rc-ink);
}
.cr-faq-item summary::-webkit-details-marker { display: none; }
.cr-faq-item summary::after {
    content: "+";
    font-family: var(--rc-font-ui);
    font-size: var(--rc-text-lg);
    color: var(--rc-ink-subtle);
    flex-shrink: 0;
}
.cr-faq-item[open] summary::after { content: "\2212"; }
.cr-faq-item p {
    margin: 0 0 var(--rc-space-4);
    color: var(--rc-ink-muted);
    font-size: var(--rc-text-sm);
}

/* ---------- pre-qualifying confirmations ---------- */

.cr-confirm-intro {
    font-weight: 600;
    color: var(--rc-ink);
    font-size: var(--rc-text-sm);
    margin: 0 0 var(--rc-space-3);
}
.cr-terms .cr-checkbox-label + .cr-checkbox-label { margin-top: var(--rc-space-3); }
.cr-terms .cr-checkbox-label { min-height: var(--rc-tap); align-items: center; }

/* ---------- hero CTA ---------- */

.cr-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rc-space-3) var(--rc-space-4);
    margin-bottom: var(--rc-space-6);
}
.cr-hero-btn { min-height: var(--rc-tap); }
.cr-hero-cta-note {
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-inverse-subtle);
}

/* ---------- sticky apply bar ---------- */

/* The guide content makes this page long. Without a persistent CTA a phone
   user who is already sold has to scroll past everything to act — and the
   header's Apply button is behind the hamburger on mobile. */
.cr-sticky-apply {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--rc-forest);
    border-top: 1px solid var(--rc-line-inverse);
    box-shadow: var(--rc-shadow-sticky);
    transform: translateY(100%);
    transition: transform var(--rc-dur-enter) var(--rc-ease);
    padding-bottom: env(safe-area-inset-bottom);
}
.cr-sticky-apply.is-visible { transform: translateY(0); }

.cr-sticky-apply__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rc-space-4);
    max-width: var(--rc-container);
    margin: 0 auto;
    padding: var(--rc-space-3) var(--rc-gutter);
}
.cr-sticky-apply__text {
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-inverse-muted);
}
.cr-sticky-apply__text strong { color: var(--rc-ink-inverse); }
.cr-sticky-apply__btn { min-height: var(--rc-tap); white-space: nowrap; }

/* Wide screens keep the header CTA in view, so the bar is redundant there. */
@media (min-width: 1024px) {
    .cr-sticky-apply { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-sticky-apply { transition: none; }
}