/* =========================================================================
   Nonprofit segment: shared page styles
   Loaded by BOTH /services/nonprofit/ and
   /services/nonprofit/constituent-self-update-portal/ (as ../styles.css).

   One stylesheet, two pages, on purpose. The assessment pages each carry
   their own near-identical copy, which is how the site ended up with three
   stylesheets that differ mostly in prefix. The two nonprofit pages are one
   visual family authored in one pass, so they share one file. If a third
   nonprofit page needs something genuinely different, add it here scoped to
   that page rather than forking the file.

   Reuses the token system in ../../css/styles.css. No net-new tokens, fonts,
   or colors: every value below resolves to an existing site variable.

   Fonts are NOT redeclared here. The global stylesheet already loads Inter
   and JetBrains Mono from /fonts/, so a second @font-face block would only
   duplicate work the browser has already done.
   ========================================================================= */

/* ---- Page scope --------------------------------------------------------- */
.np-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.np-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-feature-settings: "tnum" 1;
}

/* ---- Shared page helpers ------------------------------------------------ */
.np-narrow {
    max-width: 760px;
}

.np-prose {
    font-size: 17px;
    color: var(--text-muted);
    line-height: 1.75;
    margin: 0 0 20px;
}
.np-prose:last-child {
    margin-bottom: 0;
}

/* No section-alt helper here on purpose: the site alternates section
   backgrounds automatically via .section:nth-child(even) in ../../css/styles.css.
   Adding an explicit alt class fights that rule and stacks alt on alt. */

.np-btn {
    display: inline-block;
    text-decoration: none;
}

/* Intro line above a list or grid. */
.np-lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 24px;
}

/* ---- Cross-link ---------------------------------------------------------
   Body text, not a callout. Styling it as a CTA would compete with the two
   booking buttons and split the page's single conversion action.
   ------------------------------------------------------------------------ */
.np-crosslink {
    margin: 32px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---- Hero --------------------------------------------------------------- */
.np-hero {
    position: relative;
    padding: 112px 0 72px;
    overflow: hidden;
}

/* Matches .np-narrow so the hero and body copy share one left edge. */
.np-hero-inner {
    max-width: 760px;
}

.np-eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--accent-primary);
    margin: 0 0 22px;
}

.np-hero-title {
    font-size: clamp(34px, 5.6vw, 58px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: var(--text-main);
    margin: 0 0 24px;
    /* Both H1s on these pages run long enough to wrap at desktop. Balanced
       so the second line is not a one-word runt. */
    text-wrap: balance;
}

/* Balance section heading line breaks on these pages. Without it
   "Nonprofit work beyond consulting" drops to three lines at 375px with the word
   "beyond" stranded alone on the middle line. Scoped to .np-page on purpose: it
   must not change heading wrap on the assessment pages, which were laid out and
   checked against their own copy. */
.np-page .section-title {
    text-wrap: balance;
}

/* Keeps a hyphenated compound term whole in a heading. Without it the product
   page H1 breaks at the hyphen in "Self-Update" and splits one term across two
   lines, which reads as a typo rather than a wrap. */
.np-nowrap {
    white-space: nowrap;
}

/* The hook states the outcome. One step down from H1, full text color. */
.np-hero-hook {
    font-size: clamp(21px, 2.7vw, 28px);
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
    max-width: 34ch;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
}

/* Supporting detail, subordinate to the hook: smaller, regular, muted. */
.np-hero-spec {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 34px;
}

.np-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

/* Subtle, staggered hero fade-in (disabled under reduced motion) */
@keyframes np-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.np-hero-inner > * {
    animation: np-fade-in 0.6s ease both;
}
.np-hero-inner > *:nth-child(2) { animation-delay: 0.06s; }
.np-hero-inner > *:nth-child(3) { animation-delay: 0.12s; }
.np-hero-inner > *:nth-child(4) { animation-delay: 0.18s; }
.np-hero-inner > *:nth-child(5) { animation-delay: 0.24s; }

/* ---- Plain marked lists -------------------------------------------------
   Same "+" marker the two assessment pages use, so the nonprofit pages read
   as part of one family rather than a second design.
   ------------------------------------------------------------------------ */
.np-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.np-list li {
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
}

.np-list li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: -1px;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Exclusions list. Same structure, minus marker, muted accent: the reader has
   to be able to tell at a glance which list they are looking at without
   re-reading the heading above it. */
.np-list--out li::before {
    content: "\2013";
    color: var(--text-muted);
    font-weight: 600;
}

/* ---- Offering cards (segment page) --------------------------------------
   auto-fit, not a fixed column count: one offering fills the row today, a
   second drops in beside it with no CSS change, a third wraps. The "room to
   add more nonprofit offerings later" requirement lives in this grid rather
   than in a TODO comment someone has to find.
   ------------------------------------------------------------------------ */
.np-offers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.np-offer {
    display: flex;
    flex-direction: column;
    padding: 30px 32px;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--accent-primary);
    border-radius: 14px;
    background: var(--card-bg-soft);
}

.np-offer__title {
    margin: 0 0 10px;
    font-size: clamp(20px, 2.6vw, 24px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-main);
}

.np-offer__body {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* Pinned to the bottom so the links line up whatever length the blurbs run
   once a second card is added. align-self keeps the link at its own width
   inside the flex column instead of stretching to the card edge. */
.np-offer__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    gap: 8px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--accent-primary);
    text-decoration: none;
}

.np-offer__arrow {
    transition: transform 0.18s ease;
}

.np-offer__cta:hover .np-offer__arrow,
.np-offer__cta:focus-visible .np-offer__arrow {
    transform: translateX(3px);
}

/* ---- Wide section -------------------------------------------------------
   The offerings section drops .np-narrow and runs the full container so the
   capability cards get the same ~384px they have on /services/; at 760px they
   would come out ~216px and the titles would wrap hard. Everything inside the
   section shares that wider edge, so the section is internally aligned even
   though it starts 220px left of the rest of the page. That offset is the
   deliberate cost of giving the offerings visual weight.

   Prose does NOT inherit the full width: a paragraph set at ~1130px is about
   110ch, well past a readable measure. Cap the copy, not the container, so the
   edges stay aligned.
   ------------------------------------------------------------------------ */
.np-wide .np-lead,
.np-wide .np-crosslink,
.np-wide .np-offer__body {
    max-width: 68ch;
}

/* The Nonprofit Cloud note is a two-line aside, not a peer of the cards. Left
   edge stays on the section grid; the box simply stops early rather than
   stretching a short note across the full width. */
.np-wide .np-callout {
    max-width: 820px;
}

/* Sub-heading below the card grid, one level under .section-title. The rule
   above it separates the productized offering from the scoped-on-a-call set
   without needing a second eyebrow. */
.np-subhead {
    margin: 56px 0 20px;
    padding-top: 32px;
    border-top: 1px solid var(--card-border);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-main);
}

@media (max-width: 760px) {
    .np-subhead {
        margin-top: 40px;
        padding-top: 26px;
        font-size: 21px;
    }
}

/* ---- Price line ---------------------------------------------------------
   Reads as a fact, not an offer badge: no fill, no border, no button shape.
   The page has exactly one conversion action and a styled price block would
   compete with it. The number is emphasized inline instead.
   ------------------------------------------------------------------------ */
.np-price {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--card-border);
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-main);
}

.np-price strong {
    font-weight: 700;
}

.np-price .np-price-qualifier {
    display: block;
    margin-top: 6px;
    font-size: 15.5px;
    color: var(--text-muted);
}

/* Launch offer, directly under .np-price and inside the same bordered block.
   Deliberately not a badge, pill, or button, for the same reason the price
   above it is not: the page has one conversion action and a styled promo
   block would compete with it. Weight alone carries the emphasis. */
.np-launch {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--text-main);
}

/* ---- Numbered steps ----------------------------------------------------- */
.np-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    counter-reset: np-step;
}

.np-step {
    position: relative;
    padding: 20px 24px 20px 58px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg-soft);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

/* Numbered marker, mono, matches the site's numeric treatment. */
.np-step::before {
    counter-increment: np-step;
    content: counter(np-step, decimal-leading-zero);
    position: absolute;
    left: 22px;
    top: 20px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-primary);
}

.np-step-title {
    display: block;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

/* ---- Callout ------------------------------------------------------------
   Used for the Nonprofit Cloud note on both pages. Same treatment as the
   .saa-credit differentiator block on the Architecture Assessment page.
   ------------------------------------------------------------------------ */
.np-callout {
    margin: 32px 0 0;
    padding: 26px 28px;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--accent-primary);
    border-radius: 12px;
    background: var(--card-bg-soft);
}

.np-callout-lead {
    margin: 0 0 10px;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-main);
}

.np-callout-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---- FAQ ----------------------------------------------------------------
   Same definition-list treatment as the Org Access Assessment page, so the
   pattern is reused rather than reinvented. Plain markup on purpose: no
   accordion, so every answer is readable with JavaScript disabled and is
   present in the page for search engines. The rendered text must stay
   identical to the FAQPage JSON-LD in the page head.
   ------------------------------------------------------------------------ */
.np-faq {
    border-top: 1px solid var(--card-border);
}

.np-faq-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--card-border);
}

.np-faq-q {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
}

.np-faq-a {
    font-size: 15.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ---- Final CTA band ----------------------------------------------------- */
.np-cta-band {
    padding: 92px 0;
    background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
}
.np-cta-inner {
    text-align: center;
}
.np-cta-title {
    max-width: 24ch;
    margin: 0 auto 16px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: #ffffff;
    /* Even two lines when it has to wrap, rather than a short second line. */
    text-wrap: balance;
}

/* Sits on ONE line wherever the viewport allows. A ch-based cap does not
   clear the sentence at 17px Inter and orphans the last word onto its own
   line at every width down from desktop, which is a bug this site has already
   fixed once on the Architecture Assessment page. min() keeps it inside the
   container on small screens, where wrapping is unavoidable, and
   text-wrap: balance splits those two lines evenly instead of leaving a
   one-word runt. */
.np-cta-line {
    max-width: min(100%, 36rem);
    margin: 0 auto 28px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    text-wrap: balance;
}
/* White button on the colored band (higher specificity than .btn-primary) */
.np-cta-btn.btn-primary {
    background: #ffffff;
    color: var(--accent-hover);
}
.np-cta-btn.btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
    .np-hero {
        padding: 88px 0 56px;
    }
    .np-offer {
        padding: 26px 22px;
    }
    .np-step {
        padding: 18px 20px 18px 52px;
    }
    .np-step::before {
        left: 18px;
        top: 18px;
    }
    .np-callout {
        padding: 22px 20px;
    }
    .np-cta-band {
        padding: 72px 0;
    }
}

@media (max-width: 480px) {
    /* Scoped to main on purpose. .nav-inner and .footer-inner also use
       .container, and the header is a flex row whose logo does not shrink
       below ~250px. Adding 20px of padding to it pushes .nav-right past the
       viewport and gives the whole page a horizontal scrollbar at 320px. */
    .np-page main .container {
        padding: 0 20px;
    }
    .np-hero-actions {
        gap: 14px 18px;
    }
    /* minmax(320px, 1fr) would otherwise force a 320px track wider than the
       padded container at 320px viewport width and overflow the page. */
    .np-offers {
        grid-template-columns: 1fr;
    }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .np-page *,
    .np-page *::before,
    .np-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .np-hero-inner > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}