/*
 * /join — PR26-745. Sections PR26-776 to 781.
 *
 * Foundations first: `ravl-2026.css` carries the tokens, type, buttons, bands, nav and footer.
 * Only this page's composition is here — the form, the three steps and the two plan blocks.
 *
 * THE FORM IS THE WHOLE PAGE, so most of this file is the field. PR26-777 fixes the field style
 * and gives the reason: white fill, 1px INK border, 12px radius, 60px tall. Ink is not a stylistic
 * choice — it is the only border value in the palette that clears 3:1 on white, on the mint hero
 * ground AND on the peach band. `--line` is 1.29:1 on white and is decoration; a field outlined in
 * it has no perceivable boundary for anybody with low vision, and WCAG 1.4.11 wants 3:1 for the
 * boundary of a control.
 */

/* ============================================================ 01 HERO + FORM — PR26-776, 777 */

/* The hero and the form share one band. `--fog` comes from `.rv-band--mint` in the foundations. */
.jn-top__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 72px;
    align-items: start;
}

.jn-intro__lede { margin-top: 24px; max-width: 30em; }

/* The panel the form or the confirmation sits in. White on mint, so the form reads as the object
   on the page rather than as part of the band. */
.jn-panel {
    background: var(--page);
    border-radius: var(--r-card);
    padding: 40px;
}

.jn-form { display: block; }

/* Two fields side by side above 720px, stacked below. A first and last name are short enough that
   one line each wastes a whole scroll on a phone. */
.jn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.jn-field { margin-bottom: 22px; }
.jn-row .jn-field { margin-bottom: 22px; }

/* EVERY FIELD IS LABELLED, and the label is a real <label> above the input rather than a
   placeholder. A placeholder disappears the moment somebody starts typing, which is exactly when
   they most need to know what they are typing — and it is not announced as the field's name by
   several screen readers. */
.jn-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.jn-input {
    display: block;
    width: 100%;
    height: 60px;
    padding: 0 18px;
    border: 1px solid var(--ink);
    border-radius: var(--r-control);
    background: var(--page);
    color: var(--ink);
    font-family: inherit;
    font-size: 16.5px;
    line-height: 1.4;
}

/* 16.5px is above the 16px floor at which iOS Safari zooms the viewport on focus. Dropping the
   field type size to 15px to match the label would make every phone user's page jump when they
   tap the first field, and not come back. */

.jn-input::placeholder { color: var(--subtle); }

/* The foundations sheet's global `:focus-visible` outline covers this. Stated here only to raise
   the border weight with it, so the focused field is obvious against the outline rather than
   sitting inside it unchanged. */
.jn-input:focus-visible { border-color: var(--accent); }

.jn-note {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--subtle);
}

/* ⚠️ THE ERROR IS DESCRIBED IN WORDS AND IS NOT A COLOUR CHANGE ALONE — PR26-777.
   `--on-tint-2` is the peach partner, 5.23:1 on its own tint and darker still on white; it is a
   text-safe red-brown rather than a signal red, and the sentence carries the meaning whether or
   not the colour is perceived. */
.jn-error {
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: var(--r-control);
    border: 1px solid var(--on-tint-2);
    background: var(--tint-2);
    color: var(--on-tint-2);
    font-size: 15.5px;
    line-height: 1.6;
    font-weight: 500;
}

/* 04 THE PRICE, immediately above the button — PR26-779. */
.jn-price {
    margin: 4px 0 24px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--body);
}

.jn-price strong { color: var(--ink); font-weight: 600; }

/* Links are never the action colour: `--accent` is 4.70:1 on white and fails on every other
   ground the design uses, so `--link` (the periwinkle partner, 9.12:1 on white) holds everywhere.
   Same rule as the foundations sheet's `--link` token. */
.jn-price__link { color: var(--link); }

.jn-submit { width: 100%; }

/* 05 THE CONFIRMATION — PR26-780. */
.jn-done__h {
    margin: 0 0 16px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.jn-done .rv-body + .rv-body { margin-top: 16px; }

.jn-done__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}

/* ============================================================ 03 WHAT HAPPENS NEXT — PR26-778 */

.jn-next__h { max-width: 15em; }

.jn-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 56px;
}

.jn-step { border-top: 1px solid var(--ink); padding-top: 24px; }

/* The numeral is decoration over an ordered list that already carries the order, so it is
   aria-hidden in the template. It survives here because three steps read as a sequence far faster
   with them than without, and the numbering is the one place `/how-it-works` kept the chapter
   numerals when the markers were removed. */
.jn-step__no {
    display: block;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
}

.jn-step__title {
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

/* ============================================================ 04 WHAT MEMBERSHIP INCLUDES */

.jn-plans__h { max-width: 16em; }

.jn-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.jn-plan {
    background: var(--page);
    border-radius: var(--r-card);
    padding: 32px;
}

.jn-plan__name {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--subtle-on-tint);
}

.jn-plan__price {
    margin: 0 0 18px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.jn-plan__alt { font-size: 16px; font-weight: 500; color: var(--body); letter-spacing: 0; }

.jn-plans__more { margin-top: 32px; }

/* ============================================================ BELOW 1440 — PR26-797's rule
   The band padding and page margin collapse in the foundations sheet; these are this page's own
   compositions, which are the only things that need saying here. */

@media (max-width: 1080px) {
    .jn-top__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .jn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 720px) {
    .jn-panel { padding: 28px 20px; }
    .jn-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .jn-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; }
    .jn-plans { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .jn-plan { padding: 24px 20px; }
    .jn-done__actions { gap: 16px; }
}