/* ==========================================================================
   nis2-app.html — the app landing page
   --------------------------------------------------------------------------
   Loaded after styles.css, which owns the header, the footer, the buttons and
   the colour tokens. Everything here is scoped with a `n2a-` prefix for the same
   reason the app's modules are: this site has no build step, so a class name is
   a global, and a generic `.card` on a page that also loads three other
   stylesheets is a collision waiting for a release.
   ========================================================================== */

/* No `padding-top` here: `styles.css` already puts 80px on `body` for the fixed
   header, and adding a second offset leaves a white band above the hero that
   reads as a rendering fault. */

.n2a-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.n2a-narrow {
    max-width: 820px;
}

/* ---------- Hero ---------- */

.n2a-hero {
    background: linear-gradient(180deg, var(--brand-teal-bg) 0%, var(--white) 100%);
    padding: 72px 0 56px;
    text-align: center;
}

.n2a-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-navy);
    color: var(--white);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* The pulse is the only animation on the page and it is on the one word the
   page is really about. A second one anywhere would cost this one its meaning. */
.n2a-badge__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-teal-light);
    animation: n2a-pulse 2s ease-in-out infinite;
}

@keyframes n2a-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

.n2a-hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--brand-navy-dark);
    margin: 0 auto 20px;
    max-width: 20ch;
}

.n2a-hero__lead {
    font-size: 1.2rem;
    color: var(--gray-600);
    max-width: 62ch;
    margin: 0 auto 32px;
}

.n2a-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.n2a-hero__note {
    font-size: 0.95rem;
    color: var(--gray-500);
    margin-top: -28px;
    margin-bottom: 40px;
}

/* ---------- Screenshots ---------- */

.n2a-shot {
    border-radius: 14px;
    border: 1px solid var(--gray-200);
    box-shadow: 0 18px 50px rgba(66, 83, 105, 0.16);
    overflow: hidden;
    background: var(--white);
}

.n2a-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.n2a-shot__caption {
    font-size: 0.9rem;
    color: var(--gray-500);
    padding: 12px 16px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    text-align: left;
}

/* ---------- Generic section ---------- */

.n2a-section {
    padding: 72px 0;
}

.n2a-section--alt {
    background: var(--section-bg);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.n2a-section h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    color: var(--brand-navy-dark);
    margin-bottom: 16px;
}

.n2a-section__lead {
    font-size: 1.1rem;
    color: var(--gray-600);
    max-width: 70ch;
    margin-bottom: 40px;
}

.n2a-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-teal-dark);
    margin-bottom: 10px;
}

/* ---------- Problem / promise ---------- */

.n2a-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.n2a-panel {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 28px;
}

.n2a-panel--before {
    border-left: 4px solid var(--high-orange);
}

.n2a-panel--after {
    border-left: 4px solid var(--brand-teal);
}

.n2a-panel h3 {
    font-size: 1.15rem;
    margin-bottom: 14px;
    color: var(--brand-navy-dark);
}

.n2a-panel ul {
    list-style: none;
    display: grid;
    gap: 10px;
}

.n2a-panel li {
    padding-left: 26px;
    position: relative;
    color: var(--gray-600);
}

.n2a-panel--before li::before {
    content: "×";
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--high-orange);
    font-weight: 800;
    font-size: 1.2rem;
}

.n2a-panel--after li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-teal-dark);
    font-weight: 800;
}

/* ---------- Capability grid ---------- */

.n2a-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.n2a-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 26px;
}

.n2a-card h3 {
    font-size: 1.1rem;
    color: var(--brand-navy-dark);
    margin-bottom: 10px;
}

.n2a-card p {
    color: var(--gray-600);
    font-size: 0.98rem;
}

.n2a-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--brand-teal-bg);
    color: var(--brand-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* ---------- Modules ---------- */

.n2a-module {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 44px;
    align-items: center;
    padding: 56px 0;
    border-top: 1px solid var(--gray-200);
}

/* Alternating sides, so seven blocks of the same shape do not read as a list of
   identical things. The image column is moved rather than the text column: the
   text stays first in the DOM, which is the order a screen reader needs. */
.n2a-module:nth-child(even) .n2a-module__media {
    order: -1;
}

.n2a-module__law {
    display: inline-block;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    background: var(--brand-navy);
    color: var(--white);
    border-radius: 6px;
    padding: 4px 10px;
    margin-bottom: 14px;
}

.n2a-module h3 {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--brand-navy-dark);
    margin-bottom: 14px;
}

.n2a-module p {
    color: var(--gray-600);
    margin-bottom: 18px;
}

.n2a-module ul {
    list-style: none;
    display: grid;
    gap: 9px;
}

.n2a-module li {
    padding-left: 26px;
    position: relative;
    color: var(--gray-700);
    font-size: 0.98rem;
}

.n2a-module li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--brand-teal-dark);
    font-weight: 700;
}

.n2a-module__kit {
    margin-top: 20px;
    font-size: 0.92rem;
    color: var(--gray-500);
    border-left: 3px solid var(--gray-300);
    padding-left: 14px;
}

/* ---------- Audience ---------- */

.n2a-audience {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.n2a-audience__item {
    text-align: center;
    padding: 26px;
}

.n2a-audience__num {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--brand-teal-dark);
    line-height: 1;
    margin-bottom: 10px;
}

/* ---------- Waitlist ---------- */

.n2a-waitlist {
    background: var(--brand-navy-dark);
    color: var(--white);
    padding: 76px 0;
}

.n2a-waitlist h2 {
    color: var(--white);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    margin-bottom: 14px;
}

.n2a-waitlist__lead {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
    max-width: 62ch;
    margin-bottom: 32px;
}

.n2a-form {
    background: var(--white);
    border-radius: 16px;
    padding: 32px;
    display: grid;
    gap: 18px;
    max-width: 640px;
}

.n2a-field {
    display: grid;
    gap: 6px;
}

.n2a-field label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-navy-dark);
}

.n2a-field input,
.n2a-field select,
.n2a-field textarea {
    font-family: inherit;
    font-size: 1rem;
    color: var(--brand-navy);
    padding: 12px 14px;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    background: var(--white);
    width: 100%;
}

.n2a-field input:focus,
.n2a-field select:focus,
.n2a-field textarea:focus {
    outline: none;
    border-color: var(--brand-teal);
}

.n2a-field__hint {
    font-size: 0.82rem;
    color: var(--gray-500);
}

.n2a-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
}

.n2a-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.94rem;
    color: var(--gray-700);
    cursor: pointer;
}

.n2a-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-teal-dark);
    flex: 0 0 auto;
}

.n2a-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--gray-600);
}

.n2a-consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--brand-teal-dark);
    flex: 0 0 auto;
}

.n2a-form button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: var(--brand-teal-dark);
    color: var(--white);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 15px 24px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.n2a-form button:hover:not(:disabled) {
    background: var(--brand-navy);
}

.n2a-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.n2a-turnstile {
    display: flex;
    justify-content: center;
    min-height: 65px;
}

.n2a-form__status {
    font-size: 0.92rem;
    color: var(--gray-600);
    min-height: 1.4em;
}

.n2a-form__status--ok {
    color: var(--low-green);
    font-weight: 700;
}

.n2a-form__error {
    display: none;
    align-items: center;
    gap: 8px;
    background: #fdecea;
    color: #a5281c;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.92rem;
}

.n2a-waitlist__perks {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

.n2a-waitlist__perks li {
    padding-left: 28px;
    position: relative;
    color: rgba(255, 255, 255, 0.85);
}

.n2a-waitlist__perks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-teal-light);
    font-weight: 800;
}

.n2a-waitlist__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: start;
}

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

.n2a-faq {
    display: grid;
    gap: 14px;
    max-width: 900px;
}

.n2a-faq details {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 18px 22px;
}

.n2a-faq summary {
    font-weight: 700;
    color: var(--brand-navy-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.n2a-faq summary::-webkit-details-marker {
    display: none;
}

.n2a-faq summary::after {
    content: "+";
    color: var(--brand-teal-dark);
    font-size: 1.4rem;
    line-height: 1;
    flex: 0 0 auto;
}

.n2a-faq details[open] summary::after {
    content: "–";
}

.n2a-faq p {
    color: var(--gray-600);
    margin-top: 12px;
    font-size: 0.98rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
    .n2a-grid,
    .n2a-audience {
        grid-template-columns: repeat(2, 1fr);
    }

    .n2a-module,
    .n2a-split,
    .n2a-waitlist__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* The alternating order only exists to break up a long column of identical
       blocks. In one column there is nothing to break up, and leaving it on
       would put every screenshot above its own explanation. */
    .n2a-module:nth-child(even) .n2a-module__media {
        order: 0;
    }
}

@media (max-width: 640px) {
    .n2a-wrap {
        padding: 0 20px;
    }

    .n2a-grid,
    .n2a-audience,
    .n2a-checks {
        grid-template-columns: 1fr;
    }

    .n2a-section {
        padding: 48px 0;
    }

    .n2a-form {
        padding: 22px;
    }
}