/* NonprofitAdGrant.com: the public site and account pages, from the mockups (docs/mockups, Main and Signup).
   The team console has its own stylesheet (console.css). No Bootstrap. */

:root {
    --np-ink: #213046;
    --np-body: #36414C;
    --np-muted: #4A5561;
    --np-page: #F5F6F3;
    --np-surface: #FFFFFF;
    --np-line: #DADFE3;
    --np-field: #B8C0C8;
    --np-accent: #3473B5;
    --np-accent-dark: #2B5E95;
    --np-accent-soft: #EDF4FB;
    --np-tab: #EEF1F4;
    --np-red: #B42318;
    --np-red-bg: #FDECEA;
    --np-green: #2F7A5E;
    --np-green-bg: #E7F3EE;
    --np-amber: #8A5A12;
    --np-amber-bg: #FDF3E1;
    --np-serif: 'Source Serif 4', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Public Sans', system-ui, sans-serif; color: var(--np-ink); background: var(--np-page); }
a { color: var(--np-accent); }
a:hover { color: var(--np-accent-dark); }
h1:focus { outline: none; }

/* ---------------------------------------------------------------- site shell (header and footer from Main) */

.np-site { min-height: 100vh; display: flex; flex-direction: column; }
.np-header { background: var(--np-surface); border-bottom: 1px solid var(--np-line); }
.np-header-inner, .np-footer-inner, .np-main { max-width: 1160px; margin: 0 auto; width: 100%; }
.np-header-inner { padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.np-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--np-ink); font-weight: 700; font-size: 18px; }
.np-brand:hover { color: var(--np-ink); }
.np-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 15px; }
.np-nav a, .np-nav button.np-linklike { color: var(--np-ink); text-decoration: none; }
.np-nav form { margin: 0; }
.np-nav a.np-btn-primary, .np-nav a.np-btn-primary:hover { color: #fff; } /* the header's link colour mustn't win over the button's */
.np-main { flex: 1; padding: 56px 24px 72px; }
.np-footer { background: var(--np-surface); border-top: 1px solid var(--np-line); }
.np-footer-inner { padding: 32px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--np-muted); }
.np-footer-inner .np-footer-links { display: flex; gap: 20px; }
.np-footer-inner .np-footer-note { flex-basis: 100%; }

/* ---------------------------------------------------------------- buttons, fields, messages */

/* Buttons and the inputs beside them share one height (--np-control), so a row of field and button lines up. */
:root { --np-control: 48px; }
.np-btn { font: inherit; font-weight: 700; font-size: 17px; border-radius: 8px; padding: 0 20px; min-height: var(--np-control); box-sizing: border-box; cursor: pointer; text-decoration: none;
          display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; line-height: 1.2; }
.np-btn-primary { background: var(--np-accent); color: #fff; }
.np-btn-primary:hover { background: var(--np-accent-dark); color: #fff; }
.np-btn-secondary { background: var(--np-surface); color: var(--np-accent); border-color: var(--np-accent); }
.np-btn-secondary:hover { background: var(--np-accent-soft); color: var(--np-accent-dark); }
.np-btn-danger { background: var(--np-surface); color: var(--np-red); border-color: var(--np-red); }
.np-btn-small { font-size: 15px; padding: 0 16px; min-height: 40px; font-weight: 600; }
.np-btn-block { width: 100%; }
.np-linklike { font: inherit; background: none; border: 0; padding: 0; color: var(--np-accent); cursor: pointer; }
.np-linklike:hover { color: var(--np-accent-dark); text-decoration: underline; }

.np-field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.np-field input, .np-field select, .np-field textarea {
    font: inherit; font-weight: 400; font-size: 16px; color: var(--np-ink); padding: 12px 14px; border: 1px solid var(--np-field); border-radius: 8px; background: #fff; width: 100%; }
.np-field input, .np-field select { height: var(--np-control); box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.np-field input:focus, .np-field select:focus, .np-field textarea:focus { outline: 2px solid var(--np-accent); outline-offset: 1px; border-color: var(--np-accent); }
.np-field .np-hint { font-weight: 400; font-size: 14px; color: var(--np-muted); }
.np-field input:disabled { background: #F1F3F5; color: var(--np-muted); cursor: not-allowed; }
.np-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px 20px; align-items: start; }
.np-form .np-field, .np-invite .np-field { min-width: 0; }
.np-form .np-field input, .np-form .np-field select, .np-form .np-field textarea { box-sizing: border-box; width: 100%; min-width: 0; }
.np-code-input { font-size: 24px !important; letter-spacing: .2em; text-align: center; max-width: 220px; }
.np-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--np-body); }
.np-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--np-accent); }

.validation-message, .validation-errors, .np-error-text { color: var(--np-red); font-size: 14px; font-weight: 500; margin: 0; padding: 0; list-style: none; }
.validation-errors:empty { display: none; }
.invalid { border-color: var(--np-red) !important; }

.np-alert { border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.np-alert p { margin: 4px 0 0; }
.np-alert-error { background: var(--np-red-bg); color: var(--np-red); }
.np-alert-ok { background: var(--np-green-bg); color: var(--np-green); }
.np-alert-warn { background: var(--np-amber-bg); color: var(--np-amber); }
.np-alert-info { background: var(--np-accent-soft); color: var(--np-accent-dark); }

/* ---------------------------------------------------------------- account pages (Signup) */

.np-account { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.np-card { flex: 999 1 460px; min-width: 0; max-width: 560px; background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 14px; padding: 36px;
           display: flex; flex-direction: column; gap: 20px; }
.np-card-wide { max-width: 760px; }
.np-card h1 { margin: 0; font-family: var(--np-serif); font-size: 32px; line-height: 1.15; }
.np-card h2 { margin: 0; font-size: 19px; }
.np-card form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.np-lead { margin: 0; font-size: 16px; color: var(--np-body); line-height: 1.5; }
.np-small { margin: 0; font-size: 14px; line-height: 1.5; color: var(--np-muted); }
.np-tabs { display: flex; gap: 8px; background: var(--np-tab); border-radius: 10px; padding: 4px; }
.np-tabs a { flex: 1; text-align: center; font-weight: 600; font-size: 15px; border-radius: 8px; padding: 11px; text-decoration: none; color: var(--np-muted); }
.np-tabs a.on { background: #fff; color: var(--np-ink); box-shadow: 0 1px 3px rgba(23,33,43,.15); }
.np-divider { display: flex; align-items: center; gap: 12px; color: var(--np-muted); font-size: 14px; }
.np-divider::before, .np-divider::after { content: ""; flex: 1; border-top: 1px solid var(--np-line); }
.np-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.np-aside { flex: 1 1 300px; display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.np-aside h2 { margin: 0; font-size: 20px; }
.np-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--np-body); }
.np-ticks li { display: flex; gap: 10px; }
.np-ticks svg { flex: none; margin-top: 2px; }
.np-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 22px; }
.np-steps > li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.np-steps > li::before { content: counter(step); width: 32px; height: 32px; border-radius: 50%; background: var(--np-accent-soft); color: var(--np-accent-dark);
                         font-weight: 700; display: flex; align-items: center; justify-content: center; }
.np-steps > li > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.np-steps p { margin: 0; line-height: 1.5; color: var(--np-body); }
.np-qr { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.np-qr .np-qr-image { background: #fff; border: 1px solid var(--np-line); border-radius: 10px; padding: 10px; width: 196px; height: 196px; }
.np-qr .np-qr-image svg { width: 100%; height: 100%; display: block; }
.np-key { font-family: ui-monospace, Consolas, monospace; font-size: 16px; background: var(--np-tab); border-radius: 8px; padding: 10px 12px; word-break: break-all; }
.np-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.np-codes li { font-family: ui-monospace, Consolas, monospace; font-size: 16px; background: var(--np-tab); border-radius: 8px; padding: 10px; text-align: center; }
.np-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Settings pages (Account/Manage): a side menu beside the card. */
.np-manage { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.np-manage-nav { flex: 1 1 220px; max-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.np-manage-nav h2 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--np-muted); }
.np-manage-nav a { padding: 11px 14px; border-radius: 8px; text-decoration: none; color: var(--np-ink); font-size: 15px; }
.np-manage-nav a:hover { background: var(--np-tab); }
.np-manage-nav a.active { background: var(--np-accent-soft); color: var(--np-accent-dark); font-weight: 600; box-shadow: inset 3px 0 0 var(--np-accent); }
.np-manage .np-card { flex: 999 1 480px; max-width: 760px; }

/* Home (placeholder until the public site in M4). */
.np-hero { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.np-hero h1 { margin: 0; font-family: var(--np-serif); font-size: clamp(36px, 6vw, 56px); line-height: 1.08; }
.np-hero p { margin: 0; font-size: 20px; line-height: 1.55; color: var(--np-body); }

/* ---------------------------------------------------------------- Blazor error UI */

#blazor-error-ui { background: var(--np-amber-bg); color: var(--np-ink); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none;
                   left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: var(--np-red); padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

@media (max-width: 560px) {
    .np-main { padding: 32px 16px 48px; }
    .np-card { padding: 24px 20px; }
    .np-header-inner, .np-footer-inner { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------- account area (mockups Library, Account) */

.np-acct { min-height: 100vh; display: flex; flex-direction: column; }
.np-acct-top { padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.np-acct-who { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--np-muted); }
.np-acct-who form { margin: 0; }
.np-avatar { width: 36px; height: 36px; border-radius: 50%; background: #DCE5F1; color: #17324F !important; display: flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; }
.np-acct-body { display: flex; flex-wrap: wrap; align-items: flex-start; flex: 1; }
.np-acct-nav { flex: 1 1 220px; max-width: 260px; padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.np-acct-nav a, .np-acct-nav .later { padding: 11px 14px; border-radius: 8px; color: var(--np-ink); text-decoration: none; }
.np-acct-nav a.active { background: #DCE9F7; font-weight: 600; }
.np-acct-nav a:hover { background: var(--np-tab); }
.np-acct-nav .later { color: #8A949E; cursor: default; }
.np-acct-nav .sep { height: 1px; background: var(--np-line); margin: 10px 14px; }
.np-acct-main { flex: 999 1 560px; min-width: 0; padding: 32px 24px 64px; max-width: 1000px; display: flex; flex-direction: column; gap: 28px; }
.np-acct-title { margin: 0; font-family: var(--np-serif); font-size: 34px; }
.np-section { display: flex; flex-direction: column; gap: 14px; }
.np-section h2 { margin: 0; font-size: 21px; }
.np-book { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 14px; padding: 28px; display: flex; flex-wrap: wrap; gap: 28px; }
.np-cover { flex: none; width: 150px; height: 205px; border-radius: 4px 10px 10px 4px; background: #17324F; color: #fff; padding: 18px 14px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 24px rgba(23,33,43,.2); }
.np-cover .t { font-family: var(--np-serif); font-size: 18px; font-weight: 700; line-height: 1.15; }
.np-cover .a { font-size: 10px; color: #C9D6E8; }
.np-book-info { flex: 999 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.np-book-info h2 { margin: 0; font-size: 24px; }
.np-book-info p { margin: 0; font-size: 16px; color: var(--np-body); }
.np-progress { display: flex; align-items: center; gap: 12px; }
.np-progress .track { flex: 1; max-width: 320px; height: 8px; border-radius: 4px; background: #E4E8EC; }
.np-progress .track div { height: 8px; border-radius: 4px; background: var(--np-accent); }
.np-progress span { font-size: 14px; color: var(--np-muted); }
.np-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.np-part { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.np-part h3 { margin: 0 0 4px; font-size: 16px; color: var(--np-accent); }
.np-part a { color: var(--np-ink); text-decoration: none; font-size: 15px; line-height: 1.4; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; }
.np-part a:hover span:first-child { text-decoration: underline; }
.np-part .state { color: var(--np-muted); font-size: 13px; flex: none; }
.np-appendices { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 12px; }
.np-appendices > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--np-tab); font-size: 15px; }
.np-appendices > div:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- reader (mockup Reader) */

.np-reader { --bg: #FFFFFF; --fg: #1E252C; --bar: #F5F6F3; --line: #DADFE3; --hl: #FCEFC2; --soft: #EDF4FB;
             font-family: 'Public Sans', system-ui, sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; display: flex; flex-direction: column; }
.np-reader.theme-sepia { --bg: #F6EEDC; --fg: #3B2F22; --bar: #EDE2CA; --line: #D9C9A8; --hl: #EFD99A; --soft: #EADFC6; }
.np-reader.theme-dark { --bg: #15191E; --fg: #E3E7EB; --bar: #1E242B; --line: #333C46; --hl: #5A4A1C; --soft: #222B36; }
.np-reader a { color: inherit; }
.np-reader .bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; background: var(--bar); border-bottom: 1px solid var(--line); }
.np-reader .bar.foot { border-bottom: 0; border-top: 1px solid var(--line); padding: 12px 16px; gap: 12px; position: sticky; bottom: 0; }
.np-reader .group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.np-reader .booktitle { font-size: 14px; font-weight: 600; padding-left: 6px; }
.np-reader .icon, .np-reader .nav, .np-reader .settings button { font: inherit; color: var(--fg); background: transparent; border: 0; border-radius: 8px; min-width: 44px; min-height: 44px;
                                                                  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.np-reader .icon:hover { background: var(--soft); }
.np-reader .aa { font-family: var(--np-serif); font-size: 18px; font-weight: 600; }
.np-reader .nav { padding: 0 16px; font-weight: 600; font-size: 15px; border: 1px solid var(--line); }
.np-reader .nav:disabled { opacity: .4; cursor: default; }
.np-reader .search { margin: 0; }
.np-reader .search input { font: inherit; font-size: 14px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 200px; }
.np-reader .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.np-reader .body { display: flex; flex: 1; min-height: 0; position: relative; }
.np-reader .panel { flex: none; width: 300px; max-width: 80%; padding: 20px; display: flex; flex-direction: column; gap: 2px; background: var(--bar); border-right: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 130px); position: sticky; top: 0; }
.np-reader .panel strong { font-size: 15px; padding: 4px 0 10px; }
.np-reader .panel strong.gap { padding-top: 18px; }
.np-reader .panel button { font: inherit; color: var(--fg); background: none; border: 0; text-align: left; cursor: pointer; }
.np-reader .panel .toc { font-size: 14px; line-height: 1.35; padding: 9px 10px; border-radius: 8px; }
.np-reader .panel .toc:hover, .np-reader .panel .hit:hover, .np-reader .panel .mark button:hover { background: var(--soft); }
.np-reader .panel .toc.on { background: var(--soft); font-weight: 700; }
.np-reader .panel .hit, .np-reader .panel .mark > button:first-child { font-size: 14px; line-height: 1.5; padding: 8px 10px; border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.np-reader .panel .where { font-size: 12px; font-weight: 700; opacity: .75; }
.np-reader .panel .note { font-style: italic; }
.np-reader .panel .mark { display: flex; flex-direction: column; }
.np-reader .panel .remove { align-self: flex-end; font-size: 12px; color: var(--fg); opacity: .7; padding: 0 10px 6px; }
.np-reader .muted { font-size: 14px; line-height: 1.5; opacity: .8; }
.np-reader .page { flex: 1; min-width: 0; display: flex; justify-content: center; padding: 40px 24px 24px; }
.np-reader article { max-width: 660px; width: 100%; }
.np-reader .part { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.np-reader article h1 { margin: 0 0 28px; font-family: var(--np-serif); font-size: 34px; line-height: 1.2; }
.np-reader .blk { font-family: var(--np-serif); font-size: var(--np-reader-size, 20px); line-height: 1.65; border-radius: 4px; margin: 0 -6px; padding: 0 6px; cursor: pointer; }
.np-reader .blk:hover { background: color-mix(in srgb, var(--soft) 60%, transparent); }
.np-reader .blk.hl { background: var(--hl); }
.np-reader .blk.sel { outline: 2px solid #3473B5; outline-offset: 2px; }
.np-reader .blk p, .np-reader .blk ul, .np-reader .blk ol, .np-reader .blk blockquote, .np-reader .blk table { margin: 0 0 20px; }
.np-reader .blk.heading h2 { margin: 12px 0 14px; font-size: 1.2em; }
.np-reader .blk.heading h3 { margin: 10px 0 10px; font-size: 1.05em; }
.np-reader .blk blockquote { border-left: 3px solid var(--line); padding-left: 16px; font-style: italic; }
.np-reader .blk table { border-collapse: collapse; font-family: 'Public Sans', system-ui, sans-serif; font-size: 15px; width: 100%; }
.np-reader .blk th, .np-reader .blk td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.np-reader .blk th { font-size: 13px; }
.np-reader .blk.table { overflow-x: auto; }
.np-reader .blk input[type=checkbox] { width: 16px; height: 16px; margin-right: 6px; }
.np-reader .blk .task-list-item { list-style: none; margin-left: -1.2em; }
.np-reader .inline-note { font-family: 'Public Sans', system-ui, sans-serif; font-size: 14px; font-style: italic; margin: -12px 0 16px; opacity: .85; }
.np-reader .tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; padding: 10px; border-radius: 10px; background: var(--soft); font-family: 'Public Sans', system-ui, sans-serif; }
.np-reader .tools button { font: inherit; font-size: 14px; font-weight: 600; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.np-reader .tools textarea { flex-basis: 100%; font: inherit; font-size: 15px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.np-reader .tools .save { background: #3473B5; color: #fff; border-color: #3473B5; }
.np-reader .settings { position: absolute; right: 16px; top: 8px; width: 260px; padding: 18px; display: flex; flex-direction: column; gap: 16px; background: var(--bar); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.np-reader .settings > div { display: flex; flex-direction: column; gap: 8px; }
.np-reader .settings span { font-size: 13px; opacity: .8; }
.np-reader .settings .row { display: flex; gap: 8px; }
.np-reader .settings button { border: 1px solid var(--line); padding: 0 12px; font-size: 14px; }
.np-reader .settings button.on { border: 2px solid #3473B5; }
.np-reader .settings button:disabled { opacity: .4; }
.np-reader .foot .where { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 160px; }
.np-reader .foot .track { width: 100%; max-width: 420px; height: 6px; border-radius: 3px; background: var(--line); }
.np-reader .foot .track div { height: 6px; border-radius: 3px; background: #3473B5; }
.np-reader .foot span { font-size: 13px; opacity: .8; }

/* ---------------------------------------------------------------- print an appendix */

.np-print { max-width: 760px; margin: 0 auto; padding: 32px 24px; font-family: var(--np-serif); color: #213046; background: #fff; }
.np-print h1 { font-size: 28px; margin: 4px 0 20px; }
.np-print .blk { font-size: 16px; line-height: 1.55; }
.np-print .blk p, .np-print .blk ul, .np-print .blk ol, .np-print .blk table { margin: 0 0 14px; }
.np-print table { border-collapse: collapse; width: 100%; font-family: 'Public Sans', system-ui, sans-serif; font-size: 13px; }
.np-print th, .np-print td { border: 1px solid #B8C0C8; padding: 6px 8px; text-align: left; vertical-align: top; }
.np-print .task-list-item { list-style: none; margin-left: -1.2em; }
.np-print-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; font-family: 'Public Sans', system-ui, sans-serif; }
.np-print-source { font-family: 'Public Sans', system-ui, sans-serif; font-size: 12px; color: #4A5561; margin: 0; }
@media print {
    .np-print-bar { display: none; }
    .np-print { padding: 0; max-width: none; }
    body { background: #fff; }
}

/* ---------------------------------------------------------------- sign-up goals (mockup Signup) */

.np-goals { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.np-goals legend { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.np-goal { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 10px; cursor: pointer; border: 1px solid var(--np-line); margin: 1px; background: #fff; }
.np-goal:has(input:checked) { border: 2px solid var(--np-accent); margin: 0; background: var(--np-accent-soft); }
.np-goal input { width: 18px; height: 18px; margin: 0; accent-color: var(--np-accent); flex: none; }
.np-goal > span { display: flex; flex-direction: column; gap: 2px; }
.np-goal strong { font-size: 16px; }
.np-goal > span > span { font-size: 14px; color: var(--np-muted); }

/* ---------------------------------------------------------------- account home (mockup Account) */

.np-stage { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.np-stage-row { flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: center; }
.np-stage-row > div:first-child { flex: 999 1 380px; display: flex; flex-direction: column; gap: 10px; }
.np-stage h2 { margin: 0; font-size: 24px; }
.np-stage p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--np-body); }
.np-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--np-accent); }
.np-later-action { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.np-later-action .np-btn[aria-disabled=true] { opacity: .55; cursor: default; pointer-events: none; }
.np-stage-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.np-status { border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; border: 1px solid; }
.np-status-ok { background: #E7F3EE; color: #2A6B52; border-color: #B7DCC7; }
.np-status-watch, .np-status-bad { background: #FFF4E5; color: #7A3A05; border-color: #F0D2A8; }
.np-status-bad { background: #FBEAEA; color: #8F1D1D; border-color: #E5B4B4; }
.np-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.np-tiles > div { background: var(--np-bg, #F5F6F3); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.np-tiles span { font-size: 14px; color: var(--np-muted); }
.np-tiles span:last-child { font-size: 13px; }
.np-tiles strong { font-size: 26px; }
.np-callout { background: var(--np-accent-soft); border-radius: 10px; padding: 16px; font-size: 16px; line-height: 1.5; }
.np-todo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.np-todo li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--np-line); border-radius: 10px; padding: 16px; }
.np-todo li > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.np-todo li > span:first-child span { font-size: 14px; color: var(--np-muted); }
.np-homegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.np-homecard { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--np-body); }
.np-homecard h2 { margin: 0; font-size: 18px; color: var(--np-ink); }
.np-homecard p { margin: 0; line-height: 1.5; }
.np-homecard a { font-weight: 700; padding: 6px 0; }
.np-homecard a.end { margin-top: auto; }
.np-homebook { flex-direction: row; gap: 18px; }
.np-homebook > div:last-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.np-homebook .np-progress .track { max-width: none; }
.np-minicover { flex: none; width: 74px; height: 100px; border-radius: 3px 7px 7px 3px; background: #17324F; color: #fff; font-family: var(--np-serif); font-size: 11px; font-weight: 700; line-height: 1.15; padding: 10px 8px; box-sizing: border-box; }

/* ---------------------------------------------------------------- public site (mockups Main, Check, Audit, Resources, Legal) */

.np-page { flex: 1; }
.np-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.np-band { background: var(--np-surface); }
.np-heroband { padding: 80px 24px 72px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.np-heroband.tight { padding: 72px 24px; gap: 48px; }
.np-herotext { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.np-kicker { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--np-muted); }
.np-display { margin: 0; font-family: var(--np-serif); font-size: 56px; line-height: 1.08; font-weight: 700; }
.np-display.smaller { font-size: 50px; line-height: 1.1; }
.np-intro { margin: 0; font-size: 20px; line-height: 1.55; color: var(--np-body); max-width: 620px; }
.np-btn-lg { padding: 0 22px; min-height: 52px; font-size: 17px; }
.np-heroart { flex: 1 1 300px; display: flex; justify-content: center; }
.np-bigcover { width: 280px; height: 380px; border-radius: 6px 14px 14px 6px; background: #17324F; color: #fff; padding: 36px 30px; box-sizing: border-box;
               display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 18px 40px rgba(23,33,43,.22); }
.np-bigcover > div { display: flex; flex-direction: column; gap: 14px; }
.np-bigcover > div:last-child { gap: 4px; }
.np-bigcover .ed { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #C9D6E8; }
.np-bigcover .t { font-family: var(--np-serif); font-size: 32px; line-height: 1.12; font-weight: 700; }
.np-bigcover .s { font-size: 15px; line-height: 1.4; color: #DCE5F1; }
.np-bigcover .a { font-size: 15px; font-weight: 600; }
.np-bigcover .p { font-size: 12px; color: #C9D6E8; }
.np-sec { padding: 72px 24px 24px; }
.np-sec.last { padding-bottom: 72px; }
.np-sec h2.big { margin: 0 0 8px; font-family: var(--np-serif); font-size: 36px; }
.np-sec h2.mid { margin: 0 0 28px; font-family: var(--np-serif); font-size: 34px; }
.np-sec .sub { margin: 0 0 32px; font-size: 18px; color: var(--np-body); }
.np-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.np-cards.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.np-mcard { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.np-mcard.small { padding: 22px; gap: 8px; }
.np-mcard h3 { margin: 0; font-size: 21px; }
.np-mcard.small h3 { font-size: 18px; }
.np-mcard p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--np-body); }
.np-mcard.small p { font-size: 15px; }
.np-mcard .price { font-weight: 700; font-size: 18px; color: var(--np-ink); }
.np-mcard > a:last-child { margin-top: auto; font-weight: 600; text-decoration: none; padding: 10px 0; }
.np-howsteps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.np-howsteps li { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--np-accent); padding-top: 18px; }
.np-howsteps .n { font-size: 14px; font-weight: 700; color: var(--np-accent); }
.np-howsteps strong { font-size: 19px; }
.np-howsteps li > span:last-child { font-size: 16px; line-height: 1.55; color: var(--np-body); }
.np-panel { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 12px; padding: 36px; display: flex; flex-wrap: wrap; gap: 36px; }
.np-panel > div:first-child { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.np-panel h2 { margin: 0; font-family: var(--np-serif); font-size: 30px; }
.np-panel > div:first-child p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--np-body); }
.np-rulelist { flex: 2 1 480px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 28px; font-size: 16px; line-height: 1.45; }
.np-rulelist li { display: flex; gap: 10px; }
.np-rulelist svg { flex: none; margin-top: 1px; }
.np-numbered { flex: 2 1 460px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.np-numbered li { display: flex; gap: 14px; font-size: 16px; line-height: 1.55; }
.np-numbered .c { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #DCE9F7; color: var(--np-accent); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.np-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.np-price { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.np-price.featured { border: 2px solid var(--np-accent); padding: 27px; }
.np-price h3 { margin: 0; font-size: 19px; }
.np-price .amt { margin: 0; font-size: 34px; font-weight: 700; }
.np-price .amt span { font-size: 15px; font-weight: 500; color: var(--np-muted); }
.np-price ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.7; color: var(--np-body); }
.np-dark { background: #17324F; color: #fff; border-radius: 16px; padding: 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.np-dark.cta { padding: 44px; gap: 24px; justify-content: space-between; }
.np-dark > div { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.np-dark .np-kicker { color: #C9D6E8; }
.np-dark h2 { margin: 0; font-family: var(--np-serif); font-size: 36px; line-height: 1.15; }
.np-dark.cta h2 { font-size: 32px; flex: 1 1 400px; }
.np-dark p { margin: 0; font-size: 18px; line-height: 1.6; color: #DCE5F1; }
.np-btn-light { background: #fff; color: #17324F !important; text-decoration: none; padding: 15px 22px; border-radius: 8px; font-weight: 700; font-size: 17px; }
.np-sample { flex: 1 1 340px; background: #F5F6F3; border: 1px solid var(--np-line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.np-sample .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.np-tag { font-size: 12px; font-weight: 700; color: #7A3A05; background: #FFF4E5; border: 1px solid #F0D2A8; border-radius: 999px; padding: 4px 10px; }
.np-sample .score { display: flex; align-items: baseline; gap: 10px; }
.np-sample .score span:first-child { font-size: 44px; font-weight: 700; }
.np-sample ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.np-sample li { display: flex; justify-content: space-between; gap: 10px; background: #fff; border-radius: 8px; padding: 10px 12px; }
.t-risk { color: #7A3A05; } .t-fail { color: #8F1D1D; } .t-pass { color: #2A6B52; } .t-later { color: var(--np-accent); }
.np-report { width: 320px; background: #fff; border: 1px solid var(--np-line); border-radius: 6px; box-shadow: 0 14px 34px rgba(23,33,43,.16); padding: 26px;
             display: flex; flex-direction: column; gap: 12px; transform: rotate(-1.5deg); }
.np-report .head { display: flex; justify-content: space-between; align-items: center; }
.np-report .head strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--np-muted); }
.np-report .org { font-family: var(--np-serif); font-size: 22px; font-weight: 700; }
.np-report .rule { height: 1px; background: var(--np-line); }
.np-report .rows { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.np-report .rows > span { display: flex; justify-content: space-between; }
.np-report .lines { height: 60px; border-radius: 6px; background: repeating-linear-gradient(#F5F6F3 0 8px, #fff 8px 14px); }
.np-faq { display: flex; flex-direction: column; gap: 12px; }
.np-faq details { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 12px; padding: 18px 22px; }
.np-faq summary { font-size: 17px; font-weight: 600; cursor: pointer; }
.np-faq p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--np-body); }
.np-nav a.on { font-weight: 700; }
.np-resources { padding: 56px 24px 72px; display: flex; flex-direction: column; gap: 40px; }
.np-resources h1 { margin: 0; font-family: var(--np-serif); font-size: 46px; line-height: 1.1; }
.np-resources h2.serif { margin: 0; font-family: var(--np-serif); font-size: 30px; }
.np-resources > section { display: flex; flex-direction: column; gap: 14px; }
.np-resources > section > p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--np-body); max-width: 760px; }
.np-medcover { flex: none; width: 120px; height: 164px; border-radius: 3px 8px 8px 3px; background: #fff; color: #17324F; padding: 14px 12px; box-sizing: border-box; font-family: var(--np-serif); font-size: 15px; font-weight: 700; line-height: 1.15; }
.np-updates { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 12px; padding: 22px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.np-updates > span { display: flex; flex-direction: column; gap: 4px; }
.np-updates form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.np-updates .np-field input { width: 240px; padding: 0 13px; }
.np-glinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.np-glinks a { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 10px; padding: 16px 18px; text-decoration: none; color: var(--np-ink); display: flex; flex-direction: column; gap: 4px; }
.np-glinks strong { font-size: 16px; color: var(--np-accent); }
.np-glinks span { font-size: 13px; color: var(--np-muted); }
.np-ctabox { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 14px; padding: 28px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.np-ctabox > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; }
.np-ctabox h2 { margin: 0; font-size: 22px; }
.np-ctabox p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--np-body); }
.np-draft { background: #FFF4E5; border-bottom: 1px solid #F0D2A8; padding: 10px 24px; font-size: 14px; color: #5C3A12; }
.np-draft strong { color: #7A3A05; }
.np-legal { max-width: 880px; margin: 0 auto; padding: 48px 24px 72px; display: flex; flex-direction: column; gap: 24px; }
.np-legal h1 { margin: 0; font-family: var(--np-serif); font-size: 42px; }
.np-legaltabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--np-line); }
.np-legaltabs a { font-size: 15px; font-weight: 600; padding: 12px 14px; min-height: 44px; box-sizing: border-box; margin-bottom: -1px; color: var(--np-muted); text-decoration: none; border-bottom: 3px solid transparent; }
.np-legaltabs a.on { color: var(--np-accent); border-bottom-color: var(--np-accent); }
.np-legal section { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.np-legal h2 { margin: 0; font-size: 19px; }
.np-legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.6; color: var(--np-body); }
@media (max-width: 640px) {
    .np-display { font-size: 40px; }
    .np-display.smaller { font-size: 36px; }
    .np-heroband, .np-heroband.tight { padding: 48px 16px; }
    .np-sec { padding: 48px 16px 16px; }
    .np-wrap { padding: 0 16px; }
    .np-dark, .np-dark.cta, .np-panel { padding: 28px 20px; }
    .np-report { width: 100%; max-width: 320px; }
}

/* ---------------------------------------------------------------- connect (mockup Connect) */

.np-connstatus { display: flex; gap: 14px; align-items: flex-start; border-radius: 12px; padding: 18px 20px; background: #fff; color: var(--np-ink); border: 1px solid var(--np-line); }
.np-connstatus > div { display: flex; flex-direction: column; gap: 4px; }
.np-connstatus strong { font-size: 17px; }
.np-connstatus span { font-size: 15px; line-height: 1.5; }
.np-connstatus svg { flex: none; }
.np-connstatus.wait { background: #EDF4FB; color: #2B5E95; border-color: #C3D8EE; }
.np-connstatus.ok { background: #E7F3EE; color: #2A6B52; border-color: #B7DCC7; }
.np-copyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #F5F6F3; border-radius: 10px; padding: 14px 16px; font-size: 15px; }
.np-copyrow code { font-size: 15px; font-weight: 700; }
.np-other { border-top: 1px solid var(--np-line); padding-top: 16px; }
.np-other summary { font-size: 16px; font-weight: 600; cursor: pointer; }
.np-other > div { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 14px; }
.np-connrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; border: 1px solid var(--np-line); border-radius: 10px; padding: 16px; }
.np-connrow > span { display: flex; flex-direction: column; gap: 2px; }
.np-connrow > span > span { font-size: 14px; color: var(--np-muted); }
.np-connrow details { font-size: 15px; max-width: 420px; }
.np-connrow summary { cursor: pointer; color: var(--np-accent); }
.np-connrow details p { margin: 8px 0 0; line-height: 1.5; color: var(--np-body); }
.np-chip { font-size: 13px; font-weight: 700; color: var(--np-muted); background: #EEF1F4; border-radius: 999px; padding: 5px 10px; }

/* ---------------------------------------------------------------- results (mockup Results) */

.np-results { display: flex; flex-direction: column; gap: 22px; }
.np-score { display: flex; align-items: baseline; gap: 12px; }
.np-score span:first-child { font-size: 52px; font-weight: 700; }
.np-score span:last-child { font-size: 18px; color: var(--np-body); }
.np-fixes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.np-fixes li { display: flex; flex-direction: column; gap: 4px; background: #F5F6F3; border-radius: 10px; padding: 16px 18px; }
.np-fixes strong { font-size: 16px; }
.np-fixes span { font-size: 15px; line-height: 1.5; color: var(--np-body); }
.np-fixes a { font-size: 14px; font-weight: 600; padding: 4px 0; align-self: flex-start; }
.np-ruletable { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.np-ruletable th { text-align: left; color: var(--np-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--np-line); }
.np-ruletable td { padding: 12px; border-bottom: 1px solid #EEF1F4; vertical-align: top; }
.np-ruletable td:nth-child(2) { color: var(--np-body); }
.np-badge { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; background: #EEF1F4; color: var(--np-muted); }
.np-badge-pass { background: #E7F3EE; color: #2A6B52; }
.np-badge-fail { background: #FBE9E9; color: #8F1D1D; }
.np-badge-atrisk { background: #FFF4E5; color: #7A3A05; }
.np-histrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding: 16px 24px; border-bottom: 1px solid #EEF1F4; }
.np-histrow:last-child { border-bottom: 0; }
.np-histrow > span { display: flex; flex-direction: column; gap: 2px; }
.np-histrow > span > span { font-size: 14px; color: var(--np-muted); }
.np-histrow a { font-weight: 700; padding: 10px 0; }
.np-homefixes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--np-body); }

/* ---------------------------------------------------------------- checkout and billing (mockups Checkout, Billing) */

.np-checkout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.np-checkout-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.np-svc { align-items: flex-start; padding: 18px; }
.np-svc input { margin-top: 2px; width: 20px; height: 20px; }
.np-svc > span { flex: 1; gap: 4px; }
.np-svc .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.np-svc .top strong { font-size: 17px; }
.np-svc > span > span:last-child { font-size: 15px; line-height: 1.5; color: var(--np-body); }
.np-summary { flex: 1 1 300px; padding: 24px; gap: 14px; }
.np-summary .line { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; }
.np-summary .line.credit { color: #2A6B52; font-weight: 600; }
.np-summary .rule { height: 1px; background: var(--np-line); }
.np-summary .total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; }
.np-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* The shared pager (console.css styles it in the console). */
.np-acct .npag-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; font-size: 14px; color: var(--np-muted); border-top: 1px solid #EEF1F4; }
.np-acct .npag-pager > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.np-acct .npag-pager button { font: inherit; min-width: 36px; min-height: 36px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--np-ink); cursor: pointer; padding: 0 10px; }
.np-acct .npag-pager button.on { border-color: var(--np-accent); color: var(--np-accent); font-weight: 700; }
.np-acct .npag-pager button:disabled { opacity: .4; cursor: default; }

/* ---------------------------------------------------------------- audit report (mockup Results, Audit tab) */

.np-audit-org { margin: 0; font-family: var(--np-serif); font-size: 28px; }
.np-audit-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.np-audit-tiles > div { background: #F5F6F3; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.np-audit-tiles > div.risk { background: #FFF4E5; color: #7A3A05; }
.np-audit-tiles > div.ok { background: #E7F3EE; color: #2A6B52; }
.np-audit-tiles span { font-size: 13px; color: var(--np-muted); }
.np-audit-tiles strong { font-size: 18px; }
.np-twelve { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; }
.np-twelve > div, .np-twelve-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF1F4; font-size: 15px; align-items: flex-start; }
.np-twelve small, .np-twelve-row small { display: block; font-size: 13px; color: var(--np-muted); margin-top: 2px; }
.np-more summary { font-size: 18px; font-weight: 700; cursor: pointer; }
.np-badge-none { background: #EEF1F4; color: var(--np-muted); }
.np-print-audit { max-width: 900px; }
.np-print-audit .np-stage { border: 0; padding: 0 0 18px; }

/* ---------------------------------------------------------------- proposal and plan (mockups Proposal, Billing) */

.np-proposal { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.np-proposal-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.np-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.np-timeline li { display: flex; gap: 14px; align-items: flex-start; }
.np-timeline .when { flex: none; min-width: 84px; font-size: 13px; font-weight: 700; color: var(--np-accent); padding-top: 2px; }
.np-timeline li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.np-timeline strong { font-size: 16px; }
.np-timeline li > span:last-child > span { font-size: 14px; color: var(--np-muted); line-height: 1.5; }
.np-monthly { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.8; color: var(--np-body); }
.np-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.np-who > div { display: flex; flex-direction: column; gap: 6px; }
.np-who h3 { margin: 0; font-size: 16px; }
.np-who span { font-size: 15px; line-height: 1.55; color: var(--np-body); }
.np-plan { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.np-confirm { background: #FBE9E9; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.np-confirm strong { font-size: 15px; color: #8F1D1D; }

/* ---------------------------------------------------------------- client approvals (mockup ClientApprovals) */

.np-acct-nav .group { padding: 14px 14px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--np-muted); }
.np-acct-nav a.with-count { display: flex; justify-content: space-between; align-items: center; }
.np-acct-nav .count { background: var(--np-accent); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 13px; font-weight: 700; }
.np-approval { gap: 22px; }
.np-approval h3 { margin: 0; font-size: 17px; }
.np-changes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.np-changes li { background: #F5F6F3; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.np-changes strong { font-size: 15px; }
.np-changes span { font-size: 15px; line-height: 1.5; color: var(--np-body); }
.np-ok-box, .np-grey-box { flex: 1 1 260px; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; }
.np-ok-box { background: #E7F3EE; color: #2A6B52; }
.np-grey-box { background: #F5F6F3; color: var(--np-body); }
.np-ok-box strong, .np-grey-box strong { font-size: 15px; }
.np-decide { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--np-line); padding-top: 18px; }

/* ---------------------------------------------------------------- client status and history (mockups Status, History) */

.np-ask { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--np-line); border-radius: 10px; padding: 14px 16px; }
.np-ask > span:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; }
.np-ask > span:first-child > span { font-size: 14px; color: var(--np-muted); }
.np-ask.done { background: #F5F6F3; }
.np-ask.done strong { color: var(--np-muted); text-decoration: line-through; }
.np-where { display: flex; flex-direction: column; gap: 4px; background: #F5F6F3; border-radius: 10px; padding: 14px; }
.np-where span { font-size: 13px; color: var(--np-muted); }
.np-update { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid #EEF1F4; }
.np-update:last-child { border-bottom: 0; }
.np-update > span:first-child { flex: none; width: 52px; font-size: 13px; font-weight: 700; color: var(--np-muted); }
.np-update > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.np-update > span:last-child > span { font-size: 14px; line-height: 1.5; }
.np-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.np-filters button { font: inherit; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 9px 16px; min-height: 40px; cursor: pointer; background: #fff; color: var(--np-ink); border: 1px solid var(--np-field); }
.np-filters button.on { background: var(--np-ink); color: #fff; border-color: var(--np-ink); }
.np-hrow { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 20px; border-bottom: 1px solid #EEF1F4; align-items: flex-start; }
.np-hrow .d { flex: none; width: 56px; font-size: 14px; font-weight: 700; color: var(--np-muted); }
.np-hrow .w { flex: 1 1 360px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--np-body); }
.np-hrow .w strong { font-size: 15px; color: var(--np-ink); }
.np-kind { align-self: flex-start; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.k-you { background: #FFF4E5; color: #7A3A05; }
.k-routine { background: #EDF4FB; color: #2B5E95; }
.k-automatic { background: #EEF1F4; color: #36414C; }
.k-outside { background: #F3EAF7; color: #5B2A73; }

/* ---------------------------------------------------------------- client onboarding, tasks, settings (mockups Onboarding, Tasks, Settings) */

.np-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: #EEF1F4; color: #4A5561; }
.np-dot.done { background: #2A6B52; color: #fff; }
.np-dot.now { background: var(--np-accent); color: #fff; }
.np-need { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; border-radius: 10px; padding: 16px; border: 1px solid #C3D8EE; background: #F5F9FD; }
.np-need.done { border-color: transparent; background: #F5F6F3; }
.np-need-main { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 320px; }
.np-need-main > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.np-need-main > span:last-child > span { font-size: 14px; color: var(--np-muted); line-height: 1.45; }
.np-need-cta { font-weight: 700; padding: 10px 0; white-space: nowrap; }
.np-setup { margin: 0; padding: 0; list-style: none; }
.np-setup li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid #EEF1F4; }
.np-setup li:last-child { border-bottom: 0; }
.np-setup-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.np-setup-body > span:last-child { font-size: 14px; color: var(--np-muted); line-height: 1.5; }
.np-setup-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.np-setup-head > span { font-size: 13px; font-weight: 600; color: var(--np-muted); }
.np-setup-head .when-done { color: #2A6B52; }
.np-setup-head .when-now { color: var(--np-accent); }
.np-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.np-taskwrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.np-tasklist { flex: 1 1 280px; min-width: 0; background: #fff; border: 1px solid var(--np-line); border-radius: 12px; overflow: hidden; }
.np-tasklist > button { font: inherit; color: var(--np-ink); width: 100%; text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border: 0; border-bottom: 1px solid #EEF1F4; cursor: pointer; background: #fff; }
.np-tasklist > button.on { background: #EDF4FB; box-shadow: inset 4px 0 0 var(--np-accent); }
.np-tasklist > button strong { font-size: 15px; }
.np-tasklist > button > span:last-child { font-size: 13px; color: var(--np-muted); }
.np-taskdetail { flex: 2 1 420px; min-width: 0; background: #fff; border: 1px solid var(--np-line); border-radius: 12px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.np-taskdetail h2 { margin: 0; }
.np-taskstate { border-radius: 10px; padding: 14px 16px; font-size: 15px; background: #F5F6F3; color: #36414C; }
.np-taskstate.done { background: #E7F3EE; color: #2A6B52; }
.k-done { background: #E7F3EE; color: #2A6B52; }
.np-pause { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.np-switch { flex: none; width: 64px; height: 36px; border-radius: 18px; border: 0; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; background: #B8C0C8; }
.np-switch.on { background: #7A3A05; justify-content: flex-end; }
.np-switch:disabled { cursor: not-allowed; opacity: .6; }
.np-switch > span { width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.np-switch:focus-visible { outline: 3px solid var(--np-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- client reports (mockup Reports) */

.np-mtabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--np-line); }
.np-mtabs button { font: inherit; font-size: 15px; font-weight: 600; background: none; border: 0; padding: 12px 14px; min-height: 44px; cursor: pointer; margin-bottom: -1px;
                   color: var(--np-muted); border-bottom: 3px solid transparent; }
.np-mtabs button.on { color: var(--np-accent); border-bottom-color: var(--np-accent); }
.np-mreport { background: #fff; border: 1px solid var(--np-line); border-radius: 14px; padding: 36px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.np-mreport-head { display: flex; flex-direction: column; gap: 4px; border-bottom: 2px solid var(--np-ink); padding-bottom: 14px; }
.np-mreport-head span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--np-muted); }
.np-mreport-head h2 { margin: 0; font-family: var(--np-serif); font-size: 30px; }
.np-mreport p { margin: 0; font-size: 17px; line-height: 1.6; }
.np-mtable { background: #fff; border: 1px solid var(--np-line); border-radius: 14px; overflow-x: auto; min-width: 0; max-width: 100%; position: relative; } /* wide tables scroll inside, not the page; position keeps hidden labels inside too */
.np-mtable table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.np-mtable th { text-align: left; color: var(--np-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: #FAFBFA; padding: 12px 16px; border-bottom: 1px solid var(--np-line); }
.np-mtable td { padding: 12px 16px; border-bottom: 1px solid #EEF1F4; }
.np-mtable td.v { font-weight: 700; }
.np-mtable td.c { color: #36414C; }
.np-mnotes { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.55; color: #36414C; }
.np-mnotes strong { color: var(--np-ink); }
.np-mpast { background: #fff; border: 1px solid var(--np-line); border-radius: 14px; }
.np-mpast > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding: 16px 20px; border-bottom: 1px solid #EEF1F4; }
.np-mpast > div > span { display: flex; flex-direction: column; gap: 2px; }
.np-mpast > div > span > span { font-size: 14px; color: var(--np-muted); }
.np-mpast .np-linklike { font-weight: 700; padding: 8px 0; }
@media print { .np-mreport, .np-mtable { border: 0; padding: 0; max-width: none; } .np-mtable table { min-width: 0; } .np-mreport { margin-bottom: 28px; } }

/* ---------------------------------------------------------------- client intake interview (mockup Intake) */

.np-intake { min-height: 100vh; background: var(--np-bg, #F5F6F3); }
.np-intake-top { background: #fff; border-bottom: 1px solid var(--np-line); }
.np-intake-top > div:first-child { padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.np-intake-top > div:first-child a { font-size: 15px; padding: 8px 0; }
.np-intake-top > div:first-child span { font-size: 14px; color: var(--np-muted); }
.np-intake-top .bar { height: 4px; background: #E4E8EC; }
.np-intake-top .bar > div { height: 4px; background: var(--np-accent); }
.np-intake-body { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; box-sizing: border-box; }
.np-intake-nav { flex: 1 1 240px; max-width: 280px; display: flex; flex-direction: column; gap: 4px; }
.np-intake-nav > span { font-size: 13px; font-weight: 700; color: var(--np-muted); padding: 0 12px 8px; }
.np-intake-nav button { font: inherit; text-align: left; display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 8px; font-size: 15px;
                        border: 0; background: none; cursor: pointer; color: #36414C; }
.np-intake-nav button span:last-child { font-size: 13px; font-weight: 600; }
.np-intake-nav button.on { background: #DCE9F7; font-weight: 700; color: var(--np-ink); }
.np-intake-nav button.full { color: #2A6B52; }
.np-intake-main { flex: 999 1 520px; min-width: 0; }
.np-intake-card { background: #fff; border: 1px solid var(--np-line); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 20px; }
.np-intake-card h1 { margin: 0; font-family: var(--np-serif); font-size: 28px; line-height: 1.3; }
.np-intake-card > p { margin: 0; font-size: 16px; line-height: 1.6; color: #36414C; }
.np-intake-where { font-size: 14px; font-weight: 600; color: var(--np-accent); }
.np-intake-intro { margin: 0; font-size: 15px; color: var(--np-muted); }
.np-intake-card input, .np-intake-card textarea { font: inherit; font-size: 17px; padding: 14px 16px; border: 1px solid var(--np-field); border-radius: 10px; width: 100%; box-sizing: border-box; }
.np-intake-card textarea { resize: vertical; }
.np-intake-opts { display: flex; flex-direction: column; gap: 10px; }
.np-intake-opts button { font: inherit; font-size: 17px; text-align: left; border-radius: 10px; padding: 15px 18px; cursor: pointer; border: 1px solid var(--np-field); margin: 1px; background: #fff; color: var(--np-ink); }
.np-intake-opts button.on { border: 2px solid var(--np-accent); margin: 0; background: #EDF4FB; font-weight: 600; }
.np-intake-table { display: flex; flex-direction: column; gap: 12px; }
.np-intake-table .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; border: 1px solid #EEF1F4; border-radius: 10px; padding: 12px; }
.np-intake-table .row label { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--np-muted); }
.np-intake-table .row input { font-size: 16px; padding: 10px 12px; }
.np-intake-help { white-space: pre-line; font-size: 15px; line-height: 1.55; border: 1px solid #C3D8EE; background: #F5F9FD; border-radius: 10px; padding: 14px 16px; }
.np-intake-why { background: #F5F6F3; border-radius: 10px; padding: 14px 16px; display: flex; gap: 10px; color: var(--np-accent); }
.np-intake-why svg { flex: none; margin-top: 1px; }
.np-intake-why span { font-size: 15px; line-height: 1.55; color: #36414C; }
.np-intake-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.np-intake-actions > div { display: flex; flex-wrap: wrap; gap: 10px; }
.np-intake-actions .np-linklike { font-size: 16px; font-weight: 600; padding: 12px 4px; }
@media (max-width: 600px) { .np-intake-card { padding: 22px; } .np-intake-nav { max-width: none; } }
.npag-answers { margin: 10px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; font-size: 14px; }
.npag-answers dt { color: var(--npag-muted, #4A5561); }
.npag-answers dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- client manager link (mockup ManagerLink) */

.np-linkstatus { display: flex; gap: 14px; align-items: flex-start; border-radius: 12px; padding: 18px 20px; background: #EDF4FB; color: #2B5E95; border: 1px solid #C3D8EE; }
.np-linkstatus svg { flex: none; }
.np-linkstatus > span { display: flex; flex-direction: column; gap: 4px; }
.np-linkstatus strong { font-size: 17px; }
.np-linkstatus > span > span { font-size: 15px; line-height: 1.5; }
.np-linkstatus.s-accepted { background: #E7F3EE; color: #2A6B52; border-color: #B7DCC7; }
.np-linkstatus.s-fallback { background: #FFF4E5; color: #7A3A05; border-color: #F0D2A8; }
.np-lookfor { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; background: #F5F6F3; border-radius: 10px; padding: 14px 16px; font-size: 15px; }
.np-lookfor > span:last-child { color: var(--np-muted); }
.np-ticklist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; }


/* ---------------------------------------------------------------- organization and people (mockup People) */

.np-orgsum { background: #fff; border: 1px solid var(--np-line); border-radius: 14px; padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.np-orgsum > div { display: flex; flex-direction: column; gap: 2px; }
.np-orgsum > div > span { font-size: 13px; color: var(--np-muted); }
.np-orgsum strong { font-size: 16px; overflow-wrap: anywhere; }
.np-invite { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px 20px; border-top: 1px solid #EEF1F4; }
.np-invite .np-field { flex: 1 1 220px; }
.np-invite .np-field:nth-child(2) { flex: 0 1 160px; }
.np-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.np-roles > div { display: flex; flex-direction: column; gap: 4px; }
.np-roles span { font-size: 14px; color: var(--np-muted); line-height: 1.5; }


/* ---------------------------------------------------------------- brand (logo from branding\, web copies in wwwroot\brand) */

.np-brand img { display: block; height: 40px; width: auto; }
@media (max-width: 600px) { .np-brand img { height: 32px; } }
.np-print-logo { display: block; height: 40px; width: auto; margin: 4px 0 20px; }