/*!
 * Nodalbank — inner marketing pages
 *
 * Loaded alongside nodal-home.css, which owns the tokens. Nothing here
 * redefines a token; this file only adds the two shapes the homepage never
 * needed: a page masthead and a form.
 *
 * Scope is `.nx` so the same dark surface, square corners and 400-weight
 * headings apply without restating them.
 */

/* -- Masthead -------------------------------------------------------------
   Sits under the fixed header, so the top padding clears it. */

.nx-page {
    padding-block: 9rem 3rem;
    background: var(--nx-bg);
}

@media (min-width: 768px) {
    .nx-page { padding-block: 11rem 4rem; }
}

.nx-page__head {
    max-width: 46rem;
}

.nx-page__title {
    margin: 0;
    color: var(--nx-ink);
    font-size: 2.25rem;
    font-weight: var(--nx-weight-heading);
    line-height: var(--nx-lh-tight);
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .nx-page__title { font-size: 3rem; }
}

.nx-page__lede {
    margin: 1rem 0 0;
    color: var(--nx-ink-dim);
    font-size: 1.0625rem;
    line-height: var(--nx-lh-body);
}

/* -- Two-column body: form on the left, contact facts on the right -------- */

.nx-contact {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem;
    align-items: start;
}

@media (min-width: 992px) {
    .nx-contact {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 2rem;
    }
}

/* -- Panel — same elevated surface the wealth cards use ------------------- */

.nx-panel {
    padding: 1.75rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    background: var(--nx-bg-card);
}

@media (min-width: 768px) {
    .nx-panel { padding: 2.5rem; }
}

.nx-panel__title {
    margin: 0 0 0.5rem;
    color: var(--nx-ink);
    font-size: 1.5rem;
    font-weight: var(--nx-weight-heading);
    line-height: var(--nx-lh-heading);
}

.nx-panel__text {
    margin: 0 0 2rem;
    color: var(--nx-ink-dim);
    font-size: 0.9375rem;
    line-height: var(--nx-lh-body);
}

/* -- Form -----------------------------------------------------------------
   `.form-control` from main.css is deliberately not reused: it carries a
   light background and a pill radius that fight the system. These rules are
   written at (0,2,0) so they win against main.css's (0,1,0) selectors
   without !important. */

.nx-form {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 576px) {
    .nx-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nx-field { display: grid; gap: 0.5rem; }

.nx-field--wide { grid-column: 1 / -1; }

.nx-field label,
.nx-field > .nx-field__label {
    margin: 0;
    color: var(--nx-ink);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.nx-field .nx-input,
.nx-field textarea.nx-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-btn);
    background: rgba(255, 255, 255, 0.02);
    color: var(--nx-ink);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--nx-dur-btn) var(--nx-ease),
                background-color var(--nx-dur-btn) var(--nx-ease);
}

.nx-field textarea.nx-input {
    min-height: 9rem;
    resize: vertical;
}

/* main.css:1655 sets a bare `::placeholder` rule with `color`, `opacity` and
   `font-size` all `!important`, so specificity alone cannot win here — the
   three declarations have to be answered in kind. */
.nx-page ::placeholder,
.nx-field .nx-input::placeholder,
.nx-field textarea.nx-input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 1rem !important;
}

.nx-field .nx-input:focus {
    outline: none;
    border-color: var(--nx-accent);
    background: rgba(255, 255, 255, 0.04);
}

/* A pre-filled, locked field should read as information, not as an input. */
.nx-field .nx-input[readonly] {
    background: rgba(255, 255, 255, 0.04);
    color: var(--nx-ink-dim);
    cursor: not-allowed;
}

.nx-form__foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* The captcha component ships its own markup; only its width is constrained. */
.nx-form__captcha { flex: 1 1 16rem; min-width: 0; }
.nx-form__captcha .form-group { margin-bottom: 0; }

.nx-form__captcha input,
.nx-form__captcha .form-control {
    padding: 0.875rem 1rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-btn);
    background: rgba(255, 255, 255, 0.02);
    color: var(--nx-ink);
    height: auto;
}

/* -- Contact facts --------------------------------------------------------- */

.nx-facts {
    display: grid;
    gap: 1px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    background: var(--nx-line);
    overflow: hidden;
}

.nx-fact {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--nx-bg-card);
}

.nx-fact__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--nx-radius-pill);
    background: rgba(var(--nx-glow-rgb), 0.12);
    color: var(--nx-accent);
    font-size: 1.25rem;
}

.nx-fact__icon svg { width: 20px; height: 20px; }

.nx-fact__icon i { line-height: 1; }

.nx-fact__label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--nx-ink-mute);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nx-fact__value {
    margin: 0;
    color: var(--nx-ink);
    font-size: 1rem;
    line-height: var(--nx-lh-body);
    overflow-wrap: anywhere;
}

.nx-fact__value a { color: inherit; text-decoration: none; }
.nx-fact__value a:hover { color: var(--nx-accent); }

/* Support note under the facts list. */
.nx-aside-note {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    background: var(--nx-bg-elev);
}

.nx-aside-note h3 {
    margin: 0 0 0.5rem;
    color: var(--nx-ink);
    font-size: 1.0625rem;
    font-weight: var(--nx-weight-heading);
}

.nx-aside-note p {
    margin: 0 0 1.25rem;
    color: var(--nx-ink-dim);
    font-size: 0.9375rem;
    line-height: var(--nx-lh-body);
}

/* -- Document page: body text plus a side rail ---------------------------- */

.nx-doc {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem;
    align-items: start;
}

@media (min-width: 992px) {
    .nx-doc {
        grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
        gap: 2rem;
    }
}

/* A clickable fact row — used for the sibling-document rail. */
.nx-fact--link {
    text-decoration: none;
    transition: background-color var(--nx-dur-btn) var(--nx-ease);
}

.nx-fact--link:hover { background: var(--nx-bg-elev); text-decoration: none; }

.nx-fact--link .nx-fact__value { color: var(--nx-ink); }

.nx-fact--link.is-current {
    background: var(--nx-bg-elev);
    box-shadow: inset 3px 0 0 var(--nx-accent);
}

.nx-fact--link.is-current .nx-fact__icon { color: var(--nx-accent); }

/* -- Prose ----------------------------------------------------------------
   The body is editor HTML, so every tag it can emit needs a colour declared
   outright: main.css sets `h1..h6 { color: hsl(var(--heading)) }`, and an
   explicit colour on the element always beats an inherited one. */

.nx-prose {
    color: var(--nx-ink-dim);
    font-size: 1rem;
    line-height: var(--nx-lh-body);
}

.nx-prose > :first-child { margin-top: 0; }
.nx-prose > :last-child { margin-bottom: 0; }

.nx-prose h1,
.nx-prose h2,
.nx-prose h3,
.nx-prose h4,
.nx-prose h5,
.nx-prose h6 {
    margin: 2.5rem 0 1rem;
    color: var(--nx-ink);
    font-weight: var(--nx-weight-heading);
    line-height: var(--nx-lh-heading);
}

.nx-prose h1 { font-size: 1.875rem; }
.nx-prose h2 { font-size: 1.5rem; }
.nx-prose h3 { font-size: 1.25rem; }
.nx-prose h4,
.nx-prose h5,
.nx-prose h6 { font-size: 1.0625rem; }

.nx-prose p,
.nx-prose li { color: var(--nx-ink-dim); }

.nx-prose p { margin: 0 0 1.125rem; }

.nx-prose ul,
.nx-prose ol {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
}

.nx-prose li { margin-bottom: 0.5rem; }

.nx-prose ul { list-style: disc; }
.nx-prose ol { list-style: decimal; }

.nx-prose li::marker { color: var(--nx-accent); }

.nx-prose strong,
.nx-prose b { color: var(--nx-ink); font-weight: 600; }

.nx-prose a {
    color: var(--nx-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.nx-prose a:hover { color: var(--nx-link-hover); }

.nx-prose hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--nx-line);
    opacity: 1;
}

.nx-prose blockquote {
    margin: 0 0 1.5rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 2px solid var(--nx-accent);
    color: var(--nx-ink);
}

.nx-prose table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    color: var(--nx-ink-dim);
}

.nx-prose th,
.nx-prose td {
    padding: 0.75rem;
    border: 1px solid var(--nx-line);
    text-align: left;
}

.nx-prose th { color: var(--nx-ink); font-weight: 500; }

.nx-prose img {
    max-width: 100%;
    height: auto;
}

/* Editor HTML frequently carries inline colours from a light-themed WYSIWYG.
   Those are unreadable here, so they are overridden. */
.nx-prose [style*='color'] { color: var(--nx-ink-dim) !important; }
.nx-prose h1[style*='color'],
.nx-prose h2[style*='color'],
.nx-prose h3[style*='color'],
.nx-prose h4[style*='color'] { color: var(--nx-ink) !important; }
.nx-prose [style*='background'] { background: transparent !important; }

/* Opening paragraph of a legal document — larger, and in full ink so the
   summary is read rather than skimmed past. */
.nx-prose__lead {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--nx-line);
    color: var(--nx-ink);
    font-size: 1.0625rem;
}

/* Sub-headings sit closer to the clause they open than to the one above. */
.nx-prose h3 { margin-top: 1.75rem; }

/* -- A document whose text is not published yet ---------------------------
   Deliberately quiet: this is a status notice, not an announcement. */

.nx-pending {
    max-width: 34rem;
    padding-block: 1rem;
}

.nx-pending__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    border-radius: var(--nx-radius-pill);
    background: rgba(var(--nx-glow-rgb), 0.12);
    color: var(--nx-accent);
}

.nx-pending__icon svg { width: 22px; height: 22px; }

.nx-pending__title {
    margin: 0 0 1rem;
    color: var(--nx-ink);
    font-size: 1.375rem;
    font-weight: var(--nx-weight-heading);
    line-height: var(--nx-lh-heading);
}

.nx-pending__text {
    margin: 0 0 1rem;
    color: var(--nx-ink-dim);
    font-size: 1rem;
    line-height: var(--nx-lh-body);
}

.nx-pending__text + .nx-btn { margin-top: 0.75rem; }

/* Date line under the lede on a published document. */
.nx-page__meta {
    margin: 0.75rem 0 0;
    color: var(--nx-ink-mute);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

/* -- Callout ---------------------------------------------------------------
   The block a legal document opens with: binding-agreement notice and risk
   warning. Set apart so it is not skimmed past as body text. */

.nx-prose .nx-callout {
    margin: 0 0 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--nx-line-strong);
    border-left: 3px solid var(--nx-accent);
    border-radius: var(--nx-radius);
    background: var(--nx-bg-elev);
}

@media (min-width: 768px) {
    .nx-prose .nx-callout { padding: 2rem; }
}

.nx-prose .nx-callout > h2 {
    margin-top: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--nx-accent);
}

.nx-prose .nx-callout > p:last-child { margin-bottom: 0; color: var(--nx-ink); }

/* An unfilled placeholder in a legal document. Marked so it is obvious on the
   page and greppable in the source before the document is relied upon. */
.nx-placeholder {
    padding: 0.1em 0.4em;
    border-radius: 3px;
    background: rgba(204, 59, 59, 0.16);
    color: #ff9c9c;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}