/* ==========================================================================
   NIZAM — VISITOR WEBSITE
   Bootstrap 5 provides the grid and component behaviour; this file provides
   the Nizam visual identity on top. One card style, one section header, one
   spinner, one toast, one table — reused everywhere.
   ========================================================================== */

/* ==========================================================================
   1. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nz-header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	font-family: var(--nz-font);
	font-size: 1rem;
	line-height: var(--nz-lh-body);
	color: var(--nz-body);
	background: var(--nz-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .nz-h1, .nz-h2, .nz-h3 {
	font-family: var(--nz-font);
	color: var(--nz-ink);
	font-weight: 800;
	line-height: var(--nz-lh-head);
	letter-spacing: var(--nz-tracking-head);
	margin: 0 0 .5rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--nz-brand); text-decoration: none; transition: color var(--nz-t-fast); }
a:hover { color: var(--nz-brand-700); }

img, svg { max-width: 100%; height: auto; }
hr { border-color: var(--nz-line); opacity: 1; }

::selection { background: var(--nz-brand-100); color: var(--nz-ink); }

:focus-visible {
	outline: 3px solid rgba(15, 118, 110, .35);
	outline-offset: 2px;
	border-radius: var(--nz-r-xs);
}

.nz-skip {
	position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 2000;
	background: var(--nz-ink); color: #fff; padding: .7rem 1.1rem;
	border-radius: var(--nz-r-sm); font-weight: 600; transition: top var(--nz-t);
}
.nz-skip:focus { top: 1rem; color: #fff; }

.nz-container { width: 100%; max-width: var(--nz-container); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 992px) { .nz-container { padding-inline: 2rem; } }

/* ==========================================================================
   2. SECTION SCAFFOLD
   ========================================================================== */

.nz-section { position: relative; padding-block: var(--nz-section-y); }
.nz-section--sm { padding-block: var(--nz-section-y-sm); }
.nz-section--tight-top { padding-top: 0; }
.nz-section--tight-bottom { padding-bottom: 0; }
.nz-section--soft { background: var(--nz-soft); }

/* The soft colour wash behind hero and feature bands. */
.nz-section--wash { background: var(--nz-white); }
.nz-section--wash::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background:
		radial-gradient(60rem 32rem at 12% -8%,  rgba(15, 118, 110, .09), transparent 62%),
		radial-gradient(48rem 30rem at 92% 4%,   rgba(212, 160, 23, .10), transparent 60%),
		radial-gradient(44rem 30rem at 50% 108%, rgba(109, 74, 199, .07), transparent 62%);
}
.nz-section--wash > * { position: relative; z-index: 1; }

.nz-section-head { max-width: var(--nz-measure); margin-inline: auto; text-align: center; margin-bottom: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); }
.nz-section-head--start { text-align: start; margin-inline: 0; }
.nz-section-head .nz-lead { margin-top: .9rem; }

/* ==========================================================================
   3. TYPOGRAPHY UTILITIES
   ========================================================================== */

.nz-display { font-size: var(--nz-fs-display); line-height: var(--nz-lh-tight); letter-spacing: var(--nz-tracking-tight); font-weight: 800; }
.nz-h1 { font-size: var(--nz-fs-h1); letter-spacing: var(--nz-tracking-tight); }
.nz-h2 { font-size: var(--nz-fs-h2); letter-spacing: var(--nz-tracking-tight); }
.nz-h3 { font-size: var(--nz-fs-h3); }

.nz-lead { font-size: var(--nz-fs-lead); color: var(--nz-body); line-height: 1.68; }
.nz-small { font-size: var(--nz-fs-sm); }
.nz-muted { color: var(--nz-muted); }
.nz-ink { color: var(--nz-ink); }

/* The coloured half of a two-tone heading. */
.nz-accent { color: var(--nz-brand); }

/* Gold highlight swash under a word — drawn behind the text. */
.nz-mark { position: relative; display: inline-block; white-space: nowrap; }
.nz-mark::after {
	content: ""; position: absolute; inset-inline: -.08em; bottom: .07em; height: .34em;
	background: linear-gradient(90deg, rgba(212, 160, 23, .42), rgba(212, 160, 23, .22));
	border-radius: .2em; z-index: -1;
}

.nz-balance { text-wrap: balance; }

/* ==========================================================================
   4. EYEBROW PILL
   ========================================================================== */

.nz-eyebrow {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .4rem .85rem;
	background: var(--nz-a-bg, var(--nz-brand-050));
	color: var(--nz-a, var(--nz-brand));
	border-radius: var(--nz-r-pill);
	font-size: var(--nz-fs-xs); font-weight: 700;
	letter-spacing: var(--nz-tracking-wide); text-transform: uppercase;
	margin-bottom: 1.1rem;
	border: 1px solid color-mix(in srgb, var(--nz-a, var(--nz-brand)) 14%, transparent);
}
.nz-eyebrow .bi { font-size: .95em; }
[dir="rtl"] .nz-eyebrow { letter-spacing: 0; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
	--bs-btn-font-weight: 600;
	border-radius: var(--nz-r-sm);
	padding: .72rem 1.25rem;
	font-size: .95rem;
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	transition: background-color var(--nz-t-fast), border-color var(--nz-t-fast),
	            color var(--nz-t-fast), box-shadow var(--nz-t), transform var(--nz-t-fast);
	position: relative;
}
.btn:active { transform: translateY(1px); }
.btn .bi { font-size: 1.05em; line-height: 1; }

.btn-nz {
	background: var(--nz-brand); border: 1px solid var(--nz-brand); color: #fff;
	box-shadow: var(--nz-shadow-brand);
}
.btn-nz:hover, .btn-nz:focus { background: var(--nz-brand-700); border-color: var(--nz-brand-700); color: #fff; }

.btn-nz-outline {
	background: #fff; border: 1px solid var(--nz-line); color: var(--nz-ink);
	box-shadow: var(--nz-shadow-xs);
}
.btn-nz-outline:hover, .btn-nz-outline:focus { border-color: var(--nz-brand); color: var(--nz-brand); background: #fff; }

.btn-nz-ghost { background: transparent; border: 1px solid transparent; color: var(--nz-ink); }
.btn-nz-ghost:hover { background: var(--nz-soft); color: var(--nz-brand); }

.btn-nz-light { background: #fff; border: 1px solid transparent; color: var(--nz-brand); box-shadow: var(--nz-shadow-sm); }
.btn-nz-light:hover { background: #fff; color: var(--nz-brand-700); box-shadow: var(--nz-shadow); }

.btn-nz-dark { background: var(--nz-ink); border: 1px solid var(--nz-ink); color: #fff; }
.btn-nz-dark:hover { background: #16293c; border-color: #16293c; color: #fff; }

.btn-nz-danger { background: var(--nz-danger); border: 1px solid var(--nz-danger); color: #fff; }
.btn-nz-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.btn-lg { padding: .95rem 1.6rem; font-size: 1rem; border-radius: var(--nz-r); }
.btn-sm { padding: .48rem .85rem; font-size: .84rem; }

/*
 * A button that is working keeps its own colours.
 * NZ.Button.start() disables it while the request is in flight, and
 * Bootstrap's :disabled rule would repaint the primary action white —
 * which makes it read as a different, secondary button at the exact moment
 * the user is waiting on it. aria-busy is what tells the two apart: busy
 * means "this is still your button", plain disabled still greys out.
 */
.btn[aria-busy="true"]:disabled { opacity: .9; cursor: progress; }
.btn-nz[aria-busy="true"]:disabled {
	background: var(--nz-brand); border-color: var(--nz-brand); color: #fff;
}
.btn-nz-dark[aria-busy="true"]:disabled {
	background: var(--nz-ink); border-color: var(--nz-ink); color: #fff;
}
.btn-nz-danger[aria-busy="true"]:disabled {
	background: var(--nz-danger); border-color: var(--nz-danger); color: #fff;
}
.btn-nz-outline[aria-busy="true"]:disabled,
.btn-nz-light[aria-busy="true"]:disabled {
	background: #fff; border-color: var(--nz-line); color: var(--nz-ink);
}
.btn-nz-ghost[aria-busy="true"]:disabled {
	background: transparent; border-color: transparent; color: var(--nz-ink);
}

/* Icon-only action button — used in tables and cards. */
.btn-nz-icon {
	width: 36px; height: 36px; padding: 0; border-radius: var(--nz-r-xs);
	background: #fff; border: 1px solid var(--nz-line); color: var(--nz-body);
}
.btn-nz-icon:hover { border-color: var(--nz-brand); color: var(--nz-brand); background: var(--nz-brand-050); }
.btn-nz-icon.is-danger:hover { border-color: var(--nz-danger); color: var(--nz-danger); background: #fef2f2; }

/* Arrow that nudges on hover — direction aware. */
.nz-arrow { transition: transform var(--nz-t-fast); }
.btn:hover .nz-arrow, .nz-link:hover .nz-arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .nz-arrow, [dir="rtl"] .nz-link:hover .nz-arrow { transform: translateX(-3px); }

.nz-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--nz-brand); }

/* ---- button loading state (global spinner system) --------------------- */
.btn[data-nz-loading="true"] { pointer-events: none; }
.btn .nz-btn-spinner {
	width: 1em; height: 1em; border-width: .13em;
	display: none; flex: 0 0 auto;
}
.btn[data-nz-loading="true"] .nz-btn-spinner { display: inline-block; }
.btn[data-nz-loading="true"] .nz-btn-icon { display: none; }

/* ==========================================================================
   6. CARDS
   ========================================================================== */

.nz-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-lg);
	padding: 1.6rem;
	height: 100%;
	transition: border-color var(--nz-t), box-shadow var(--nz-t), transform var(--nz-t);
}
.nz-card--hover:hover { border-color: color-mix(in srgb, var(--nz-a) 34%, var(--nz-line)); box-shadow: var(--nz-shadow); transform: translateY(-3px); }
.nz-card--flat { box-shadow: none; }
.nz-card--pad-lg { padding: 2rem; }
.nz-card--soft { background: var(--nz-soft); border-color: transparent; }
.nz-card--center { text-align: center; }
.nz-card--center .nz-icon-tile { margin-inline: auto; }

.nz-card__title { font-size: 1.06rem; font-weight: 700; color: var(--nz-ink); margin: 0 0 .45rem; }
.nz-card__text  { font-size: .935rem; color: var(--nz-body); margin: 0; line-height: 1.62; }

/* Icon tile — the square glyph badge at the top of most cards. */
.nz-icon-tile {
	width: 48px; height: 48px; flex: 0 0 48px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--nz-r); margin-bottom: 1.1rem;
	background: var(--nz-a-bg); color: var(--nz-a);
	font-size: 1.28rem;
	transition: transform var(--nz-t);
}
.nz-icon-tile--sm { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.02rem; border-radius: var(--nz-r-sm); margin-bottom: 0; }
.nz-icon-tile--lg { width: 58px; height: 58px; flex-basis: 58px; font-size: 1.55rem; border-radius: var(--nz-r-lg); }
.nz-icon-tile--solid { background: var(--nz-a); color: #fff; }
.nz-card--hover:hover .nz-icon-tile { transform: scale(1.06); }

/* Numbered badge that sits on the corner of a tile. */
.nz-tile-wrap { position: relative; display: inline-flex; margin-bottom: 1.1rem; }
.nz-tile-wrap .nz-icon-tile { margin-bottom: 0; }
.nz-step-num {
	position: absolute; top: -8px; inset-inline-end: -8px;
	width: 25px; height: 25px; border-radius: 50%;
	background: var(--nz-a); color: #fff;
	display: grid; place-items: center;
	font-size: .74rem; font-weight: 800; line-height: 1;
	border: 2.5px solid #fff;
}

/* ==========================================================================
   7. STEPS (connector line between numbered cards)
   ========================================================================== */

.nz-steps { position: relative; }
.nz-steps > [class*="col-"] { position: relative; }
@media (min-width: 992px) {
	.nz-steps--line > [class*="col-"]::after {
		content: ""; position: absolute; top: 60px; inset-inline-start: 50%;
		width: 100%; height: 1px; background: var(--nz-line); z-index: 0;
	}
	.nz-steps--line > [class*="col-"]:last-child::after { display: none; }
	.nz-steps--line .nz-card { z-index: 1; }
}

/* ==========================================================================
   8. CHIPS
   ========================================================================== */

.nz-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.nz-chips--start { justify-content: flex-start; }
.nz-chips--center { justify-content: center; }

.nz-chip {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .55rem 1rem;
	background: #fff; border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-pill);
	font-size: .88rem; font-weight: 600; color: var(--nz-ink);
	transition: border-color var(--nz-t-fast), color var(--nz-t-fast), background var(--nz-t-fast), box-shadow var(--nz-t-fast);
}
.nz-chip .bi { color: var(--nz-a); font-size: 1em; }
.nz-chip:hover, .nz-chip.is-active {
	border-color: var(--nz-brand); color: var(--nz-brand);
	background: var(--nz-brand-050); box-shadow: var(--nz-shadow-xs);
}
.nz-chip.is-muted { color: var(--nz-muted); }
.nz-chip.is-muted .bi { color: var(--nz-muted); }

.nz-chips-label {
	text-align: center; font-size: var(--nz-fs-xs); font-weight: 700;
	letter-spacing: var(--nz-tracking-wide); text-transform: uppercase;
	color: var(--nz-muted); margin-bottom: 1.1rem;
}
[dir="rtl"] .nz-chips-label { letter-spacing: 0; }

/* ==========================================================================
   9. BADGES & PILLS
   ========================================================================== */

.nz-badge {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .26rem .6rem; border-radius: var(--nz-r-pill);
	font-size: .74rem; font-weight: 700; line-height: 1.4;
	background: var(--nz-a-bg); color: var(--nz-a);
}
.nz-badge--solid { background: var(--nz-a); color: #fff; }
.nz-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   10. HEADER
   ========================================================================== */

.nz-topbar {
	background: var(--nz-ink); color: rgba(255, 255, 255, .82);
	font-size: .82rem; position: relative; z-index: 1035;
}
.nz-topbar__inner { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .55rem 1.25rem; text-align: center; }
.nz-topbar a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nz-topbar .bi { color: var(--nz-accent); }
.nz-topbar__close {
	position: absolute; inset-inline-end: .6rem; top: 50%; transform: translateY(-50%);
	background: none; border: 0; color: rgba(255, 255, 255, .55); padding: .25rem .4rem; line-height: 1;
}
.nz-topbar__close:hover { color: #fff; }

.nz-header {
	position: sticky; top: 0; z-index: 1030;
	background: rgba(255, 255, 255, .86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--nz-t), box-shadow var(--nz-t), background var(--nz-t);
}
.nz-header.is-stuck { border-bottom-color: var(--nz-line); box-shadow: 0 4px 20px -12px rgba(11, 27, 43, .18); }

.nz-header__inner { display: flex; align-items: center; gap: 1rem; height: var(--nz-header-h); }

.nz-logo { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.nz-logo img { height: 48px; width: auto; display: block; }

.nz-nav { display: none; align-items: center; gap: .15rem; margin-inline: auto; }
@media (min-width: 992px) { .nz-nav { display: flex; } }

.nz-nav__link {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .55rem .8rem; border-radius: var(--nz-r-sm);
	font-size: .935rem; font-weight: 600; color: var(--nz-ink);
	background: none; border: 0;
	transition: color var(--nz-t-fast), background var(--nz-t-fast);
}
.nz-nav__link:hover, .nz-nav__link.is-active { color: var(--nz-brand); background: var(--nz-brand-050); }
.nz-nav__link .nz-caret { font-size: .7rem; transition: transform var(--nz-t-fast); opacity: .65; }
.nz-nav__item.show .nz-nav__link .nz-caret { transform: rotate(180deg); }

/* ---- mega dropdown ---------------------------------------------------- */
.nz-mega {
	border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-lg);
	box-shadow: var(--nz-shadow-lg);
	padding: .6rem;
	min-width: 480px;
	margin-top: .5rem;
}
.nz-mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; }
.nz-mega__item {
	display: flex; align-items: flex-start; gap: .75rem;
	padding: .7rem .75rem; border-radius: var(--nz-r);
	color: var(--nz-ink); transition: background var(--nz-t-fast);
}
.nz-mega__item:hover { background: var(--nz-soft); color: var(--nz-ink); }
.nz-mega__item:hover .nz-icon-tile { transform: none; }
.nz-mega__title { font-size: .92rem; font-weight: 700; line-height: 1.35; display: flex; align-items: center; gap: .4rem; }
.nz-mega__desc  { font-size: .8rem; color: var(--nz-muted); line-height: 1.45; margin: .1rem 0 0; }

.nz-header__actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
@media (min-width: 992px) { .nz-header__actions { margin-inline-start: 0; } }

.nz-lang {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .5rem .7rem; border-radius: var(--nz-r-sm);
	font-size: .88rem; font-weight: 600; color: var(--nz-ink);
	background: none; border: 1px solid transparent;
}
.nz-lang:hover { background: var(--nz-soft); color: var(--nz-brand); }
.nz-lang__code { text-transform: uppercase; letter-spacing: .04em; }

.nz-dropdown {
	border: 1px solid var(--nz-line); border-radius: var(--nz-r);
	box-shadow: var(--nz-shadow-lg); padding: .35rem; min-width: 190px; margin-top: .5rem;
}
.nz-dropdown .dropdown-item {
	border-radius: var(--nz-r-xs); padding: .55rem .7rem;
	font-size: .9rem; font-weight: 600; color: var(--nz-ink);
	display: flex; align-items: center; gap: .55rem;
}
.nz-dropdown .dropdown-item:hover { background: var(--nz-soft); color: var(--nz-brand); }
.nz-dropdown .dropdown-item.is-active { color: var(--nz-brand); background: var(--nz-brand-050); }
.nz-dropdown .dropdown-item .bi-check2 { margin-inline-start: auto; }

.nz-burger {
	display: inline-grid; place-items: center;
	width: 42px; height: 42px; border-radius: var(--nz-r-sm);
	background: #fff; border: 1px solid var(--nz-line); color: var(--nz-ink); font-size: 1.2rem;
}
@media (min-width: 992px) { .nz-burger { display: none; } }
.nz-header__cta { display: none; }
@media (min-width: 768px) { .nz-header__cta { display: inline-flex; } }

/* ---- offcanvas (mobile nav) ------------------------------------------- */
.nz-offcanvas { width: min(360px, 88vw); border: 0; }
.nz-offcanvas .offcanvas-header { border-bottom: 1px solid var(--nz-line); padding: 1rem 1.25rem; }
.nz-offcanvas .offcanvas-body { padding: 1rem 1.25rem 1.75rem; display: flex; flex-direction: column; }
.nz-oc-link {
	display: flex; align-items: center; gap: .7rem;
	padding: .8rem .25rem; font-size: 1rem; font-weight: 650; color: var(--nz-ink);
	border-bottom: 1px solid var(--nz-line-2);
}
.nz-oc-link .bi:first-child { color: var(--nz-muted); width: 1.25rem; text-align: center; }
.nz-oc-link:hover { color: var(--nz-brand); }
.nz-oc-link .nz-oc-caret { margin-inline-start: auto; font-size: .75rem; transition: transform var(--nz-t-fast); }
.nz-oc-link[aria-expanded="true"] .nz-oc-caret { transform: rotate(180deg); }
.nz-oc-sub { padding: .35rem 0 .6rem; margin-inline-start: 1.95rem; }
.nz-oc-sub a {
	display: flex; align-items: center; gap: .6rem;
	padding: .55rem 0; font-size: .92rem; font-weight: 600; color: var(--nz-body);
}
.nz-oc-sub a:hover { color: var(--nz-brand); }
.nz-oc-foot { margin-top: auto; padding-top: 1.5rem; display: grid; gap: .6rem; }

/* ==========================================================================
   11. HERO
   ========================================================================== */

.nz-hero { padding-block: var(--nz-section-y); }
.nz-hero__bullets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; margin: 1.75rem 0; }
.nz-hero__bullet { display: flex; align-items: center; gap: .55rem; font-size: .93rem; font-weight: 600; color: var(--nz-ink); }
.nz-hero__bullet .bi {
	width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%;
	background: #E9F8EF; color: var(--nz-green);
	display: grid; place-items: center; font-size: .68rem;
}
.nz-hero__actions {
	display: flex; flex-wrap: wrap; gap: .75rem;
	/* Against the offer pill above it without this — the bullets that used
	   to sit between them, and carry the gap, are inside the pill now. */
	margin-top: 1.75rem;
}

/* The dashboard mock-up and its floating annotations used to live here.
   They drew a browser window with a revenue figure, a staff count and a bar
   chart, none of which belonged to anybody — a screenshot of a business that
   does not exist. Nothing on the site pretends to be a photograph of the app
   any more; see THE HERO, AS ONE BANNER further down. */


/* ==========================================================================
   12. MODULE TABS
   ========================================================================== */

.nz-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.25rem; }
.nz-tab {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .62rem 1.05rem; border-radius: var(--nz-r-pill);
	background: #fff; border: 1px solid var(--nz-line);
	font-size: .9rem; font-weight: 650; color: var(--nz-body);
	transition: all var(--nz-t-fast);
}
.nz-tab .bi { color: var(--nz-muted); transition: color var(--nz-t-fast); }
.nz-tab:hover { color: var(--nz-ink); border-color: #D6E0EA; }
.nz-tab.active {
	background: var(--nz-a-bg); border-color: color-mix(in srgb, var(--nz-a) 30%, transparent);
	color: var(--nz-a); box-shadow: var(--nz-shadow-xs);
}
.nz-tab.active .bi { color: var(--nz-a); }

.nz-module { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .nz-module { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } .nz-module--flip > :first-child { order: 2; } }

.nz-module__bullets { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.nz-module__bullets li { display: flex; align-items: flex-start; gap: .7rem; font-size: .95rem; color: var(--nz-body); line-height: 1.55; }
.nz-module__bullets .bi {
	width: 22px; height: 22px; flex: 0 0 22px; margin-top: .13rem; border-radius: 50%;
	background: var(--nz-a-bg); color: var(--nz-a);
	display: grid; place-items: center; font-size: .68rem;
}
.nz-module__highlights { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }

/* ==========================================================================
   13a. AI DEMO — types, thinks, answers
   ========================================================================== */

.nz-demo { position: relative; }
.nz-demo__question { font-size: 1.05rem; font-weight: 600; color: var(--nz-ink); min-height: 1.7em; }

/* Blinking caret while the question types itself. */
.nz-caret {
	display: inline-block; width: 2px; height: 1.05em;
	margin-inline-start: 2px; vertical-align: -0.16em;
	background: var(--nz-brand);
	animation: nz-blink 1s steps(1) infinite;
}
@keyframes nz-blink { 50% { opacity: 0; } }

.nz-demo__thinking-text { font-size: .93rem; font-weight: 600; color: var(--nz-muted); }

.nz-dots { display: inline-flex; gap: 3px; margin-inline-start: 4px; vertical-align: middle; }
.nz-dots i {
	width: 4px; height: 4px; border-radius: 50%; background: var(--nz-violet);
	animation: nz-dot 1.1s ease-in-out infinite;
}
.nz-dots i:nth-child(2) { animation-delay: .16s; }
.nz-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes nz-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* These rows are Bootstrap flex containers, and .d-flex is display:flex
   !important — which beats the [hidden] attribute. Restore it explicitly so
   the thinking state and the answer are never on screen together. */
.nz-demo__thinking[hidden],
.nz-demo__answer[hidden] { display: none !important; }

.nz-demo__answer { animation: nz-rise 380ms var(--nz-ease) both; }
@keyframes nz-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.nz-caret, .nz-dots i { animation: none; }
	.nz-demo__answer { animation: none; }
}

/* ==========================================================================
   13b. SCROLL STEPPER
   A tall track with a sticky panel: the active item is derived from how far
   through the track the page has scrolled, so scrolling back walks it back.
   ========================================================================== */

.nz-stepper { position: relative; }
.nz-stepper__track { position: relative; }

/* Scroll mode only: one viewport to read the panel, plus a slice of
   scroll distance per item. Auto mode stays a normal-height section. */
[data-nz-stepper="scroll"] .nz-stepper__track {
	height: calc(100vh + (var(--nz-steps, 5) * var(--nz-step-slice, 34vh)));
}

/* The sticky panel fills the viewport for the whole track, so the tail of
   the track is never visible as an empty gap before the next section. */
[data-nz-stepper="scroll"] .nz-stepper__sticky {
	position: sticky;
	top: var(--nz-header-h);
	min-height: calc(100vh - var(--nz-header-h));
	display: flex;
	align-items: center;
}
[data-nz-stepper="scroll"] .nz-stepper__sticky > * { width: 100%; }

/* Panels share one grid cell, so the block is always as tall as the
   tallest panel and switching never shifts anything on the page. */
.nz-stepper__panels { display: grid; align-items: start; }
.nz-stepper__panels > [data-nz-step-panel] {
	grid-area: 1 / 1;
	transition: opacity 240ms var(--nz-ease);
}
/* Chrome hides [hidden] with display:none !important, which would collapse
   the panel out of the grid cell and let the block resize. A class keeps the
   panel in place; visibility:hidden still removes it from tab order and from
   the accessibility tree. */
.nz-stepper__panels > [data-nz-step-panel].is-off {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Compact variant: the whole panel has to be readable in one view while the
   scroll position steps through it, so the chrome around it is trimmed. */
.nz-stepper--compact .nz-tabs { margin-bottom: 1rem; }

.nz-module--compact { gap: 1.75rem; align-items: start; }
@media (min-width: 992px) {
	.nz-module--compact { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.nz-module--compact .nz-h3 { line-height: 1.28; }
.nz-module--compact .nz-icon-tile { margin-bottom: 0; }
.nz-module--compact .nz-module__highlights { margin-top: 1.25rem; }

/* Bullets sit in their own panel rather than running down the page. */
.nz-module__bullets--card {
	margin-top: 0;
	background: var(--nz-soft);
	border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-lg);
	padding: 1.35rem;
}

.nz-stepper__meter { display: flex; align-items: center; gap: .9rem; }
.nz-stepper__bar {
	flex: 1; height: 4px; border-radius: var(--nz-r-pill);
	background: var(--nz-line); overflow: hidden;
}
.nz-stepper__bar span {
	display: block; height: 100%; border-radius: inherit;
	background: linear-gradient(90deg, var(--nz-brand), #35A99F);
	transition: width 320ms var(--nz-ease);
}
[dir="rtl"] .nz-stepper__bar span { background: linear-gradient(270deg, var(--nz-brand), #35A99F); }

.nz-stepper__count {
	font-size: var(--nz-fs-xs); font-weight: 800; color: var(--nz-muted);
	font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr;
}

/* Fixed height so swapping between items never shifts the page.
   height:auto because .nz-card is height:100% for equal-height card grids,
   which here would stretch the note past the bottom of its column. */
.nz-stepper__note {
	height: auto;
	min-height: 132px; display: flex; align-items: center;
	transition: opacity 200ms var(--nz-ease), transform 200ms var(--nz-ease);
}
.nz-stepper__note > * { width: 100%; }
.nz-stepper__note.is-swapping { opacity: 0; transform: translateY(6px); }

/* The chip the scroll position has landed on. */
.nz-stepper .nz-chip.is-active {
	border-color: var(--nz-brand); color: var(--nz-brand);
	background: var(--nz-brand-050); box-shadow: var(--nz-shadow-sm);
}

/* No scroll hijacking on phones and tablets - the chips are just tappable. */
@media (max-width: 991.98px) {
	[data-nz-stepper] .nz-stepper__track { height: auto; }
	[data-nz-stepper] .nz-stepper__sticky { position: static; padding-block: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nz-stepper__note { transition: none; }
	.nz-stepper__bar span { transition: none; }
}
/* ==========================================================================
   14. ANNOTATED DASHBOARD
   ========================================================================== */

.nz-annotated { position: relative; background: var(--nz-soft); border-radius: var(--nz-r-2xl); padding: clamp(1.25rem, .8rem + 2vw, 3rem); }
.nz-annotated__frame { position: relative; z-index: 2; }

.nz-callouts { display: grid; gap: .8rem; }
.nz-callout {
	display: flex; align-items: flex-start; gap: .75rem;
	background: #fff; border: 1px solid var(--nz-line); border-radius: var(--nz-r);
	padding: .85rem 1rem; box-shadow: var(--nz-shadow-sm);
}
.nz-callout__title { font-size: .88rem; font-weight: 700; color: var(--nz-ink); line-height: 1.35; }
.nz-callout__text  { font-size: .8rem; color: var(--nz-muted); line-height: 1.5; margin: .2rem 0 0; }

/* Quick-action grid inside the dashboard mock. */
.nz-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 768px) { .nz-qa { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nz-qa__item {
	display: flex; align-items: center; gap: .6rem;
	padding: .7rem .75rem; border: 1px solid var(--nz-line-2); border-radius: var(--nz-r);
	background: #fff; transition: border-color var(--nz-t-fast), box-shadow var(--nz-t-fast);
}
.nz-qa__item:hover { border-color: color-mix(in srgb, var(--nz-a) 32%, transparent); box-shadow: var(--nz-shadow-xs); }
.nz-qa__title { font-size: .8rem; font-weight: 700; color: var(--nz-ink); line-height: 1.25; }
.nz-qa__text { font-size: .7rem; color: var(--nz-muted); margin: 0; }
.nz-qa__arrow { margin-inline-start: auto; color: var(--nz-muted); font-size: .8rem; }

.nz-metric { border: 1px solid var(--nz-line-2); border-radius: var(--nz-r); padding: .85rem; background: #fff; }
.nz-metric__value { font-size: 1.35rem; font-weight: 800; color: var(--nz-ink); line-height: 1.15; }
.nz-metric__label { font-size: .72rem; color: var(--nz-muted); margin: .15rem 0 0; line-height: 1.35; }

.nz-progress { height: 8px; border-radius: var(--nz-r-pill); background: var(--nz-line-2); overflow: hidden; }
.nz-progress__bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nz-brand), #35A99F); }

/* ==========================================================================
   15. STATS BAND
   ========================================================================== */

.nz-stat { text-align: center; padding: .5rem; }
.nz-stat__value { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 800; color: var(--nz-ink); letter-spacing: var(--nz-tracking-tight); line-height: 1.05; }
.nz-stat__value .nz-stat__suffix { color: var(--nz-brand); }
.nz-stat__label { font-size: .88rem; color: var(--nz-muted); margin: .45rem 0 0; }
.nz-stat__icon { color: var(--nz-brand); font-size: 1.2rem; margin-bottom: .55rem; display: block; }

/* ==========================================================================
   16. TESTIMONIALS
   ========================================================================== */

.nz-quote {
	position: relative; background: #fff; border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-lg); padding: 2.6rem 1.5rem 1.5rem;
	height: 100%; text-align: center;
	transition: border-color var(--nz-t), box-shadow var(--nz-t), transform var(--nz-t);
}
.nz-quote:hover { border-color: color-mix(in srgb, var(--nz-a) 30%, var(--nz-line)); box-shadow: var(--nz-shadow); transform: translateY(-3px); }
.nz-quote__avatar {
	position: absolute; top: -24px; inset-inline-start: 50%; transform: translateX(-50%);
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--nz-a-bg); color: var(--nz-a);
	display: grid; place-items: center;
	font-size: 1.05rem; font-weight: 800;
	border: 4px solid #fff; box-shadow: var(--nz-shadow-sm);
}
[dir="rtl"] .nz-quote__avatar { transform: translateX(50%); }
.nz-quote__mark { position: absolute; top: .9rem; inset-inline-end: 1.1rem; font-size: 1.5rem; color: var(--nz-line); }
.nz-quote__stars { color: var(--nz-accent); font-size: .82rem; letter-spacing: .12em; margin-bottom: .85rem; }
.nz-quote__text { font-size: .95rem; color: var(--nz-body); line-height: 1.68; margin: 0 0 1.25rem; }
.nz-quote__foot { border-top: 1px solid var(--nz-line-2); padding-top: 1rem; }
.nz-quote__name { font-size: .93rem; font-weight: 700; color: var(--nz-ink); }
.nz-quote__role { font-size: .82rem; color: var(--nz-muted); margin: .12rem 0 0; }

/* ==========================================================================
   17. PRICING
   ========================================================================== */

.nz-billing {
	display: inline-flex; align-items: center; gap: .25rem; padding: .3rem;
	background: var(--nz-soft); border: 1px solid var(--nz-line); border-radius: var(--nz-r-pill);
}
.nz-billing__btn {
	border: 0; background: none; padding: .52rem 1.15rem; border-radius: var(--nz-r-pill);
	font-size: .89rem; font-weight: 700; color: var(--nz-body);
	display: inline-flex; align-items: center; gap: .45rem;
	transition: background var(--nz-t-fast), color var(--nz-t-fast), box-shadow var(--nz-t-fast);
}
.nz-billing__btn.is-active { background: #fff; color: var(--nz-ink); box-shadow: var(--nz-shadow-sm); }
.nz-billing__save { font-size: .68rem; font-weight: 800; color: var(--nz-green); background: #E9F8EF; padding: .15rem .45rem; border-radius: var(--nz-r-pill); }

.nz-plan {
	position: relative; display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--nz-line); border-radius: var(--nz-r-xl);
	padding: 1.75rem 1.5rem;
	transition: border-color var(--nz-t), box-shadow var(--nz-t), transform var(--nz-t);
}
.nz-plan:hover { border-color: #D2DDE7; box-shadow: var(--nz-shadow); }
.nz-plan--featured {
	border-color: var(--nz-brand); border-width: 1.5px;
	box-shadow: var(--nz-shadow-lg);
}
/* No scale on the featured card: it would push its rows out of line with
   the other cards, and the rows are meant to read straight across. The border,
   shadow and badge carry the emphasis instead. */
@media (min-width: 992px) { .nz-plan--featured:hover { transform: translateY(-3px); } }
.nz-plan__badge {
	position: absolute; top: -12px; inset-inline-start: 50%; transform: translateX(-50%);
	background: var(--nz-brand); color: #fff; font-size: .7rem; font-weight: 800;
	padding: .3rem .8rem; border-radius: var(--nz-r-pill); white-space: nowrap;
	letter-spacing: .02em;
}
[dir="rtl"] .nz-plan__badge { transform: translateX(50%); }
.nz-plan__name { font-size: 1.1rem; font-weight: 800; color: var(--nz-ink); margin: 0; }
.nz-plan__tagline { font-size: .85rem; color: var(--nz-muted); margin: .2rem 0 0; min-height: 2.4em; }
/* Fixed height so a quoted plan and a priced plan occupy the same space —
   otherwise every feature row below sits 12px out of line with its neighbours. */
.nz-plan__price {
	display: flex; align-items: baseline; gap: .3rem;
	margin: 1.15rem 0 .2rem; flex-wrap: wrap;
	min-height: 2.5rem;
}
.nz-plan__amount--custom { font-size: 1.75rem; align-self: center; }
.nz-plan__amount { font-size: 2.35rem; font-weight: 800; color: var(--nz-ink); letter-spacing: var(--nz-tracking-tight); line-height: 1; }
.nz-plan__period { font-size: .88rem; font-weight: 600; color: var(--nz-muted); }
.nz-plan__note { font-size: .78rem; color: var(--nz-muted); margin: 0 0 1.25rem; min-height: 1.3em; }
.nz-plan__cta { width: 100%; margin-bottom: 1.4rem; }
/* Group heading. Needs room above it when it follows a previous list,
   and clear room below before its own rows. */
.nz-plan__list-label {
	font-size: var(--nz-fs-xs); font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--nz-tracking-wide); color: var(--nz-muted);
	margin: 1.5rem 0 .75rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--nz-line-2);
}
/* The first heading in a card sits directly under the button. */
.nz-plan__cta + .nz-plan__list-label { margin-top: 0; padding-top: 0; border-top: 0; }
[dir="rtl"] .nz-plan__list-label { letter-spacing: 0; }

.nz-plan__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }

/* label on the start edge, this plan-s value on the end edge, so the rows of
   one card line up with the same rows of the next. */
.nz-plan__list li {
	display: flex; align-items: center; gap: .55rem;
	font-size: .88rem; line-height: 1.45; color: var(--nz-body);
	min-height: 1.6rem;
}
.nz-plan__feature { flex: 1 1 auto; min-width: 0; }
.nz-plan__value {
	flex: 0 0 auto; margin-inline-start: auto;
	font-weight: 700; color: var(--nz-ink); font-size: .85rem;
	white-space: nowrap; text-align: end;
}
.nz-plan__list .bi { flex: 0 0 auto; font-size: .95rem; }
.nz-plan__list .bi-check-circle-fill { color: var(--nz-green); }
.nz-plan__list .bi-dash-circle { color: #C7D2DD; }
.nz-plan__list .nz-plan__value .bi-check-lg { color: var(--nz-green); }
.nz-plan__list li.is-off { color: var(--nz-muted); }
.nz-plan__list li.is-off .nz-plan__value { color: #C7D2DD; font-weight: 600; }

/* ---- comparison table -------------------------------------------------- */
.nz-compare { border: 1px solid var(--nz-line); border-radius: var(--nz-r-lg); overflow: hidden; background: #fff; }
.nz-compare table { margin: 0; width: 100%; }
.nz-compare th, .nz-compare td { padding: .85rem 1rem; vertical-align: middle; border-color: var(--nz-line-2) !important; }
.nz-compare thead th { background: var(--nz-soft); font-size: .88rem; font-weight: 800; color: var(--nz-ink); border-bottom: 1px solid var(--nz-line) !important; white-space: nowrap; }
.nz-compare thead th:first-child { text-align: start; }
.nz-compare tbody td { font-size: .88rem; color: var(--nz-body); text-align: center; }
.nz-compare tbody th[scope="row"] {
	text-align: start; color: var(--nz-ink); font-weight: 600;
	font-size: .88rem; padding: .85rem 1rem; background: transparent;
	border-color: var(--nz-line-2) !important;
}
.nz-compare .nz-group-row td { background: var(--nz-soft); font-size: var(--nz-fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: var(--nz-tracking-wide); color: var(--nz-muted); text-align: start; }
[dir="rtl"] .nz-compare .nz-group-row td { letter-spacing: 0; }
.nz-compare .is-featured-col { background: rgba(15, 118, 110, .035); }
.nz-compare tbody tr:hover td { background: var(--nz-soft); }
.nz-compare tbody tr:hover td.is-featured-col { background: rgba(15, 118, 110, .06); }

/* ==========================================================================
   18. ACCORDION (FAQ)
   ========================================================================== */

.nz-accordion .accordion-item {
	border: 1px solid var(--nz-line); border-radius: var(--nz-r) !important;
	margin-bottom: .7rem; overflow: hidden; background: #fff;
	transition: border-color var(--nz-t), box-shadow var(--nz-t);
}
.nz-accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: color-mix(in srgb, var(--nz-brand) 30%, var(--nz-line)); box-shadow: var(--nz-shadow-sm); }
.nz-accordion .accordion-button {
	padding: 1.1rem 1.25rem; font-size: 1rem; font-weight: 700; color: var(--nz-ink);
	background: #fff; box-shadow: none !important; gap: 1rem;
}
.nz-accordion .accordion-button:not(.collapsed) { color: var(--nz-brand); background: #fff; }
.nz-accordion .accordion-button::after {
	background-image: none; content: "\F282"; font-family: "bootstrap-icons";
	width: auto; height: auto; font-size: .85rem; color: var(--nz-muted);
	transition: transform var(--nz-t-fast);
	margin-inline-start: auto; margin-inline-end: 0;
}
.nz-accordion .accordion-button:not(.collapsed)::after { transform: rotate(180deg); color: var(--nz-brand); }
.nz-accordion .accordion-body { padding: 0 1.25rem 1.25rem; font-size: .945rem; color: var(--nz-body); line-height: 1.7; }

/* Inline note — a tinted strip, not a card. Cards carry height:100% for
   equal-height grids, which stretches a card nested inside another card. */
.nz-note {
	display: flex; align-items: center; gap: .6rem;
	margin: 0; padding: .75rem 1rem;
	background: var(--nz-a-bg); border-radius: var(--nz-r);
	font-size: .9rem; font-weight: 650; color: var(--nz-a);
}
.nz-note .bi { font-size: .5rem; flex: 0 0 auto; }

/* Help card that closes the FAQ — a distinct shape so it does not read as
   one more answer, with room between it and the CTA band below. */
.nz-help-card {
	display: flex;
	align-items: center;
	gap: 1.35rem;
	text-align: start;
	/* .nz-card is height:100% for card grids; here that resolves against the
	   stretched column and blows the card up to the full column height. */
	height: auto;
	background: linear-gradient(120deg, var(--nz-brand-050), #fff 65%);
	border-color: color-mix(in srgb, var(--nz-brand) 22%, var(--nz-line));
}
.nz-help-card__body { flex: 1 1 auto; min-width: 0; }
.nz-help-card .nz-icon-tile { flex: 0 0 auto; margin-bottom: 0; }

@media (max-width: 575.98px) {
	.nz-help-card { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.nz-help-card .btn { width: 100%; }
}

/* ==========================================================================
   19. CTA BAND
   ========================================================================== */

.nz-cta {
	position: relative; overflow: hidden;
	background: linear-gradient(125deg, var(--nz-brand-700) 0%, var(--nz-brand) 52%, #17968C 100%);
	color: #fff; border-radius: var(--nz-r-2xl);
	padding: clamp(2.5rem, 1.6rem + 3.5vw, 4.25rem) clamp(1.5rem, 1rem + 3vw, 4rem);
	text-align: center;
}
.nz-cta::before {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(30rem 20rem at 82% -10%, rgba(212, 160, 23, .30), transparent 62%),
		radial-gradient(26rem 20rem at 8% 116%, rgba(255, 255, 255, .16), transparent 60%);
}
.nz-cta > * { position: relative; z-index: 1; }
.nz-cta h2 { color: #fff; }
.nz-cta__text { color: rgba(255, 255, 255, .85); font-size: var(--nz-fs-lead); max-width: 34rem; margin-inline: auto; }
.nz-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.9rem; }
.nz-cta__note { color: rgba(255, 255, 255, .66); font-size: .84rem; margin-top: 1.25rem; }
.nz-cta .nz-eyebrow { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .22); }
.nz-cta .btn-nz-outline { background: transparent; border-color: rgba(255, 255, 255, .38); color: #fff; }
.nz-cta .btn-nz-outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ==========================================================================
   20. FOOTER
   ========================================================================== */

.nz-footer { background: #071320; color: rgba(255, 255, 255, .62); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); font-size: .92rem; }
.nz-footer h2, .nz-footer h3, .nz-footer h4 { color: #fff; }
.nz-footer a { color: rgba(255, 255, 255, .68); }
.nz-footer a:hover { color: #fff; }
.nz-footer__brand img { height: 48px; }
.nz-footer__tagline { max-width: 22rem; margin: 1.1rem 0 1.4rem; line-height: 1.65; }
.nz-footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.nz-footer__contact li { display: flex; align-items: center; gap: .6rem; }
.nz-footer__contact .bi { color: var(--nz-brand); font-size: 1rem; }
.nz-footer__col-title { font-size: .82rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: var(--nz-tracking-wide); margin-bottom: 1.1rem; }
[dir="rtl"] .nz-footer__col-title { letter-spacing: 0; }
.nz-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.nz-footer__divider { border-top: 1px solid rgba(255, 255, 255, .09); margin-top: 2.75rem; padding-top: 1.75rem; }
.nz-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .09); margin-top: 1.75rem; padding-block: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.nz-social { display: flex; gap: .5rem; }
.nz-social a {
	width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .75);
	transition: background var(--nz-t-fast), color var(--nz-t-fast), transform var(--nz-t-fast);
}
.nz-social a:hover { background: var(--nz-brand); color: #fff; transform: translateY(-2px); }

.nz-store {
	display: inline-flex; align-items: center; gap: .65rem;
	background: #0E1B29; border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--nz-r); padding: .6rem 1.05rem; color: #fff;
}
.nz-store:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.nz-store .bi { font-size: 1.45rem; }
.nz-store__top { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .6); display: block; line-height: 1.2; }
.nz-store__name { font-size: .95rem; font-weight: 700; line-height: 1.2; }
[dir="rtl"] .nz-store__top { letter-spacing: 0; }

/* ==========================================================================
   21. NEWSLETTER
   ========================================================================== */

.nz-newsletter__form { display: flex; gap: .55rem; flex-wrap: wrap; }
.nz-newsletter__form .form-control { flex: 1 1 200px; }
.nz-footer .nz-newsletter__form .form-control {
	background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff;
}
.nz-footer .nz-newsletter__form .form-control::placeholder { color: rgba(255, 255, 255, .38); }
.nz-footer .nz-newsletter__form .form-control:focus { background: rgba(255, 255, 255, .1); border-color: var(--nz-brand); box-shadow: none; color: #fff; }

/* ==========================================================================
   22. FORMS
   ========================================================================== */

.nz-form-label { font-size: .88rem; font-weight: 650; color: var(--nz-ink); margin-bottom: .4rem; display: flex; align-items: center; gap: .4rem; }
.nz-form-label .bi { color: var(--nz-muted); }
/* The required mark, wherever it is printed. Scoped to .nz-form-label it
   came out black and flush against the last letter everywhere else —
   the address grid writes its own labels and had exactly that. */
.nz-req { color: var(--nz-danger); margin-inline-start: .25rem; }
.nz-form-label .nz-opt { font-size: .74rem; font-weight: 600; color: var(--nz-muted); margin-inline-start: auto; }

/* The height a one-line control settles at: its own padding, one line of its
   own text, and the border. Anything that has to sit level with a box
   measures against this rather than guessing at a number. */
:root { --nz-ctl-h: calc(1.44rem + (.95rem * 1.5) + 2px); }

.form-control, .form-select {
	border: 1px solid var(--nz-line); border-radius: var(--nz-r-sm);
	padding: .72rem .9rem; font-size: .95rem; color: var(--nz-ink);
	background-color: #fff;
	transition: border-color var(--nz-t-fast), box-shadow var(--nz-t-fast);
}
.form-control::placeholder { color: #A9B6C4; }
.form-control:focus, .form-select:focus { border-color: var(--nz-brand); box-shadow: 0 0 0 3.5px rgba(15, 118, 110, .12); }
.form-control:disabled, .form-select:disabled { background: var(--nz-soft); color: var(--nz-muted); cursor: not-allowed; }
/* Four lines rather than six. Notes are usually a sentence, and the tall
   box left a hole under every form that made the field look unfinished.
   Still resizable for the times somebody writes more. */
textarea.form-control { min-height: 90px; resize: vertical; }

/* No green. A field turning green says somebody checked the answer and it
   was right, and nothing here checked anything — it found only that the
   box was not empty. Filling in a form lit every line of it at once,
   which made the two fields that were actually wrong the hardest things
   on the screen to find. Wrong is marked; right is quiet. */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--nz-danger); background-image: none; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3.5px rgba(220, 38, 38, .12); }
.invalid-feedback, .valid-feedback { font-size: .8rem; font-weight: 600; margin-top: .35rem; display: none; }
.invalid-feedback { color: var(--nz-danger); }
.valid-feedback { color: var(--nz-green); }
.is-invalid ~ .invalid-feedback, .is-valid ~ .valid-feedback { display: block; }

.nz-input-group { position: relative; }
.nz-input-group .form-control { padding-inline-end: 2.6rem; }
.nz-input-group__icon {
	position: absolute; inset-inline-end: .85rem; top: 50%; transform: translateY(-50%);
	color: var(--nz-muted); font-size: 1rem; pointer-events: none;
}
.nz-input-group__btn {
	position: absolute; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%);
	background: none; border: 0; color: var(--nz-muted); padding: .25rem; line-height: 1;
}
.nz-input-group__btn:hover { color: var(--nz-brand); }

.form-check-input { border-color: #C9D5E0; }
.form-check-input:checked { background-color: var(--nz-brand); border-color: var(--nz-brand); }
.form-check-input:focus { border-color: var(--nz-brand); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.form-check-label { font-size: .89rem; color: var(--nz-body); }

/* Honeypot — visually gone, still focusable by bots. */
.nz-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   23. SPINNERS & LOADING OVERLAY
   ========================================================================== */

.spinner-border { border-width: .16em; }
.nz-spinner { color: var(--nz-brand); }

.nz-loading {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .85rem; padding: 3rem 1rem; text-align: center;
}
.nz-loading__text { font-size: .9rem; font-weight: 600; color: var(--nz-muted); }

/* Overlay for a section, card or modal body. */
.nz-overlay-host { position: relative; }
.nz-overlay {
	position: absolute; inset: 0; z-index: 20;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(2px);
	border-radius: inherit;
	animation: nz-fade-in 140ms var(--nz-ease);
}
@keyframes nz-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Skeleton shimmer for card and table placeholders. */
.nz-skeleton {
	background: linear-gradient(90deg, var(--nz-line-2) 25%, #E9EFF5 37%, var(--nz-line-2) 63%);
	background-size: 400% 100%;
	animation: nz-shimmer 1.3s ease-in-out infinite;
	border-radius: var(--nz-r-xs);
}
@keyframes nz-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .nz-skeleton { animation: none; } }

/* ==========================================================================
   24. MODALS
   ========================================================================== */

.nz-modal .modal-content { border: 0; border-radius: var(--nz-r-xl); box-shadow: var(--nz-shadow-xl); overflow: hidden; }
.nz-modal .modal-header { border-bottom: 1px solid var(--nz-line); padding: 1.25rem 1.5rem; align-items: flex-start; }
.nz-modal .modal-title { font-size: 1.12rem; font-weight: 800; color: var(--nz-ink); }
.nz-modal .modal-subtitle { font-size: .86rem; color: var(--nz-muted); margin: .2rem 0 0; }
.nz-modal .modal-body { padding: 1.5rem; }
.nz-modal .modal-footer { border-top: 1px solid var(--nz-line); padding: 1rem 1.5rem; gap: .55rem; }
.nz-modal .btn-close { --bs-btn-close-focus-shadow: none; opacity: .45; }
.nz-modal .btn-close:hover { opacity: 1; }
.modal-backdrop.show { opacity: .42; background: #0B1B2B; }

/* Always a way out, even when a panel hides the modal header. */
.nz-modal .modal-content { position: relative; }
.nz-modal__close {
	position: absolute; top: .85rem; inset-inline-end: .85rem; z-index: 5;
	width: 34px; height: 34px; border: 0; border-radius: 50%;
	background: var(--nz-soft); color: var(--nz-muted);
	display: grid; place-items: center; font-size: .8rem;
	transition: background var(--nz-t-fast), color var(--nz-t-fast);
}
.nz-modal__close:hover { background: var(--nz-line); color: var(--nz-ink); }

.nz-modal__state { display: none; }
.nz-modal__state.is-active { display: block; }
.nz-modal__loading { min-height: 190px; }

/* Confirmation modal */
.nz-confirm { text-align: center; padding: .5rem 0 .25rem; }
.nz-confirm__icon {
	width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 1.1rem;
	display: grid; place-items: center; font-size: 1.7rem;
	background: var(--nz-a-bg); color: var(--nz-a);
}
.nz-confirm__title { font-size: 1.18rem; font-weight: 800; color: var(--nz-ink); margin-bottom: .45rem; }
.nz-confirm__text { font-size: .93rem; color: var(--nz-body); margin: 0; }

/* Auth modal */
.nz-auth { text-align: center; }
.nz-auth__logo { height: 48px; width: auto; margin-bottom: 1.5rem; }
.nz-auth__switch {
	display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .28rem;
	background: var(--nz-soft); border-radius: var(--nz-r); margin-bottom: 1.6rem;
}
.nz-auth__switch button {
	border: 0; background: none; padding: .62rem .5rem; border-radius: var(--nz-r-sm);
	font-size: .92rem; font-weight: 700; color: var(--nz-muted);
	transition: background var(--nz-t-fast), color var(--nz-t-fast), box-shadow var(--nz-t-fast);
}
.nz-auth__switch button.is-active { background: #fff; color: var(--nz-ink); box-shadow: var(--nz-shadow-sm); }
.nz-auth__title { font-size: 1.55rem; font-weight: 800; color: var(--nz-ink); margin-bottom: .3rem; letter-spacing: var(--nz-tracking-tight); }
.nz-auth__subtitle { font-size: .93rem; color: var(--nz-muted); margin-bottom: 1.6rem; }
.nz-auth form { text-align: start; }
.nz-auth__foot { font-size: .82rem; color: var(--nz-muted); margin-top: 1.1rem; }
.nz-auth__link { display: block; margin-top: 1rem; font-weight: 650; font-size: .9rem; }

/* OTP inputs */
.nz-otp { display: flex; gap: .5rem; justify-content: center; direction: ltr; }
.nz-otp input {
	width: 48px; height: 56px; text-align: center;
	font-size: 1.35rem; font-weight: 800; color: var(--nz-ink);
	border: 1px solid var(--nz-line); border-radius: var(--nz-r-sm);
}
.nz-otp input:focus { border-color: var(--nz-brand); box-shadow: 0 0 0 3.5px rgba(15, 118, 110, .12); outline: none; }

/* ==========================================================================
   25. TOASTS
   ========================================================================== */

.nz-toast-stack {
	position: fixed; z-index: 1090; bottom: 1.25rem;
	inset-inline-end: 1.25rem; display: flex; flex-direction: column; gap: .6rem;
	max-width: min(380px, calc(100vw - 2.5rem)); pointer-events: none;
}
.nz-toast-stack > * { pointer-events: auto; }

.nz-toast {
	display: flex; align-items: flex-start; gap: .75rem;
	background: #fff; border: 1px solid var(--nz-line); border-inline-start: 3px solid var(--nz-a);
	border-radius: var(--nz-r); box-shadow: var(--nz-shadow-lg);
	padding: .9rem 1rem; width: 100%;
}
.nz-toast__icon { font-size: 1.15rem; color: var(--nz-a); line-height: 1.2; }
.nz-toast__title { font-size: .9rem; font-weight: 700; color: var(--nz-ink); line-height: 1.35; }
.nz-toast__text { font-size: .85rem; color: var(--nz-body); margin: .15rem 0 0; line-height: 1.45; }
.nz-toast__close { background: none; border: 0; color: var(--nz-muted); padding: .1rem .2rem; margin-inline-start: auto; line-height: 1; font-size: .85rem; }
.nz-toast__close:hover { color: var(--nz-ink); }
.nz-toast.is-success { --nz-a: var(--nz-green); --nz-a-bg: #E9F8EF; }
.nz-toast.is-error   { --nz-a: var(--nz-danger); --nz-a-bg: #FDECEC; }
.nz-toast.is-warning { --nz-a: var(--nz-warning); --nz-a-bg: #FDF3E4; }
.nz-toast.is-info    { --nz-a: var(--nz-info); --nz-a-bg: #E9F0FE; }

/* ==========================================================================
   26. TABLES
   ========================================================================== */

.nz-table-card { background: #fff; border: 1px solid var(--nz-line); border-radius: var(--nz-r-lg); overflow: hidden; }
.nz-table-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;
	padding: 1rem 1.15rem; border-bottom: 1px solid var(--nz-line);
}
.nz-table-toolbar .nz-table-search { flex: 0 1 340px; margin-inline-start: auto; min-width: 200px; }

.nz-table { margin: 0; width: 100%; }
.nz-table thead th {
	background: var(--nz-soft); font-size: .78rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .05em; color: var(--nz-muted);
	padding: .8rem .8rem; border-bottom: 1px solid var(--nz-line);
	/*
	 * A HEADING MAY TAKE TWO LINES.
	 *
	 * nowrap made every heading as wide as its longest phrase — "TAXABLE
	 * AMOUNT" set a floor under a column of eight-character figures, and the
	 * table went off the side of the page to honour it. Headings wrap now:
	 * they are two short words stacked, read once, above the figures that
	 * are the point of the column.
	 *
	 * The sort arrow stays on the last word — it is inside the heading, and
	 * a wrapped heading carries it along.
	 */
	white-space: normal;
	overflow-wrap: break-word;
}
[dir="rtl"] .nz-table thead th { letter-spacing: 0; }
.nz-table thead th[data-nz-sort] { cursor: pointer; user-select: none; }
.nz-table thead th[data-nz-sort]:hover { color: var(--nz-ink); }
/* The heading and its arrow, side by side: the heading may be two lines and
   they share one edge, while the arrow centres against both. */
.nz-th { display: inline-flex; align-items: center; gap: .3rem; }
.text-end .nz-th { justify-content: flex-end; }
.nz-th__text { display: block; }
.nz-table thead th .nz-sort-icon { opacity: .35; flex: 0 0 auto; font-size: .7rem; }
.nz-table thead th[aria-sort] .nz-sort-icon { opacity: 1; color: var(--nz-brand); }
/*
 * A NARROWER GUTTER, so the columns themselves have the room.
 *
 * 1.15rem each side is 2.3rem per column, and a list of nine columns spent
 * a third of a page on the space BETWEEN its figures — then scrolled
 * sideways because there was none left for the figures. Every amount now
 * carries its currency, and this is what pays for it.
 */
.nz-table tbody td { padding: .9rem .8rem; font-size: .9rem; color: var(--nz-body); border-bottom: 1px solid var(--nz-line-2); vertical-align: middle; }
.nz-table tbody tr:last-child td { border-bottom: 0; }
.nz-table tbody tr { transition: background var(--nz-t-fast); }
.nz-table tbody tr:hover { background: var(--nz-soft); }
/* A totals row lines up with the column it totals: the same padding as a
   body cell, not the header styling a <th> would otherwise inherit. */
.nz-table tfoot th {
	padding: .9rem .8rem; font-size: .9rem; font-weight: 800; color: var(--nz-ink);
	background: var(--nz-soft); border-top: 1px solid var(--nz-line);
	vertical-align: middle; white-space: nowrap;
}

.nz-table__actions { display: flex; gap: .35rem; justify-content: flex-end; }

.nz-table-foot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: .75rem; padding: .85rem 1.15rem; border-top: 1px solid var(--nz-line); background: var(--nz-soft);
}
.nz-table-count { font-size: .84rem; color: var(--nz-muted); }

/* Empty / error / loading states — shared by tables and card grids. */
.nz-state { text-align: center; padding: 3.25rem 1.5rem; }
.nz-state__icon {
	width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 1.15rem;
	display: grid; place-items: center; font-size: 1.6rem;
	background: var(--nz-soft); color: var(--nz-muted);
}
.nz-state--error .nz-state__icon { background: #FDECEC; color: var(--nz-danger); }
.nz-state__title { font-size: 1.06rem; font-weight: 700; color: var(--nz-ink); margin-bottom: .35rem; }
.nz-state__text { font-size: .9rem; color: var(--nz-muted); margin: 0 auto; max-width: 24rem; }
.nz-state__actions { margin-top: 1.35rem; }

/* Mobile: stacked rows instead of a squashed table. */
@media (max-width: 767.98px) {
	.nz-table--stack thead { display: none; }
	.nz-table--stack tbody tr {
		display: block; border: 1px solid var(--nz-line); border-radius: var(--nz-r);
		margin: .75rem; padding: .35rem .25rem;
	}
	.nz-table--stack tbody td {
		display: flex; align-items: center; justify-content: space-between; gap: 1rem;
		border-bottom: 1px solid var(--nz-line-2); padding: .65rem .85rem; text-align: end;
	}
	.nz-table--stack tbody td::before {
		content: attr(data-label);
		font-size: .74rem; font-weight: 800; text-transform: uppercase;
		color: var(--nz-muted); text-align: start; flex: 0 0 auto;
	}
	.nz-table--stack tbody tr td:last-child { border-bottom: 0; }
	.nz-table--stack .nz-table__actions { justify-content: flex-end; }
}

/* ==========================================================================
   27. PAGINATION
   ========================================================================== */

.nz-pagination { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.nz-pagination .page-link {
	border: 1px solid var(--nz-line); border-radius: var(--nz-r-xs) !important;
	color: var(--nz-ink); font-size: .88rem; font-weight: 650;
	padding: .5rem .8rem; min-width: 38px; text-align: center;
	transition: all var(--nz-t-fast);
}
.nz-pagination .page-link:hover { background: var(--nz-brand-050); border-color: var(--nz-brand); color: var(--nz-brand); }
.nz-pagination .page-item.active .page-link { background: var(--nz-brand); border-color: var(--nz-brand); color: #fff; }
.nz-pagination .page-item.disabled .page-link { color: #C3CFDA; background: #fff; border-color: var(--nz-line-2); }
.nz-pagination .page-link:focus { box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
/* Chevrons follow the reading direction, not the glyph. */
[dir="rtl"] .nz-pagination .bi-chevron-left::before { content: "\F285"; }
[dir="rtl"] .nz-pagination .bi-chevron-right::before { content: "\F284"; }

/* ==========================================================================
   28. BLOG
   ========================================================================== */

.nz-post-card {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--nz-line); border-radius: var(--nz-r-lg);
	overflow: hidden; transition: border-color var(--nz-t), box-shadow var(--nz-t), transform var(--nz-t);
}
.nz-post-card:hover { border-color: color-mix(in srgb, var(--nz-a) 32%, var(--nz-line)); box-shadow: var(--nz-shadow); transform: translateY(-3px); }
.nz-post-card__media {
	position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
	background: linear-gradient(135deg, var(--nz-a-bg), #fff);
	color: var(--nz-a); font-size: 2.4rem; overflow: hidden;
}
.nz-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.nz-post-card__cat { position: absolute; top: .85rem; inset-inline-start: .85rem; }
.nz-post-card__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.nz-post-card__title { font-size: 1.06rem; font-weight: 750; color: var(--nz-ink); line-height: 1.4; margin-bottom: .55rem; }
.nz-post-card:hover .nz-post-card__title { color: var(--nz-brand); }
.nz-post-card__excerpt { font-size: .9rem; color: var(--nz-body); line-height: 1.6; margin: 0 0 1.15rem; }
.nz-post-card__meta { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--nz-line-2); display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--nz-muted); }
.nz-avatar {
	width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
	display: grid; place-items: center; font-size: .72rem; font-weight: 800;
	background: var(--nz-a-bg); color: var(--nz-a);
}
.nz-avatar--lg { width: 44px; height: 44px; flex-basis: 44px; font-size: .95rem; }
.nz-dot-sep::before { content: "·"; margin-inline: .35rem; }

.nz-post-card--wide { flex-direction: column; }
@media (min-width: 768px) {
	.nz-post-card--wide { flex-direction: row; }
	.nz-post-card--wide .nz-post-card__media { flex: 0 0 42%; aspect-ratio: auto; }
	.nz-post-card--wide .nz-post-card__body { padding: 1.75rem; }
	.nz-post-card--wide .nz-post-card__title { font-size: 1.32rem; }
}

/* Article body */
.nz-article { font-size: 1.045rem; line-height: 1.8; color: #405467; }
.nz-article > * + * { margin-top: 1.35rem; }
.nz-article h2 { font-size: 1.55rem; margin-top: 2.75rem; }
.nz-article h3 { font-size: 1.2rem; margin-top: 2.1rem; }
.nz-article .lead { font-size: 1.16rem; color: var(--nz-ink); font-weight: 500; line-height: 1.65; }
.nz-article ul, .nz-article ol { padding-inline-start: 1.35rem; display: grid; gap: .55rem; }
.nz-article li::marker { color: var(--nz-brand); font-weight: 700; }
.nz-article blockquote {
	margin: 2rem 0; padding: 1.15rem 1.4rem;
	border-inline-start: 3px solid var(--nz-brand);
	background: var(--nz-brand-050); border-radius: 0 var(--nz-r) var(--nz-r) 0;
	font-size: 1.1rem; font-weight: 500; color: var(--nz-ink); font-style: normal;
}
[dir="rtl"] .nz-article blockquote { border-radius: var(--nz-r) 0 0 var(--nz-r); }
.nz-article table { width: 100%; border: 1px solid var(--nz-line); border-radius: var(--nz-r); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .93rem; }
.nz-article thead th { background: var(--nz-soft); text-align: start; padding: .75rem 1rem; font-weight: 700; color: var(--nz-ink); border-bottom: 1px solid var(--nz-line); }
.nz-article tbody td { padding: .75rem 1rem; border-bottom: 1px solid var(--nz-line-2); }
.nz-article tbody tr:last-child td { border-bottom: 0; }
.nz-article img { border-radius: var(--nz-r-lg); border: 1px solid var(--nz-line); }
.nz-article code { background: var(--nz-soft); padding: .15em .4em; border-radius: 5px; font-size: .9em; color: var(--nz-brand-700); }
.nz-article pre { background: var(--nz-ink); color: #E6EDF4; padding: 1.15rem; border-radius: var(--nz-r); overflow-x: auto; font-size: .88rem; direction: ltr; text-align: left; }
.nz-article pre code { background: none; color: inherit; padding: 0; }

.nz-share { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.nz-share__btn {
	width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: #fff; border: 1px solid var(--nz-line); color: var(--nz-body);
	transition: all var(--nz-t-fast);
}
.nz-share__btn:hover { background: var(--nz-brand); border-color: var(--nz-brand); color: #fff; transform: translateY(-2px); }

.nz-sticky { position: sticky; top: calc(var(--nz-header-h) + 1.5rem); }

/* ==========================================================================
   29. PAGE HEADER (internal pages)
   ========================================================================== */

.nz-page-head { padding-block: clamp(2.75rem, 1.8rem + 3.5vw, 4.75rem) clamp(2rem, 1.4rem + 2.5vw, 3.25rem); text-align: center; }
.nz-page-head--start { text-align: start; }
.nz-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .84rem; color: var(--nz-muted); justify-content: center; margin-bottom: 1.1rem; }
.nz-page-head--start .nz-breadcrumb { justify-content: flex-start; }
.nz-breadcrumb a { color: var(--nz-muted); }
.nz-breadcrumb a:hover { color: var(--nz-brand); }
.nz-breadcrumb .bi { font-size: .68rem; opacity: .6; }
[dir="rtl"] .nz-breadcrumb .bi-chevron-right::before { content: "\F284"; }

/* ==========================================================================
   30. SCROLL-TO-TOP FAB
   ========================================================================== */

.nz-fab {
	position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem; z-index: 1040;
	width: 46px; height: 46px; border-radius: 50%; border: 0;
	background: var(--nz-brand); color: #fff; font-size: 1.1rem;
	display: grid; place-items: center;
	box-shadow: var(--nz-shadow-brand);
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity var(--nz-t), transform var(--nz-t), visibility var(--nz-t), background var(--nz-t-fast);
}
.nz-fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.nz-fab:hover { background: var(--nz-brand-700); }

/* ==========================================================================
   31. ERROR PAGE
   ========================================================================== */

.nz-error { text-align: center; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.nz-error__code {
	font-size: clamp(5rem, 3rem + 12vw, 10rem); font-weight: 800; line-height: 1;
	letter-spacing: var(--nz-tracking-tight);
	background: linear-gradient(135deg, var(--nz-brand), var(--nz-accent));
	-webkit-background-clip: text; background-clip: text; color: transparent;
	margin-bottom: .75rem;
}

/* ==========================================================================
   32. TOOLTIPS
   ========================================================================== */

.tooltip { --bs-tooltip-bg: var(--nz-ink); --bs-tooltip-border-radius: var(--nz-r-xs); --bs-tooltip-font-size: .8rem; --bs-tooltip-opacity: 1; }
.tooltip-inner { padding: .45rem .7rem; font-weight: 600; max-width: 240px; font-family: var(--nz-font); }

/* ==========================================================================
   33. UTILITIES
   ========================================================================== */

.nz-divider { height: 1px; background: var(--nz-line); border: 0; margin: 0; }
.nz-measure { max-width: var(--nz-measure); }
.nz-w-full { width: 100%; }
.nz-hidden { display: none !important; }
.nz-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Reveal-on-scroll is opt-IN: the hidden state only applies once the
   .nz-js flag is set, so a JS failure can never leave the page blank. */
.nz-js .nz-reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--nz-ease), transform 520ms var(--nz-ease); }
.nz-js .nz-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.nz-js .nz-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Print — drop the chrome, keep the content. */
@media print {
	.nz-header, .nz-topbar, .nz-footer, .nz-fab, .nz-toast-stack, .nz-cta, .offcanvas { display: none !important; }
	body { background: #fff; }
	.nz-section { padding-block: 1rem; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #666; }
}

/* --- live email availability -------------------------------------------
   The sign-up address reports its own state, because "someone already has
   this" is not something careful typing can avoid. The field shows a spinner
   while it asks, then a tick or a cross, with the wording underneath.
   ----------------------------------------------------------------------- */
/*
 * .nz-input-shell wraps the control alone, so anything positioned inside it
 * lands in the box rather than beside the label above it.
 */
.nz-input-shell { position: relative; display: block; }
.nz-input-shell .form-control { padding-inline-end: 2.7rem; }

.nz-check-badge {
	position: absolute;
	inset-inline-end: .8rem;
	top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px;
	font-size: 1.05rem;
	pointer-events: none;
}
.nz-check-badge.is-checking { color: var(--nz-muted); }
.nz-check-badge.is-free     { color: #16A34A; }
.nz-check-badge.is-taken    { color: #E5566D; }

.nz-email-state,
.nz-check-state {
	display: flex; align-items: center; gap: .4rem;
	margin-top: .4rem;
	font-size: .8rem; font-weight: 600;
	color: var(--nz-muted);
}
.nz-email-state:empty,
.nz-check-state:empty { margin-top: 0; }
.nz-email-state.is-free,
.nz-check-state.is-free     { color: #15803D; }
.nz-email-state.is-taken,
.nz-check-state.is-taken    { color: #C6304A; }
.nz-email-state.is-checking,
.nz-check-state.is-checking { color: var(--nz-muted); }

.nz-spinner--xs { width: 13px; height: 13px; border-width: 2px; }

/* The live answer sits where the hint sat, so a half-width field does not
   grow a column wider to hold one sentence. */
.nz-check-state { flex-wrap: wrap; }

/*
 * A submit waiting on a check should look deliberately not-yet, not broken:
 * a solid muted button rather than a washed-out ghost of the real one.
 */
.btn.is-waiting,
.btn.is-waiting:hover,
.btn.is-waiting:focus {
	background: #E4EAF0;
	border-color: #E4EAF0;
	color: #8A99AC;
	box-shadow: none;
	opacity: 1;
	cursor: not-allowed;
}

.btn.is-waiting .nz-arrow { opacity: .5; }

/* --- full-screen redirect state ---------------------------------------- */
.nz-redirect {
	position: fixed; inset: 0; z-index: 2000;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 1.1rem; text-align: center; padding: 2rem;
	background: var(--nz-soft);
}
.nz-redirect__logo { height: 44px; width: auto; margin-bottom: .4rem; }
.nz-redirect__text { color: var(--nz-body); font-size: .95rem; margin: 0; }
.nz-redirect__title { font-size: 1.15rem; font-weight: 800; color: var(--nz-ink); margin: 0; }

/* ==========================================================================
   Auth pages (standalone, outside the app shell)
   ========================================================================== */

.nz-page-auth .nz-auth-wrap {
	min-height: calc(100vh - var(--nz-header-h));
	display: flex; align-items: center; justify-content: center;
	padding: 3rem 1rem;
}

.nz-auth-card {
	width: 100%; max-width: 460px;
	background: #FFFFFF; border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-lg); box-shadow: var(--nz-shadow);
	padding: clamp(1.5rem, 4vw, 2.25rem);
}

/* ==========================================================================
   Password strength

   A three-segment bar answers the only question a bar can answer — weak, fair
   or strong — with the verdict beside it rather than underneath, and the
   individual rules as compact chips that tick off as they are met. Five thin
   segments read as a progress bar for something the user had not started.
   ========================================================================== */

.nz-pw { margin-top: .7rem; }

.nz-pw__row { display: flex; align-items: center; gap: .75rem; }

.nz-pw__bar { display: flex; gap: .45rem; flex: 1 1 auto; min-width: 0; }

.nz-pw__seg {
	height: 5px; flex: 1 1 0;
	border-radius: 999px;
	background: var(--nz-line);
	transition: background var(--nz-t-fast);
}

.nz-pw__label {
	flex: 0 0 auto;
	font-size: .85rem; font-weight: 700;
	color: var(--nz-muted);
	min-width: 3.5rem; text-align: end;
}

/* Filled segments and the verdict always share a colour. */
.nz-pw[data-score="1"] .nz-pw__seg:nth-child(-n+1) { background: #E5566D; }
.nz-pw[data-score="1"] .nz-pw__label { color: #E5566D; }

.nz-pw[data-score="2"] .nz-pw__seg:nth-child(-n+2) { background: #E0A422; }
.nz-pw[data-score="2"] .nz-pw__label { color: #C08415; }

.nz-pw[data-score="3"] .nz-pw__seg { background: #16A34A; }
.nz-pw[data-score="3"] .nz-pw__label { color: #15803D; }

.nz-pw__list {
	list-style: none; padding: 0;
	margin: .7rem 0 0;
	display: flex; flex-wrap: wrap;
	gap: .35rem .9rem;
}

.nz-pw__list li {
	display: inline-flex; align-items: center; gap: .32rem;
	font-size: .82rem; font-weight: 600;
	color: var(--nz-muted);
	transition: color var(--nz-t-fast);
}

.nz-pw__list li i {
	font-size: .95rem;
	color: #C7D2DD;
	transition: color var(--nz-t-fast);
}

.nz-pw__list li.is-met   { color: #15803D; }
.nz-pw__list li.is-met i { color: #16A34A; }

/* --- reveal ------------------------------------------------------------- */

.nz-pw-reveal {
	position: absolute;
	inset-inline-end: .45rem;
	top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	border: 0; border-radius: 8px;
	background: transparent;
	color: var(--nz-muted);
	transition: color var(--nz-t-fast), background var(--nz-t-fast);
}

.nz-pw-reveal:hover { color: var(--nz-brand); background: var(--nz-brand-050); }

/* ==========================================================================
   OTP input
   ========================================================================== */

.nz-otp { display: flex; gap: .5rem; justify-content: center; direction: ltr; }

.nz-otp input {
	width: 46px; height: 56px; flex: 0 0 auto;
	text-align: center; font-size: 1.35rem; font-weight: 700;
	border: 1px solid var(--nz-line); border-radius: var(--nz-r-sm);
	background: #FFFFFF; color: var(--nz-ink);
	font-variant-numeric: tabular-nums;
	transition: border-color var(--nz-t-fast), box-shadow var(--nz-t-fast);
}

.nz-otp input:focus {
	outline: 0; border-color: var(--nz-brand);
	box-shadow: 0 0 0 3px var(--nz-brand-050);
}

.nz-otp input.is-filled { border-color: var(--nz-brand); }
.nz-otp.is-error input { border-color: #D9534F; }

@media (max-width: 380px) {
	.nz-otp input { width: 40px; height: 50px; font-size: 1.15rem; }
}

.nz-otp-meta {
	display: flex; justify-content: center; align-items: center;
	gap: .5rem; flex-wrap: wrap;
	margin-top: 1.1rem;
}

/* Counting down should not make the button look broken. */
.nz-otp-meta .btn[disabled] {
	opacity: 1;
	background: transparent;
	border-color: var(--nz-line);
	color: var(--nz-muted);
	cursor: default;
}

.nz-dev-code {
	margin-top: .9rem; padding: .7rem .9rem;
	border: 1px dashed #E0A422; border-radius: var(--nz-r-sm);
	background: #FFF8EC; color: #7A5314; font-size: .85rem; text-align: center;
}
.nz-dev-code strong { font-size: 1.2rem; letter-spacing: .3em; display: block; margin-top: .2rem; }


/* --- terms consent row --------------------------------------------------
   The checkbox sat hard against the sentence, and a two-line sentence needs
   its own leading to stay readable beside a control. The sentence also stays
   its normal colour when unticked: Bootstrap turns an invalid control's label
   red, which made a plain consent line read like an error message.
   ----------------------------------------------------------------------- */
.nz-auth .form-check {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding-left: 0;
	margin: 1.4rem 0 1.6rem;
}

[dir="rtl"] .nz-auth .form-check { padding-right: 0; }

.nz-auth .form-check .form-check-input {
	flex: 0 0 auto;
	width: 1.1rem; height: 1.1rem;
	margin: .2rem 0 0;
	float: none;
}

.nz-auth .form-check .form-check-label {
	line-height: 1.7;
	margin: 0;
	color: var(--nz-body);
}

/*
 * An unticked box is not an error until someone tries to submit. Bootstrap
 * marks a required checkbox :invalid from the moment the page loads, which
 * turned a plain consent sentence red before it had been read.
 */
.nz-auth .form-check .form-check-input:invalid ~ .form-check-label,
.nz-auth .form-check .form-check-input.is-invalid ~ .form-check-label {
	color: var(--nz-body);
}

/* Once a submit HAS been attempted, saying so in red is the point. */
.nz-auth form[data-nz-submitted] .form-check-input.is-invalid ~ .form-check-label {
	color: #C6304A;
}
.nz-auth form[data-nz-submitted] .form-check-input.is-invalid {
	border-color: #D9534F;
}

/*
 * Underlined rather than bold: bold text butting against the words either
 * side of it reads as though the space has gone missing.
 */
.nz-auth .form-check .form-check-label a {
	color: var(--nz-brand);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.nz-auth .form-check .form-check-label a:hover { text-decoration-thickness: 2px; }

/* ==========================================================================
   NZ.Select — the searchable dropdown

   The native <select> stays in the DOM and keeps its job; this is the face
   drawn over it. It matches .form-select exactly so a page of mixed controls
   still looks like one form.
   ========================================================================== */

.nz-select { position: relative; }

.nz-select__native {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 100%; height: 100%;
	inset-block-start: 0; inset-inline-start: 0;
}

.nz-select__control {
	display: flex; align-items: center; gap: .5rem;
	width: 100%;

	/* The text box's own two values. A picker standing in a row of boxes —
	   Country, in every address grid — was nine pixels shorter than all of
	   them: five of padding, and four more of leading, because this is a
	   <button> and a button does not inherit the 1.5 an <input> is given.
	   See .form-control above; these two follow it. */
	padding: .72rem .9rem;
	line-height: 1.5;
	border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-sm);
	background: #FFFFFF;
	color: var(--nz-ink);
	font-size: .95rem;
	text-align: start;
	transition: border-color var(--nz-t-fast), box-shadow var(--nz-t-fast);
}

.nz-select__control:hover { border-color: #C7D2DD; }

.nz-select.is-open .nz-select__control,
.nz-select__control:focus {
	outline: 0;
	border-color: var(--nz-brand);
	background: var(--nz-brand-050);
	color: var(--nz-brand);
	box-shadow: 0 0 0 3px var(--nz-brand-050);
}

.nz-select.is-open .nz-select__caret { color: var(--nz-brand); }

.nz-select__control.is-invalid { border-color: #D9534F; }
.nz-select__control:disabled { background: var(--nz-soft); color: var(--nz-muted); cursor: not-allowed; }

.nz-select__value {
	flex: 1 1 auto; min-width: 0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nz-select__value.is-placeholder { color: var(--nz-muted); }

.nz-select__caret { flex: 0 0 auto; font-size: .75rem; color: var(--nz-muted); transition: transform var(--nz-t-fast); }
.nz-select.is-open .nz-select__caret { transform: rotate(180deg); }

.nz-select__panel {
	position: absolute;
	z-index: 1060;
	inset-inline: 0;
	top: calc(100% + 6px);
	min-width: 260px;
	background: #FFFFFF;
	border: 1px solid var(--nz-line);
	border-radius: 14px;
	box-shadow: var(--nz-shadow-lg);
	overflow: hidden;
}

/* The search box is the point of the panel, so it is given real presence
   rather than being tucked into a corner. */
.nz-select__search {
	position: relative;
	padding: .75rem;
	border-bottom: 1px solid var(--nz-line);
}
.nz-select__search i {
	position: absolute;
	inset-inline-start: 1.6rem; top: 50%; transform: translateY(-50%);
	color: var(--nz-muted); font-size: 1rem; pointer-events: none;
}
.nz-select__search input {
	width: 100%;
	padding: .68rem .9rem .68rem 2.75rem;
	border: 2px solid var(--nz-line);
	border-radius: 12px;
	font-size: .96rem;
	color: var(--nz-ink);
	background: #FFFFFF;
	transition: border-color var(--nz-t-fast), box-shadow var(--nz-t-fast);
}
[dir="rtl"] .nz-select__search input { padding: .68rem 2.75rem .68rem .9rem; }
.nz-select__search input::placeholder { color: var(--nz-muted); }
.nz-select__search input:focus {
	outline: 0;
	border-color: var(--nz-brand);
	box-shadow: 0 0 0 4px var(--nz-brand-050);
}

.nz-select__list {
	list-style: none; margin: 0; padding: .4rem;
	max-height: 288px; overflow-y: auto;
}

.nz-select__option {
	display: flex; align-items: center; gap: .6rem;
	padding: .68rem .8rem;
	border-radius: 10px;
	font-size: .98rem;
	color: var(--nz-ink);
	cursor: pointer;
}
.nz-select__option span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nz-select__option i { flex: 0 0 auto; color: var(--nz-brand); }

/* The compact menu a small control opens: tighter rows, smaller type,
   and no more padding around the list than the rows need. */
.nz-select__panel--sm .nz-select__list { padding: .25rem; }
.nz-select__panel--sm .nz-select__option { padding: .38rem .55rem; font-size: .85rem; border-radius: 8px; }
.nz-select__panel--sm .nz-select__option i { font-size: .8rem; }

.nz-select__option.is-active  { background: var(--nz-brand-050); }
.nz-select__option.is-selected { color: var(--nz-brand); font-weight: 650; }

.nz-select__empty {
	margin: 0; padding: 1rem;
	text-align: center; font-size: .88rem; color: var(--nz-muted);
}

/* Inside a scrollable modal the panel must not be clipped by the body. */
.modal-body .nz-select__panel { position: absolute; }

/*
   THE SECTIONS OF A PAGE, ACROSS THE TOP.

   Wraps rather than scrolls: a row of names that runs off the edge hides
   exactly the section somebody could not find by scrolling either.

*/
.nz-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.nz-jump__item {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .4rem .75rem;
	border: 1px solid var(--nz-line); border-radius: var(--nz-r-pill);
	background: #FFFFFF;
	font-size: .82rem; font-weight: 600;
	color: var(--nz-muted); text-decoration: none;
	transition: color var(--nz-t-fast), border-color var(--nz-t-fast);
}
.nz-jump__item:hover,
.nz-jump__item:focus-visible { color: var(--nz-ink); border-color: #C7D2DD; }
.nz-jump__item .bi { font-size: .9rem; opacity: .75; }

/*
   AN ADDRESS IN TWO LANGUAGES: a row per field, a column per reading.

   Side by side, because "is the Arabic city filled in?" is answered by
   looking across. Two stacked copies of the same eleven questions would
   put the answer and its twin a screen apart.

   The columns stack on a narrow screen — at which point the label above
   each pair is doing the work the header row does on a wide one.
*/
/* The section head, borrowed whole from the organization page's card so
   the two cannot look different. Without the card around it, it keeps the
   rule under it and loses the card's side padding. */
.nz-panel__head.nz-addr__lead { padding-inline: 0; margin-bottom: 1rem; }

.nz-addr { display: flex; flex-direction: column; gap: .6rem; }
/* Top-aligned, not centred. A message under one box makes its cell taller
   than the cell beside it, and centring then drops the twin out of line
   with the box it belongs to. The label carries the control's height
   instead and centres inside that, so it sits level with its own box
   whether or not anything has grown underneath either one. */
.nz-addr__head,
.nz-addr__row {
	display: grid;
	grid-template-columns: minmax(9rem, 14rem) 1fr 1fr;
	gap: .75rem;
	align-items: start;
}

/* The box, and the line under it saying what is wrong with the box. */
.nz-addr__cell { min-width: 0; }
.nz-addr__cell .invalid-feedback { margin-top: .3rem; }
.nz-addr__cell:has(.is-invalid) .invalid-feedback { display: block; }
.nz-addr__head span {
	font-size: .78rem; font-weight: 700;
	color: var(--nz-muted);
}
.nz-addr__label {
	font-size: .88rem; font-weight: 600; color: var(--nz-ink);
	display: flex; flex-direction: column; justify-content: center; gap: .1rem;
	min-height: var(--nz-ctl-h);
}
.nz-addr__hint { font-size: .74rem; font-weight: 400; color: var(--nz-muted); }

/* The padlock's shell is a block; inside a grid column that is already the
   right width it only has to not become a second line. */
.nz-addr__row .nz-input-shell { display: block; width: 100%; }

/* Why a row cannot be changed: a second line of the SAME row, under the two
   boxes and starting where they start. Inside a cell it made that cell
   taller than its twin and the pair stopped lining up; as a row of its
   own it drifted away from the label it belongs to. The label spans both
   lines, so the whole thing reads as one question. */
.nz-addr__row--noted { row-gap: .35rem; }
.nz-addr__row--noted .nz-addr__label { grid-row: 1 / 3; }
.nz-addr__note {
	grid-column: 2 / -1;
	margin: 0;
	font-size: .78rem; line-height: 1.5;
	color: var(--nz-muted);
}

@media (max-width: 860px) {
	.nz-addr__head { display: none; }
	.nz-addr__row { grid-template-columns: 1fr; gap: .35rem; }
	.nz-addr__row + .nz-addr__row { margin-top: .5rem; }
	/* One column: the label is above its box, so there is nothing to sit
	   level with and a control's worth of height is just a hole. */
	.nz-addr__label { min-height: 0; }
	.nz-addr__note { grid-column: 1 / -1; }
}

/* A field that cannot be edited should look settled, not broken. */
.nz-input-shell .form-select:disabled,
.nz-input-shell .form-control:disabled,
.nz-input-shell .form-control[readonly] {
	background: var(--nz-soft);
	color: var(--nz-muted);
	cursor: not-allowed;
}
.nz-input-shell .form-control:disabled + .nz-check-badge,
.nz-input-shell .form-select:disabled + .nz-check-badge { color: var(--nz-muted); }

/*
 * And the same, once NZ.Select has replaced it.
 *
 * The rule above styles a disabled <select>. That element is hidden the moment
 * NZ.Select attaches, and what the reader actually sees is a button — which
 * inherits none of it, and looked exactly like every editable picker on the
 * form. See the `frozen` branch in nizam.select.js, which is what sets this.
 */
.nz-select.is-frozen .nz-select__control {
	background: var(--nz-soft);
	color: var(--nz-muted);
	cursor: not-allowed;
}

.nz-select.is-frozen .nz-select__control:hover { border-color: var(--nz-line); }

/* No caret: there is nothing to drop down. The lock beside it says why. */
.nz-select.is-frozen .nz-select__caret { display: none; }

/* Room for the lock, which sits where the caret was. */
.nz-input-shell .nz-select.is-frozen .nz-select__control { padding-inline-end: 2.7rem; }

.nz-input-shell .nz-select.is-frozen + .nz-check-badge { color: var(--nz-muted); }

/*
 * AND THE VALUE SITS IN THE MIDDLE OF IT.
 *
 * A locked control shows one line of text with no caret beside it, and
 * that line was settling low in the box. Two attempts at finding which
 * element was doing it — the value box's baseline alignment, the label's
 * leading — both missed, so this stops asking: the text block is given
 * the full inner height of the control and centres itself in it, which
 * is true whatever is or is not inside it.
 *
 * Only for frozen controls. An editable picker has a caret, a mark and
 * sometimes two lines of text to balance, and it does not have this
 * problem.
 */
.nz-input-shell .nz-select.is-frozen .nz-select__value { align-self: stretch; align-items: center; }
.nz-input-shell .nz-select.is-frozen .nz-select__text {
	align-self: stretch;
	justify-content: center;
}


/* ==========================================================================
   Bootstrap, in Nizam's colours

   Bootstrap ships its own blue and uses it for the active dropdown item, the
   current pagination page, a checked checkbox, focus rings and links. Chasing
   those down component by component means missing one; pointing Bootstrap's
   own variables at the brand colour fixes every current and future use at
   once.
   ========================================================================== */

:root {
	--bs-primary: var(--nz-brand);
	--bs-primary-rgb: 23, 105, 90;
	--bs-link-color: var(--nz-brand);
	--bs-link-hover-color: var(--nz-brand-700, var(--nz-brand));
	--bs-link-color-rgb: 23, 105, 90;

	/* Dropdowns — the language switcher and the account menu. */
	--bs-dropdown-link-active-bg: var(--nz-brand-050);
	--bs-dropdown-link-active-color: var(--nz-brand);
	--bs-dropdown-link-hover-bg: var(--nz-soft);
	--bs-dropdown-border-color: var(--nz-line);
	--bs-dropdown-border-radius: var(--nz-r-sm);

	/* Pagination. */
	--bs-pagination-color: var(--nz-body);
	--bs-pagination-active-bg: var(--nz-brand);
	--bs-pagination-active-border-color: var(--nz-brand);
	--bs-pagination-hover-color: var(--nz-brand);
	--bs-pagination-focus-box-shadow: 0 0 0 3px var(--nz-brand-050);

	/* Form controls. */
	--bs-form-check-bg: #fff;
	--bs-focus-ring-color: var(--nz-brand-050);
}

/* A checked box or switch, and a focused control. */
.form-check-input:checked {
	background-color: var(--nz-brand);
	border-color: var(--nz-brand);
}

.form-check-input:focus,
.form-control:focus,
.form-select:focus {
	border-color: var(--nz-brand);
	box-shadow: 0 0 0 3px var(--nz-brand-050);
}

.form-check-input:focus { border-color: var(--nz-brand); }

/* The active dropdown item, stated explicitly as well — Bootstrap sets the
   colour on .active in some builds without going through the variable. */
.nz-dropdown .dropdown-item.active,
.nz-dropdown .dropdown-item:active {
	background-color: var(--nz-brand-050);
	color: var(--nz-brand);
	font-weight: 650;
}

.nz-dropdown .dropdown-item.active i { color: var(--nz-brand); opacity: 1; }

/* A field marked invalid shows its message, however deeply the control is
   wrapped — see NZ.Validate.paint() for why the sibling selector is not
   enough once a reveal button or a status badge sits alongside the input. */
.nz-field--invalid > .invalid-feedback,
.nz-field--invalid .invalid-feedback {
	display: block;
}

.nz-field--invalid .nz-input-shell .form-control {
	border-color: #D9534F;
}

/* A confirmation opens over whatever asked for it, so it needs to sit above
   both that modal and its backdrop. */
#nzConfirmModal { z-index: 1085; }
.modal-backdrop.show ~ .modal-backdrop.show { z-index: 1080; }

/* --------------------------------------------------------------------------
   A dropdown's quiet second column

   Any <option> may carry data-hint, and NZ.Select renders it beside the label:
   "2026-09-16" with "YYYY-MM-DD", "Asia/Riyadh" with "GMT+3 · 4:57 AM". The
   hint is the half that settles what the label means, so it has to be visible
   and has to stay subordinate.

   Two placements on purpose. On the CLOSED control it sits straight after the
   label, because the two read as one phrase there and a gap between them looks
   like two unrelated things. In the LIST it takes its own column at the end,
   because those rows are being compared with each other and a hint in line
   would make them impossible to scan.
   -------------------------------------------------------------------------- */

.nz-select__hint { color: var(--nz-muted); font-size: .88em; }

/* --- on the control: inline, straight after the label ----------------- */
/*
 * Centred, not on a common baseline.
 *
 * The box holds a mark, a block of one or two lines of text, and a hint,
 * and baseline alignment lines up the FIRST LINE of that block with the
 * others — which drops the whole block by whatever the tallest sibling
 * puts above its own baseline. On a control whose height is fixed that
 * reads as a value sitting low in its box.
 */
.nz-select__value { display: flex; align-items: center; gap: .5rem; }
.nz-select__value .nz-select__label {
	min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nz-select__value .nz-select__hint {
	flex: 0 1 auto; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- in the list: its own column at the end --------------------------- */
/* The label takes the slack, which is what pushes the hint and the tick to the
   end. `.nz-select__option span` already sets flex:1 for every span in the row,
   so the hint has to opt out of it or it would share the space equally. */
.nz-select__option .nz-select__hint {
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding-inline-start: .75rem;
}


/* ==========================================================================
   THE PRODUCTS

   Nizam is four products on one account, and until there were four pages
   about them the site said so only in the navigation. These are the pieces
   those pages are built from: the card that stands for a product, the grid
   of six things it does, the head of its own page, and the tab strip that
   lets one pricing page carry four price lists.
   ========================================================================== */

/* --- one product, as a card ------------------------------------------- */

/* A link, not a card with a link in it. The whole tile is the target, which
   is what somebody expects of something that looks like an app icon. */
.nz-prodcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.6rem;
	background: #fff;
	border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-lg);
	text-decoration: none;
	transition: border-color var(--nz-t), box-shadow var(--nz-t), transform var(--nz-t);
}
.nz-prodcard:hover {
	border-color: color-mix(in srgb, var(--nz-a) 34%, var(--nz-line));
	box-shadow: var(--nz-shadow);
	transform: translateY(-3px);
	text-decoration: none;
}
.nz-prodcard:hover .nz-icon-tile { transform: scale(1.06); }

.nz-prodcard__name {
	margin: 0 0 .4rem;
	font-size: 1.1rem; font-weight: 700; color: var(--nz-ink);
}
.nz-prodcard__text {
	margin: 0 0 1rem;
	font-size: .93rem; line-height: 1.6; color: var(--nz-body);
}

/* Pushed to the bottom so the four cards line their prices up even when the
   taglines run to different numbers of lines. */
.nz-prodcard__price {
	margin-top: auto;
	font-size: .9rem; font-weight: 700; color: var(--nz-ink);
}

.nz-prodcard__go {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-top: .6rem;
	font-size: .88rem; font-weight: 600; color: var(--nz-a);
}
.nz-prodcard__go i { transition: transform var(--nz-t); }
.nz-prodcard:hover .nz-prodcard__go i { transform: translateX(3px); }

/* The arrow points the way the language runs. */
[dir="rtl"] .nz-prodcard__go i { transform: scaleX(-1); }
[dir="rtl"] .nz-prodcard:hover .nz-prodcard__go i { transform: scaleX(-1) translateX(3px); }

/* --- what a product does ---------------------------------------------- */

.nz-feature {
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-lg);
}
.nz-feature__title {
	margin: 0 0 .45rem;
	font-size: 1.02rem; font-weight: 700; color: var(--nz-ink);
}
.nz-feature__text {
	margin: 0;
	font-size: .93rem; line-height: 1.62; color: var(--nz-body);
}

/* --- the head of a product page --------------------------------------- */

.nz-prodhead { text-align: center; }

/* Above the eyebrow rather than beside it: this is the one place on the site
   where the reader's first question is "which of the four is this", and the
   icon answers it before any word is read. */
.nz-prodhead__tile { display: inline-flex; margin: 0 auto .9rem; }

/* --- four price lists, one page --------------------------------------- */

.nz-pricetabs {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
	margin-bottom: 2.25rem;
}

.nz-pricetab {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .6rem 1.1rem;
	background: #fff;
	border: 1px solid var(--nz-line);
	border-radius: 999px;
	font-size: .93rem; font-weight: 600; color: var(--nz-body);
	cursor: pointer;
	transition: border-color var(--nz-t), color var(--nz-t), background var(--nz-t);
}
.nz-pricetab:hover { border-color: var(--nz-brand); color: var(--nz-ink); }
.nz-pricetab.is-on {
	background: var(--nz-brand);
	border-color: var(--nz-brand);
	color: #fff;
}
.nz-pricetab i { font-size: 1.05rem; }

/* The line above each set of cards, saying which product they belong to.
   Belt and braces with the tab strip: somebody who has scrolled past the tabs
   should still be able to tell whose prices these are. */
.nz-pricepane__lead {
	display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
	margin: 0 0 1.5rem;
	padding: .9rem 1.1rem;
	background: #fff;
	border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-lg);
}
.nz-pricepane__lead .nz-icon-tile { margin-bottom: 0; }
.nz-pricepane__lead strong { display: block; color: var(--nz-ink); font-size: .98rem; }
.nz-pricepane__lead .nz-muted { display: block; font-size: .85rem; }

@media (max-width: 575.98px) {
	.nz-pricetab { padding: .5rem .85rem; font-size: .87rem; }
	.nz-pricetab span { display: none; }
	.nz-pricetab.is-on span { display: inline; }
}


/* --- one transaction, through three products --------------------------
   The picture on the home page. Boxes and arrows built from HTML rather than
   drawn: a diagram goes stale the day a product is renamed, and an image of
   English labels cannot be read in Arabic without being redrawn. This one
   reverses itself with the language and restyles itself with the brand.
   --------------------------------------------------------------------- */

.nz-flow {
	margin: 0 auto 2.5rem;
	padding: 1.75rem 1.5rem;
	background: #fff;
	border: 1px solid var(--nz-line);
	border-radius: var(--nz-r-lg);
}

.nz-flow__title {
	margin: 0 0 1.5rem;
	text-align: center;
	font-size: .85rem; font-weight: 600; letter-spacing: .02em;
	color: var(--nz-muted);
}

.nz-flow__steps {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; align-items: flex-start; justify-content: center;
	gap: .5rem; flex-wrap: wrap;
}

.nz-flow__step {
	position: relative;
	flex: 1 1 8.5rem; max-width: 12rem;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding-inline: .75rem;
}

/* The arrow between one step and the next, drawn on the step that follows it
   so the first one never has a line coming from nowhere. */
.nz-flow__step + .nz-flow__step::before {
	content: "";
	position: absolute;
	inset-inline-start: -50%;
	top: 23px;
	width: 100%;
	border-top: 2px dashed var(--nz-line-2);
	z-index: 0;
}

.nz-flow__tile {
	position: relative; z-index: 1;
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: .7rem;
	border-radius: 50%;
	background: var(--nz-brand-050);
	border: 1px solid var(--nz-brand-100);
	color: var(--nz-brand);
	font-size: 1.15rem;
}

.nz-flow__label {
	font-size: .9rem; font-weight: 700; color: var(--nz-ink);
	line-height: 1.4;
}
.nz-flow__app {
	margin-top: .15rem;
	font-size: .78rem; color: var(--nz-muted);
}

/*
 * The one moving thing on the page.
 *
 * Each tile lights up a beat after the one before it, so the eye is walked
 * along the row in the order the work actually happens. It runs once — a loop
 * would compete with the text beside it for the rest of the visit — and it is
 * decoration, so `prefers-reduced-motion` turns it off entirely and the strip
 * is simply there, already correct.
 */
.nz-reveal.is-in .nz-flow__tile {
	animation: nz-flow-pop .5s var(--nz-ease, ease) both;
	animation-delay: calc(var(--nz-flow-i, 0) * .18s);
}

@keyframes nz-flow-pop {
	0%   { transform: scale(.7); opacity: 0; }
	60%  { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.nz-reveal.is-in .nz-flow__tile { animation: none; }
}

@media (max-width: 575.98px) {
	/* Stacked on a phone, and the dashes would be pointing sideways at
	   nothing, so they go. */
	.nz-flow__steps { flex-direction: column; align-items: stretch; gap: 1rem; }
	.nz-flow__step { max-width: none; flex-direction: row; text-align: start; gap: .85rem; align-items: center; }
	.nz-flow__step + .nz-flow__step::before { display: none; }
	.nz-flow__tile { margin-bottom: 0; flex: 0 0 46px; }
}


/* ==========================================================================
   THE PRODUCTS, ONE ROW EACH

   The centrepiece of the home page. It was a four-up card grid and it was the
   third identical block on the page — eyebrow, two-tone heading, row of cards,
   then the same again. A page whose every section is the same shape reads as
   one long section, and this is the part that should not.

   Each product gets a full row, alternating sides, in its own accent colour,
   with the screen it actually draws. The tone class on the row sets --nz-a and
   --nz-a-bg, which the eyebrow, the number and the tiles inside all read.
   ========================================================================== */

.nz-prows { padding-block: 1rem 2rem; }

.nz-prow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 3rem;
	padding-block: 4.5rem;
}
.nz-prow + .nz-prow { border-top: 1px solid var(--nz-line-2); }

/* Every other one the other way round, so the eye zig-zags down the page
   rather than sliding past four identical boxes. `order` rather than
   `direction`, so the text inside is never reversed with the layout. */
.nz-prow--flip .nz-prow__body   { order: 2; }
.nz-prow--flip .nz-prow__points { order: 1; }

.nz-prow__body { position: relative; min-width: 0; }

/* The count, set big and faint behind the eyebrow. It is decoration: it says
   "there are four of these and this is the second" without a sentence. */
.nz-prow__index {
	position: absolute;
	inset-block-start: -2.6rem;
	inset-inline-start: -.35rem;
	font-size: 4.5rem; font-weight: 800; line-height: 1;
	color: var(--nz-a);
	opacity: .08;
	pointer-events: none;
	user-select: none;
}

.nz-prow__title { margin: .85rem 0 0; }

.nz-prow__text {
	margin: .9rem 0 0;
	font-size: 1.02rem; line-height: 1.68; color: var(--nz-body);
	max-width: 38rem;
}

/* --- the three things it does ----------------------------------------- */

/*
 * The second column.
 *
 * It was a list tucked under the paragraph in the left column, with a drawn
 * mock-up of the product opposite. The mock-up has gone — it read as a
 * screenshot without being one — so these take the space, which is the right
 * trade: three sentences about the work are worth more than a picture of a
 * window, and they are true.
 */
.nz-prow__points {
	list-style: none;
	margin: 0; padding: 1.75rem;
	display: grid; gap: 1.35rem; align-content: center;
	background: var(--nz-a-bg);
	border-radius: var(--nz-r-lg);
}
.nz-prow__points li {
	display: flex; align-items: flex-start; gap: .85rem;
	font-size: .95rem; line-height: 1.62; color: var(--nz-body);
}
.nz-prow__points i {
	flex: 0 0 1.75rem;
	width: 1.75rem; height: 1.75rem;
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: .05rem;
	border-radius: var(--nz-r-sm);
	background: #fff; color: var(--nz-a);
	font-size: .9rem;
}
.nz-prow__points strong {
	display: block;
	color: var(--nz-ink); font-weight: 700;
}

/* --- the way in, and what it costs ------------------------------------ */

.nz-prow__foot {
	display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
	margin-top: 1.9rem;
}
.nz-prow__price { display: flex; flex-direction: column; line-height: 1.35; }
.nz-prow__price strong { font-size: .95rem; color: var(--nz-ink); }
.nz-prow__price span   { font-size: .8rem; color: var(--nz-muted); }

@media (max-width: 991.98px) {
	/* Full width now, so there is room — wrapping is kinder than a line
	   that runs off the side of a phone. */
	.nz-prow__flow { flex-wrap: wrap; gap: .5rem; }

	.nz-prow {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem;
		padding-block: 3rem;
	}
	/* Stacked, the points go under the words every time — alternating only
	   makes sense when there are two columns to alternate between. */
	.nz-prow--flip .nz-prow__body   { order: 1; }
	.nz-prow--flip .nz-prow__points { order: 2; }

	.nz-prow__index { font-size: 3.5rem; inset-block-start: -2rem; }
}


/* --- a plain two-column list, for when a card grid would be one too many
   Used by the "how it fits together" section. There is already a card grid
   further down the home page; two identical grids in one document turn both
   of them into furniture. This is quieter: a rule between rows, no border, no
   shadow, and it does not compete with the flow strip above it.
   --------------------------------------------------------------------- */

.nz-pairs {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 3rem;
}

.nz-pairs__item {
	display: flex; align-items: flex-start; gap: 1rem;
	padding-block: 1.4rem;
	border-top: 1px solid var(--nz-line-2);
}

/* The first row of each column has the section above it, not a sibling, so
   the rule would be drawn against nothing. */
.nz-pairs__item:nth-child(1),
.nz-pairs__item:nth-child(2) { border-top: 0; padding-top: 0; }

.nz-pairs__icon {
	flex: 0 0 2.35rem;
	width: 2.35rem; height: 2.35rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--nz-r-sm);
	background: var(--nz-a-bg); color: var(--nz-a);
	font-size: 1.02rem;
}

.nz-pairs__title {
	margin: 0 0 .3rem;
	font-size: .99rem; font-weight: 700; color: var(--nz-ink);
}
.nz-pairs__text {
	margin: 0;
	font-size: .91rem; line-height: 1.62; color: var(--nz-body);
}

@media (max-width: 767.98px) {
	.nz-pairs { grid-template-columns: minmax(0, 1fr); }
	.nz-pairs__item:nth-child(2) { border-top: 1px solid var(--nz-line-2); padding-top: 1.4rem; }
}


/* Both payable tiers under a product row, each price next to the name of what
   it buys. */
.nz-prow__price { margin: 1.6rem 0 0; display: grid; gap: .55rem; }
.nz-prow__plan  { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.nz-prow__plan dt {
	flex: 0 0 5.5rem;
	font-size: .85rem; font-weight: 700; color: var(--nz-ink);
}
.nz-prow__plan dd {
	margin: 0;
	display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
	font-size: .88rem; color: var(--nz-muted);
}
.nz-prow__plan dd strong { color: var(--nz-ink); font-weight: 700; }

.nz-prow__trial {
	display: flex; align-items: center; gap: .4rem;
	margin: 1rem 0 0;
	font-size: .82rem; color: var(--nz-muted);
}

/* ==========================================================================
   THE HERO, AS ONE BANNER

   It was two columns — words on the left, a picture or a card on the right —
   through three different right-hand halves, and each time the two read as
   two unrelated pieces of design meeting in the middle.

   One axis instead. Everything centred, in one box, top to bottom: what this
   is, what you get, and the way in. Nothing beside anything.
   ========================================================================== */

.nz-hero__banner {
	max-width: 64rem;
	margin: 0 auto;
	/* Ranged left, not centred.
	   The AI section directly below it is centred, and two centred blocks in
	   a row read as one long centred block — the hero stops looking like the
	   thing that arrived first. One axis still, just not the middle one. */
	text-align: start;
	display: flex; flex-direction: column; align-items: flex-start;
}

.nz-hero__title { margin: 1.1rem 0 0; max-width: 16ch; }
.nz-hero__sub   { margin: 1.15rem 0 0; max-width: 44rem; }

/* --- the offer strip --------------------------------------------------- */

/* One pill: how long it is free, then what comes with it. A single row on a
   desktop, because it is one sentence. */
.nz-hero__offer {
	display: flex; align-items: center;
	gap: 1.5rem; flex-wrap: wrap;
	width: 100%;
	margin-top: 2.25rem;
	padding: 1rem 2rem;
	background: #fff;
	border: 1px solid var(--nz-line);
	border-radius: 999px;
	box-shadow: var(--nz-shadow-sm);
}

.nz-hero__offer-headline {
	display: inline-flex; align-items: baseline; gap: .5rem;
	flex: 0 0 auto;
}
.nz-hero__offer-big {
	font-size: 2.15rem; font-weight: 800; line-height: 1;
	color: var(--nz-brand); letter-spacing: -.02em;
}
.nz-hero__offer-small {
	font-size: 1rem; font-weight: 700; color: var(--nz-ink); white-space: nowrap;
}

.nz-hero__offer-rule {
	flex: 0 0 auto;
	width: 1px; height: 2rem;
	background: var(--nz-line-2);
}

/* The benefits. A list, so a screen reader announces how many there are — and
   therefore a list that has to be told it is not a column of discs. */
.nz-hero__offer-list {
	list-style: none;
	margin: 0; padding: 0;
	flex: 1 1 auto;
	display: flex; align-items: center; flex-wrap: wrap;
	gap: .5rem 1.4rem;
}
.nz-hero__offer-list li {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .9rem; font-weight: 600; color: var(--nz-ink);
	white-space: nowrap;
}
.nz-hero__offer-list i {
	flex: 0 0 1.1rem;
	width: 1.1rem; height: 1.1rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--nz-brand-050); color: var(--nz-brand);
	font-size: .68rem;
}

@media (max-width: 1199.98px) {
	/* Four benefits and a headline will not sit on one line here, so the
	   benefits take two rows inside the pill rather than overflowing it. */
	.nz-hero__offer-list { max-width: 30rem; }
}

@media (max-width: 767.98px) {
	/* A pill full of stacked rows is not a pill. */
	.nz-hero__offer {
		display: flex; flex-direction: column; align-items: flex-start;
		gap: 1rem;
		border-radius: var(--nz-r-lg);
		padding: 1.4rem 1.5rem;
		width: 100%;
	}
	.nz-hero__offer-rule { width: 100%; height: 1px; }
	.nz-hero__offer-list { flex-direction: column; align-items: flex-start; gap: .65rem; max-width: none; }
}


/* --- a row that reads as a PRODUCT, not as a feature -------------------
   The big type used to be the benefit — "Get paid, without the chasing" —
   with the product's own name in a small pill above it, so four rows read as
   four features of one system. Nizam sells four separate things, and a row
   about one of them leads with which one.
   --------------------------------------------------------------------- */

.nz-prow__mark {
	display: flex; align-items: center; gap: .85rem;
	margin-bottom: .6rem;
}

.nz-prow__logo {
	flex: 0 0 3rem;
	width: 3rem; height: 3rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--nz-r);
	background: var(--nz-a); color: #fff;
	font-size: 1.35rem;
	box-shadow: var(--nz-shadow-sm);
}

/* The name, at the size a name is set at. */
.nz-prow__name {
	margin: 0;
	font-size: clamp(1.9rem, 3.2vw, 2.5rem);
	font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
	color: var(--nz-ink);
}

/* The benefit, demoted to what it is: a strapline under a name. */
.nz-prow__strap {
	margin: .4rem 0 0;
	font-size: 1.15rem; font-weight: 600; line-height: 1.4;
	color: var(--nz-a);
	max-width: 30ch;
}

/* Who it is for, which is the other half of "this is a separate product". */
.nz-prow__who {
	display: flex; align-items: center; gap: .45rem;
	margin: 1.1rem 0 0;
	font-size: .86rem; color: var(--nz-muted);
}

/* --- the product's own objects, as a diagram --------------------------
   Customer → Invoice → Payment → Tax return. Real nouns out of the real
   schema, so it says what the product IS without inventing a screenshot of
   it. Chevrons drawn in CSS: an image of four English words cannot be read
   in any other language, and this one reverses itself.
   --------------------------------------------------------------------- */

.nz-prow__flow {
	list-style: none;
	margin: 1.6rem 0 0; padding: 0;
	/* One line. A chain that wraps is not read as a chain. */
	display: flex; align-items: center; flex-wrap: nowrap;
	gap: .4rem;
}

/* The <li> is NOT the pill. It is a plain flex item whose only job is to
   carry the arrow before it — an arrow drawn inside the pill sits on the
   pill's own background and eats its left padding, which is what made every
   pill look tighter on one side than the other. */
.nz-prow__flow li {
	display: inline-flex; align-items: center;
	gap: .4rem;
	min-width: 0;
}

.nz-prow__pill {
	display: inline-flex; align-items: center;
	/* Even on both sides. */
	padding: .4rem .72rem;
	border-radius: 999px;
	background: var(--nz-a-bg); color: var(--nz-a);
	font-size: .78rem; font-weight: 700; line-height: 1.3;
	white-space: nowrap;
}

/* The icon and the word it labels, one space apart and optically centred. */
.nz-prow__pill > i {
	font-size: .88rem;
	margin-inline-end: .38rem;
	opacity: .9;
}

/* The arrow, between one pill and the next, on the page rather than on a
   pill. Drawn on the item that FOLLOWS, so the first never has an arrow
   pointing at nothing. */
.nz-prow__flow li + li::before {
	content: "\F285";                 /* bi-chevron-right */
	font-family: "bootstrap-icons";
	color: var(--nz-line);
	font-size: .8rem; font-weight: 400;
	line-height: 1;
}

/* Arabic runs the other way, so the arrow does too. */
[dir="rtl"] .nz-prow__flow li + li::before { content: "\F284"; }

/* Each pill arrives after the one before it, once, so the row is read as a
   sequence rather than as five unrelated badges. */
.nz-reveal.is-in .nz-prow__flow .nz-prow__pill {
	animation: nz-step-in .32s var(--nz-ease, ease) both;
	animation-delay: calc(var(--nz-step-i, 0) * .09s + .2s);
}

@keyframes nz-step-in {
	from { opacity: 0; transform: translateY(5px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nz-reveal.is-in .nz-prow__flow .nz-prow__pill { animation: none; }
}

/* --- what ships, as checkable facts ------------------------------------ */

.nz-prow__specs {
	padding: 1.75rem;
	background: var(--nz-a-bg);
	border-radius: var(--nz-r-lg);
}

.nz-prow__specs-head {
	margin: 0 0 1.25rem;
	font-size: .75rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nz-a);
}

.nz-prow__specs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }

.nz-prow__specs li {
	display: flex; align-items: flex-start; gap: .8rem;
	font-size: .88rem; line-height: 1.55; color: var(--nz-body);
}
.nz-prow__specs i {
	flex: 0 0 1.75rem;
	width: 1.75rem; height: 1.75rem;
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: .05rem;
	border-radius: var(--nz-r-sm);
	background: #fff; color: var(--nz-a);
	font-size: .88rem;
}
.nz-prow__specs strong { display: block; color: var(--nz-ink); font-weight: 700; }

/* A solid button in whatever accent its section is wearing.
   btn-nz is brand green, which is right almost everywhere and wrong on the
   product rows: each row is in its product's own colour and the button in the
   middle of it was the only thing still green. --nz-a comes from the tone
   class on the row. */
.btn-nz-tone {
	background: var(--nz-a);
	border: 1px solid var(--nz-a);
	color: #fff;
	font-weight: 700;
}
.btn-nz-tone:hover,
.btn-nz-tone:focus-visible {
	background: color-mix(in srgb, var(--nz-a) 86%, #000);
	border-color: color-mix(in srgb, var(--nz-a) 86%, #000);
	color: #fff;
}
.btn-nz-tone:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--nz-a) 45%, transparent);
	outline-offset: 2px;
}

/* --- the hero's surface ------------------------------------------------
   The banner was type ranged left against an empty half-page, which reads as
   a page that has not finished loading. This is what fills it: two soft
   glows and the four products' own icons, scattered.

   Decoration, strictly. It is aria-hidden, holds no text, and nothing in it
   can be clicked — the grid of product links that briefly lived here was
   removed for repeating the section below, and this does not bring it back.
   What it does is draw the headline: four things, one account.
   ----------------------------------------------------------------------- */

.nz-hero { position: relative; overflow: hidden; }

.nz-hero__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* The banner sits above it. */
.nz-hero > .nz-container { position: relative; z-index: 1; }

/* --- two soft lights -------------------------------------------------- */

.nz-hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .5;
}
.nz-hero__glow--a {
	width: 34rem; height: 34rem;
	inset-block-start: -12rem;
	inset-inline-end: -8rem;
	background: radial-gradient(circle, var(--nz-brand-100) 0%, transparent 70%);
}
.nz-hero__glow--b {
	width: 26rem; height: 26rem;
	inset-block-end: -10rem;
	inset-inline-end: 18%;
	background: radial-gradient(circle, var(--nz-accent-050) 0%, transparent 70%);
}

/* The offer strip assembles rather than appearing.
   The number first, then the benefits left to right — about half a second in
   total, once, on the way in. It is the one figure on the banner and this is
   what makes the eye land on it. */
.nz-reveal.is-in .nz-hero__offer-headline {
	animation: nz-pop-in .45s var(--nz-ease, ease) both;
}
.nz-reveal.is-in .nz-hero__offer-list li {
	animation: nz-benefit-in .34s var(--nz-ease, ease) both;
	animation-delay: calc(var(--nz-benefit-i, 0) * .07s + .18s);
}

@keyframes nz-pop-in {
	0%   { opacity: 0; transform: scale(.88); }
	65%  { opacity: 1; transform: scale(1.04); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes nz-benefit-in {
	from { opacity: 0; transform: translateX(-6px); }
	to   { opacity: 1; transform: none; }
}
[dir="rtl"] .nz-reveal.is-in .nz-hero__offer-list li { animation-name: nz-benefit-in-rtl; }
@keyframes nz-benefit-in-rtl {
	from { opacity: 0; transform: translateX(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nz-reveal.is-in .nz-hero__offer-headline,
	.nz-reveal.is-in .nz-hero__offer-list li { animation: none; }
}

/* --- everything, coming together --------------------------------------
   Seventeen tools a business already runs on, on two rings around the Nizam
   mark, handing the middle circle back and forth. Ring 1 goes in and touches
   the mark; ring 2 moves up into the circle it left; ring 2 goes back out;
   ring 1 comes home. One ring moves at a time, so it reads as a handover
   rather than as two things happening at once.

   THE NUMBERS HERE WERE SEARCHED FOR, NOT REASONED OUT. A pill is a level
   rectangle: near the top of a circle it lies across the radius, near the side
   it lies along it — so what neighbours need between them depends on where on
   the ring they are, and a chord sum cannot see it. Every pill is placed as a
   rectangle at every beat and all 136 pairs are tested for intersection.

     name .70rem, icon 1.37rem, widest pill 7.73 x 1.99rem
     stations 6.75 / 11.5 / 16.25rem, evenly 4.75rem apart
     ring 2 turned 6 degrees so the two rings interleave

   Ring 2 never reaches the mark: ten pills cannot fit on a circle small enough
   to touch it. That is why the relay is a handover and not a rotation.
   See config/logos.php.
   ----------------------------------------------------------------------- */

/*
 * An ordinary centred block now, not something pinned behind a headline.
 * That is the whole reason this works: at 41rem it cannot share a line
 * with a column of type, and every earlier compromise — cut names, dropped
 * logos, rings squeezed until they overlapped — came from trying.
 *
 * Wider than it is tall, because the pills are wide and the rings are not.
 * The furthest pill sits .4rem inside this rim by construction, so the
 * overflow is a guard rather than a plan.
 */
.nz-converge {
	position: relative;
	width: 50rem; height: 44rem;
	margin-inline: auto;
	max-width: 100%;
	overflow: hidden;
}

/* --- the mark ring 1 comes in to --------------------------------------- */

.nz-converge__core {
	position: absolute;
	inset-block-start: 50%; inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	width: 7rem; height: 7rem;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: .3rem;
	border-radius: 2.1rem;
	background: #fff;
	box-shadow: var(--nz-shadow-lg);
	z-index: 3;
	animation: nz-core-settle 18s ease-in-out infinite;
}
[dir="rtl"] .nz-converge__core { transform: translate(50%, -50%); }

.nz-converge__core img { width: 2rem; height: auto; }

.nz-converge__name {
	font-size: .82rem; font-weight: 800; letter-spacing: -.01em;
	color: var(--nz-ink);
	line-height: 1;
}

/* --- the two circles, drawn faintly ------------------------------------
   Without these the relay is unreadable: pills slide about and nothing says
   they are moving BETWEEN rings rather than drifting. A dashed guide at the
   middle station and another at the outer one, and suddenly the handover is
   the obvious thing happening.

   Sized to the stations exactly — 14.25rem and 20.5rem of radius, so 28.5rem
   and 41rem across. If a station moves, these move with it.
   ----------------------------------------------------------------------- */

.nz-converge__ring {
	position: absolute;
	inset-block-start: 50%; inset-inline-start: 50%;
	border-radius: 50%;
	border: 1px dashed var(--nz-line);
	transform: translate(-50%, -50%);
	z-index: 0;
}

.nz-converge__ring--mid { width: 28.5rem; height: 28.5rem; }
.nz-converge__ring--far { width: 41rem;   height: 41rem;   opacity: .6; }

/* --- the halo the mark lets go of -------------------------------------- */

/*
 * One ring of light leaving the mark as ring 1 lands on it, on the same clock
 * as the knock. It makes the arrival land instead of merely stopping.
 *
 * Underneath everything (z-index 0) and never wider than the middle station,
 * so it cannot wash over a name.
 */
.nz-converge__pulse {
	position: absolute;
	inset-block-start: 50%; inset-inline-start: 50%;
	width: 7rem; height: 7rem;
	margin: -3.5rem 0 0 -3.5rem;
	border-radius: 50%;
	border: 2px solid var(--nz-brand);
	opacity: 0;
	z-index: 0;
	animation: nz-pulse 18s ease-out infinite;
}

@keyframes nz-pulse {
	0%,  20%  { transform: scale(1);   opacity: 0; }
	23%       { transform: scale(1);   opacity: .5; }
	40%       { transform: scale(3.9); opacity: 0; }
	100%      { transform: scale(3.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nz-converge__pulse { animation: none; opacity: 0; }
	.nz-converge__face  { animation: none; }
}

/* --- the seventeen ----------------------------------------------------- */

.nz-converge__field { position: absolute; inset: 0; z-index: 1; }

/*
 * Placed by arithmetic: --nz-i is the index within its ring and --nz-n that
 * ring's count, so the angle is (360 / n) * i. An eighteenth logo in
 * config/logos.php lands on the outer ring and needs no CSS — though it does
 * need the rectangle check re-run, since a longer name moves every floor.
 */
.nz-converge__tool {
	position: absolute;
	inset-block-start: 50%; inset-inline-start: 50%;
	width: 0; height: 0;
	--nz-a: calc(360deg / var(--nz-n, 7) * var(--nz-i, 0) - 90deg);
	z-index: 2;
	/* Accelerates away and settles in, rather than the even ease-in-out that
	   made seventeen pills look like one sliding plate. */
	animation: nz-relay-in 18s cubic-bezier(.65, 0, .2, 1) infinite;
}

/* Six degrees round, so ring 2 sits in ring 1's gaps rather than behind it. */
.nz-converge__tool--out {
	--nz-a: calc(360deg / var(--nz-n, 10) * var(--nz-i, 0) - 79.9deg);
	animation-name: nz-relay-out;
}

/*
 * The pill.
 *
 * width: max-content is not a nicety. The tool around it is 0x0, so this box
 * has no containing width to shrink-to-fit against; without it the flex line
 * resolves against nothing and the name — flex-shrink being 1 — is squeezed
 * narrower than its own text and hangs out of the white background. That was
 * "Google S|heets" with the tail in the open.
 *
 * The placement rotation is undone here so the name always sits level.
 */
.nz-converge__face {
	position: absolute;
	inset-block-start: 0; inset-inline-start: 0;
	width: max-content;
	display: inline-flex; align-items: center; gap: .28rem;
	padding: .31rem .38rem .31rem .24rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--nz-line);
	box-shadow: var(--nz-shadow-sm);
	white-space: nowrap;
	transform: translate(-50%, -50%) rotate(calc(var(--nz-a) * -1));
	/* Light only. The tightest clearance anywhere in the cycle is .30rem,
	   and a 4% scale on a 7.73rem pill would eat .31 of it — so nothing in
	   this picture is ever allowed to grow. */
	animation: nz-pill-lift 18s ease-in-out infinite;
}

/* Ring 2 is lit on its own beat, when it reaches the middle circle. */
.nz-converge__tool--out .nz-converge__face { animation-name: nz-pill-lift-out; }

@keyframes nz-pill-lift {
	0%,  14%  { box-shadow: var(--nz-shadow-sm); }
	26%, 74%  { box-shadow: 0 .55rem 1.5rem rgba(23, 105, 90, .17); }
	86%, 100% { box-shadow: var(--nz-shadow-sm); }
}

@keyframes nz-pill-lift-out {
	0%,  38%  { box-shadow: var(--nz-shadow-sm); }
	46%, 54%  { box-shadow: 0 .5rem 1.35rem rgba(15, 23, 42, .12); }
	62%, 100% { box-shadow: var(--nz-shadow-sm); }
}

.nz-converge__face img { width: 1.37rem; height: 1.37rem; display: block; flex: 0 0 auto; }

/* The full name, on one line with its icon. flex: 0 0 auto is the other half
   of the fix above — it is what stops the name being shrunk. */
.nz-converge__face > span {
	flex: 0 0 auto;
	font-size: .7rem; font-weight: 700; color: var(--nz-ink);
	line-height: 1;
}

/*
 * Ring 1 — seven pills. Home is the middle circle at 11.5rem; it goes in to
 * 6.75rem to touch the mark and waits there while ring 2 does its part.
 * Moves on beat 1 (0-22%) and beat 4 (78-100%). Still in between.
 */
@keyframes nz-relay-in {
	0%        { transform: rotate(var(--nz-a)) translateX(14.25rem); }
	22%, 78%  { transform: rotate(var(--nz-a)) translateX(8rem); }
	100%      { transform: rotate(var(--nz-a)) translateX(14.25rem); }
}

/*
 * Ring 2 — ten pills. Home is 16.25rem; it comes up to 11.5rem only once ring
 * 1 has left it, and goes back out before ring 1 returns. Moves on beat 2
 * (25-45%) and beat 3 (55-75%) — so the two rings are never both moving, and
 * never both on the middle circle.
 */
@keyframes nz-relay-out {
	0%,  25%  { transform: rotate(var(--nz-a)) translateX(20.5rem); }
	45%, 55%  { transform: rotate(var(--nz-a)) translateX(14.25rem); }
	75%, 100% { transform: rotate(var(--nz-a)) translateX(20.5rem); }
}

/*
 * The mark, taking the hit as ring 1 arrives at 22% — and nowhere else, since
 * ring 2 never comes near it. Six frames of a couple of pixels: more amplitude
 * reads as a wobble, more duration reads as a fault.
 */
@keyframes nz-core-settle {
	0%,  20%  { transform: translate(-50%, -50%) scale(1); }
	23%       { transform: translate(-50%, -50%) scale(1.06) translate(-2px, 1px); }
	25%       { transform: translate(-50%, -50%) scale(1.07) translate(2px, -2px); }
	27%       { transform: translate(-50%, -50%) scale(1.05) translate(-2px, -1px); }
	29%       { transform: translate(-50%, -50%) scale(1.03) translate(1px, 1px); }
	33%, 100% { transform: translate(-50%, -50%) scale(1); }
}
[dir="rtl"] .nz-converge__core { animation-name: nz-core-settle-rtl; }
@keyframes nz-core-settle-rtl {
	0%,  20%  { transform: translate(50%, -50%) scale(1); }
	23%       { transform: translate(50%, -50%) scale(1.06) translate(-2px, 1px); }
	25%       { transform: translate(50%, -50%) scale(1.07) translate(2px, -2px); }
	27%       { transform: translate(50%, -50%) scale(1.05) translate(-2px, -1px); }
	29%       { transform: translate(50%, -50%) scale(1.03) translate(1px, 1px); }
	33%, 100% { transform: translate(50%, -50%) scale(1); }
}

/* Decoration. Held still for anybody who has asked for less movement, each
   ring parked on its own home circle with every name showing. Nothing hidden,
   nothing cut, nothing touching. */
@media (prefers-reduced-motion: reduce) {
	.nz-converge__core { animation: none; }

	.nz-converge__tool {
		animation: none;
		transform: rotate(var(--nz-a)) translateX(14.25rem);
	}
	.nz-converge__tool--out {
		transform: rotate(var(--nz-a)) translateX(20.5rem);
	}
}


/* --- the section the picture lives in ----------------------------------
   Heading, then the rings, then what actually makes the claim true. The
   picture is a shape and the four points are the mechanism, and the points
   are not optional: there is no connector for any of those seventeen marks,
   so the words underneath have to carry the claim on their own.
   ----------------------------------------------------------------------- */

.nz-connect__stage {
	display: flex; justify-content: center;
	margin-block: 1rem 3.5rem;
}

/* --- what makes it true ------------------------------------------------ */

.nz-connect__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem 2.5rem;
	margin-block-end: 3rem;
}

/* The tone classes in tokens.css only DECLARE --nz-a and --nz-a-bg; they
   paint nothing on their own. Reading them is this rule's job, and not
   doing it is why these rendered as bare glyphs in an empty box. */
.nz-connect__icon {
	display: grid; place-items: center;
	width: 2.75rem; height: 2.75rem;
	border-radius: .9rem;
	background: var(--nz-a-bg); color: var(--nz-a);
	font-size: 1.15rem;
	margin-block-end: 1rem;
}

.nz-connect__point-title {
	font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
	color: var(--nz-ink);
	margin-block-end: .4rem;
}

.nz-connect__point-text {
	font-size: .92rem; line-height: 1.6;
	color: var(--nz-ink-soft);
	margin: 0;
}

/* --- six of the fourteen, named ---------------------------------------- */

.nz-connect__events {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .6rem 1rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid var(--nz-line);
}

.nz-connect__events-title {
	font-size: .88rem; font-weight: 700;
	color: var(--nz-ink);
	margin: 0 .5rem 0 0;
}
[dir="rtl"] .nz-connect__events-title { margin: 0 0 0 .5rem; }

.nz-connect__event-list {
	display: flex; flex-wrap: wrap; gap: .5rem;
	list-style: none; margin: 0; padding: 0;
}

/* These used to be identifiers in a <code>, forced left-to-right because
   "sale.created" is the same string in every language and mirroring it would
   have been a lie about what to type. They are sentences now, so they are
   ordinary text: they set in the page's own face and mirror with it. */
.nz-connect__event-list li {
	display: inline-block;
	padding: .38rem .85rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--nz-line);
	font-size: .84rem; font-weight: 600;
	color: var(--nz-ink-soft);
}

/*
 * Below 41rem of usable width the picture cannot be shown at its own size, and
 * scaling it down is not an option: the type inside it is already .7rem, and
 * the rectangle check clears at that size and no smaller. So it is scaled as a
 * whole — transform, not font-size — which keeps every clearance exactly in
 * proportion. transform-origin is the centre so it shrinks toward the mark.
 */
@media (max-width: 767.98px) {
	.nz-connect__stage {
		/* The scaled picture no longer occupies its old box, so the height is
		   taken back by hand rather than leaving a hole under it. */
		height: 26rem;
		align-items: center;
		overflow: hidden;
		margin-block: 0 2.5rem;
	}

	.nz-converge {
		flex: 0 0 auto;
		transform: scale(.52);
	}
}

@media (min-width: 768px) and (max-width: 1249.98px) {
	.nz-connect__stage { height: 33rem; align-items: center; overflow: hidden; }
	.nz-converge { flex: 0 0 auto; transform: scale(.72); }
}

/* The type needs the whole width below this, and a picture behind text is
   not a picture. */
@media (max-width: 1199.98px) {
	.nz-converge { display: none; }
	.nz-hero__glow { opacity: .35; }
}

/* --- the sign-in challenge ---------------------------------------------- */

/* --- picking a method ----------------------------------------------------
   A LIST, not a row of chips, and not a dropdown.

   A dropdown hides the existence of the fallback behind a click at the one
   moment somebody needs to find it — the phone is flat and the recovery codes
   are the way in. Chips were visible but too small to say anything: "App" on
   a chip does not tell that person the row below is the one they want. Each
   row carries the method's name and what it will ask for, because this is a
   decision between things nobody has thought about since they set them up. */
.nz-mfa-list {
	display: flex; flex-direction: column; gap: .5rem;
	margin-bottom: 1.25rem;
}

.nz-mfa-list__item {
	display: flex; align-items: center; gap: .85rem;
	width: 100%;
	padding: .8rem .9rem;
	border: 1px solid var(--nz-line); border-radius: var(--nz-r-sm);
	background: #fff;
	text-align: start;
	cursor: pointer;
	transition: border-color var(--nz-t-fast), background var(--nz-t-fast), box-shadow var(--nz-t-fast);
}

.nz-mfa-list__item:hover,
.nz-mfa-list__item:focus-visible {
	border-color: var(--nz-brand);
	background: var(--nz-brand-050);
}

.nz-mfa-list__text { flex: 1 1 auto; min-width: 0; }

.nz-mfa-list__title {
	display: block;
	font-size: .9rem; font-weight: 700;
	color: var(--nz-ink);
}

.nz-mfa-list__sub {
	display: block;
	margin-block-start: .1rem;
	font-size: .78rem; line-height: 1.5;
	color: var(--nz-muted);
}

/* The chevron points the way the reader is going, so it flips with the
   writing direction rather than always pointing right. */
.nz-mfa-list__go { flex: 0 0 auto; color: var(--nz-muted); }
[dir="rtl"] .nz-mfa-list__go { transform: scaleX(-1); }

/* Back to the list, centred UNDER the confirm button. It is the way out, and
   the way out comes after the way forward — above the form it was the first
   thing read on a screen whose whole job is "answer this". */
.nz-mfa-back-row { display: flex; justify-content: center; margin-block-start: .9rem; }

.nz-mfa-back {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .2rem 0;
	border: 0; background: none;
	font-size: .82rem; font-weight: 650;
	color: var(--nz-muted);
	cursor: pointer;
	transition: color var(--nz-t-fast);
}
.nz-mfa-back:hover { color: var(--nz-brand); }
[dir="rtl"] .nz-mfa-back .bi-chevron-left { transform: scaleX(-1); }

.nz-auth__note { font-size: .88rem; line-height: 1.6; color: var(--nz-body); margin: 0 0 1rem; }
.nz-auth__hint { font-size: .78rem; line-height: 1.5; color: var(--nz-muted); margin: .35rem 0 0; }

/* Six digits, read a character at a time because that is how they are typed —
   usually off a phone held in the other hand. */
.nz-code-input {
	font-size: 1.35rem; font-weight: 700;
	letter-spacing: .35em; text-indent: .35em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	direction: ltr;
}
.nz-code-input::placeholder { letter-spacing: .35em; color: var(--nz-line); font-weight: 600; }

/* A recovery code is letters and digits in two groups, so it is wider and
   upper-cased as it is typed — they are written down in capitals. */
.nz-recovery-input {
	text-transform: uppercase;
	letter-spacing: .12em;
	text-align: center;
	font-weight: 700;
	direction: ltr;
}

/* --- a modal is as tall as what is in it --------------------------------- */

/*
 * The dialog no longer carries .modal-dialog-scrollable — see makeModal() in
 * nizam.ui.js for why. That class set HEIGHT, not max-height, so every modal
 * was full-viewport tall whatever was inside it and the body stretched to
 * fill: a slab of white under the last button, and a scrollbar on a box with
 * nothing to scroll.
 *
 * What the class did usefully — keeping a tall panel inside the window and
 * scrolling the body rather than the page — is these three lines instead.
 */
.nz-modal .modal-content { max-height: calc(100vh - 3.5rem); }

/*
 * .modal-content is a column flex container and Bootstrap gives .modal-body
 * flex: 1 1 auto, so the body stretches to whatever height the content ends
 * up with. Right for a dialog with a footer pinned to the bottom, wrong for
 * every one of these. 0 1 auto lets it shrink and scroll, and never stretch.
 */
.nz-modal .modal-body {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 1.75rem;
	background: #fff;
}

/* One card, one colour. --bs-modal-bg resolves to the body background, which
   on the dashboard is tinted — so the body read as the page showing through. */
.nz-modal .modal-content { background: #fff; }

/* A refusal that belongs to the whole form, shown where the form is.
   One message for the set — never a mark against each field: telling somebody
   which of three security answers was right narrows the guessing for anybody
   who should not be there, and tells the real account holder nothing they did
   not already know. */
.nz-auth__error {
	display: block;
	margin-block-end: 1rem;
	padding: .7rem .85rem;
	border: 1px solid #F6C9C9;
	border-radius: var(--nz-r-sm);
	background: #FDECEC;
	font-size: .88rem;
	line-height: 1.5;
	color: #8A2B2B;
}
.nz-auth__error[hidden] { display: none; }