/* Zidisha Investment Co-operative Society public website: rebuilt 2026-10-29 (taste-skill v2, .taste-skill/notes.md).
 * Scoped to body.zs-site (set by sacco.sacco.website.public_page), so the member portal and the desk are untouched.
 *
 * Direction: "The printed annual". The site is laid out like the report members receive at the general meeting: a
 * tight oversized title, text held to one axis (column 6 of 12, about 42% across), solid pages of the brand's colours
 * as a two-colour print job would set them, figures and tables instead of paragraphs. The idea: the M-Pesa
 * confirmation message with Zidisha's own account format (ZS-00012#SHR) is the exhibit the reader sets up, and the
 * by-laws' numbers are the report's figures. A colour page's top edge is a rising growth curve (zidisha: make it grow).
 * Type: Schibsted Grotesk (self-hosted, OFL), five sizes. Square corners, flat fills, no shadows at rest, no rules
 * outside tables and fields. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
	src: url("/assets/sacco/fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
	src: url("/assets/sacco/fonts/SchibstedGrotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body.zs-site {
	/* the brand's colours (the logo's blue and green, the navy ink, the yellow action); each field has its ink */
	--paper: #FFFFFF;
	--paper-2: #F3F7FB;
	--paper-3: #E4ECF5;
	--ink: #052248;
	--soft: #3D4F66;
	--navy: #052248;
	--blue: #256B9C;
	--green: #3E7B35;
	--sky: #29ABE2;
	--accent: #FFC61E;
	--accent-2: #FFD24F;
	--ok: #2F6B1E;
	--line: #B9C8DA;  /* fields and tables only */
	/* type: one face, five sizes (display, head, lead, body, small) */
	--face: "Schibsted Grotesk", "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--t-name: clamp(88px, 12.5vw, 196px);
	--t-display: clamp(52px, 8.4vw, 132px);
	--t-head: clamp(34px, 4.4vw, 68px);
	--t-sub: clamp(24px, 2.2vw, 32px);
	--t-lead: clamp(20px, 1.1rem + .55vw, 26px);
	--t-body: clamp(17px, 1rem + .15vw, 19px);
	--t-small: 16px;
	/* one pair of margins, one 12-column grid, one axis (column 6), one gap between sections */
	--m: clamp(16px, 3vw, 40px);
	--gap: clamp(12px, 1.6vw, 24px);
	--tile: 8px;
	--section: clamp(64px, 10vw, 168px);
	--bar: 64px;
	--curve: clamp(48px, 7vw, 112px);
	--ease: cubic-bezier(.2, .8, .2, 1);
	/* the names the carried-over form, sign-in and registration rules use */
	--z-navy: var(--navy); --z-navy-2: #0B2F5E; --z-ink: var(--ink); --z-text: var(--ink); --z-muted: var(--soft);
	--z-blue: var(--blue); --z-blue-2: #1D5680; --z-sky: var(--sky); --z-teal: #0F766E; --z-green: var(--green);
	--z-yellow: var(--accent); --z-paper: var(--paper-2); --z-paper-2: var(--paper-3); --z-line: var(--line);
	--z-display: var(--face); --z-body: var(--face);
	--t1: var(--t-display); --t2: var(--t-head); --t3: var(--t-lead); --t4: var(--t-body); --t5: var(--t-small);
	--z-m0: var(--m); --z-m: var(--m); --z-gap: var(--gap); --z-pad: var(--section); --z-section: var(--section);
	--z-wrap: 1240px; --z-gutter: var(--m);
	margin: 0; background: var(--paper); color: var(--ink); font-family: var(--face); font-size: var(--t-body);
	line-height: 1.5; letter-spacing: -.005em; font-weight: 400; -webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.zs-site { height: auto; min-height: 100%; }  /* Frappe sets html, body {height:100%}: the sticky bar would leave with a one-screen body */
html:has(> body.zs-site) { scroll-padding-top: 88px; }
body.zs-site [hidden] { display: none !important; }
body.zs-site *, body.zs-site *::before, body.zs-site *::after { box-sizing: border-box; }
:where(body.zs-site) h1, :where(body.zs-site) h2, :where(body.zs-site) h3, :where(body.zs-site) h4 { font-family: var(--face); color: inherit; margin: 0; font-weight: 800; line-height: .95; letter-spacing: -.035em; }
:where(body.zs-site) p, :where(body.zs-site) figure, :where(body.zs-site) dl, :where(body.zs-site) dd, :where(body.zs-site) blockquote { margin: 0; }
:where(body.zs-site) a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
:where(body.zs-site) ul, :where(body.zs-site) ol { margin: 0; padding: 0; list-style: none; }
body.zs-site img, body.zs-site video, body.zs-site svg { max-width: 100%; display: block; }
body.zs-site .zi { flex: 0 0 auto; display: inline-block; }
:where(body.zs-site) :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
body.zs-site main:focus { outline: none; }
body.zs-site h1, body.zs-site h2, body.zs-site h3 { text-wrap: balance; }
body.zs-site p { text-wrap: pretty; }
body.zs-site .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.zs-site .page-content-wrapper, body.zs-site .page_content { padding: 0; margin: 0; }
body.zs-site .web-footer, body.zs-site .navbar { display: none; }
body.zs-site > main, body.zs-site > header, body.zs-site > footer, body.zs-site > div { width: 100%; }
main#main { overflow-x: clip; position: relative; z-index: 1; background: var(--paper); }
.zs-wrap { width: 100%; max-width: var(--z-wrap); margin: 0 auto; padding-inline: var(--m); }
.zs-skip { position: absolute; left: -9999px; top: .5rem; z-index: 300; background: var(--accent); color: var(--navy); padding: .7rem 1rem; font-weight: 700; }
.zs-skip:focus { left: .75rem; }

/* the 12-column grid inside the page margins; the axis is column 6 */
.zs-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); }
.zs-g > * { min-width: 0; }
.zs-axis { grid-column: 6 / 13; }
.zs-side { grid-column: 1 / 5; }
.zs-side > * + * { margin-top: 24px; }
.zs-full { grid-column: 1 / 13; }

/* type roles */
.zs-display { font-size: var(--t-display); font-weight: 800; line-height: .88; letter-spacing: -.05em; }
.zs-head { font-size: var(--t-head); font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.zs-sub { font-size: var(--t-sub); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.zs-lead { font-size: var(--t-lead); line-height: 1.35; letter-spacing: -.012em; font-weight: 400; }
.zs-small { font-size: var(--t-small); line-height: 1.45; }
.zs-soft { color: var(--soft); }
/* no tabular figures: this face's tnum also widens the full stop, comma and colon ("6 , 000") */
.zs-measure { max-width: 40ch; }
.zs-measure-wide { max-width: 62ch; }

/* buttons: one shape (square, 52px), flat fills; links underlined */
.zs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .75rem 1.5rem; border: 0; border-radius: 0;
	font: 700 var(--t-body)/1.1 var(--face); letter-spacing: -.01em; text-decoration: none !important; cursor: pointer; white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, transform .2s var(--ease); }
.zs-btn:hover { transform: translateY(-2px); }
.zs-btn:active { transform: translateY(1px); }
.zs-btn--lg { min-height: 60px; padding: .9rem 1.9rem; }
.zs-btn--yellow { background: var(--accent); color: var(--navy) !important; }
.zs-btn--yellow:hover { background: var(--accent-2); }
.zs-btn--navy, .zs-btn--solid { background: var(--navy); color: #fff !important; }
.zs-btn--navy:hover, .zs-btn--solid:hover { background: var(--blue); }
.zs-btn--light { background: #fff; color: var(--navy) !important; }
.zs-btn--light:hover { background: var(--paper-3); }
.zs-btn--quiet { background: transparent; color: var(--ink) !important; padding-inline: .6rem; }
.zs-btn--quiet:hover { color: var(--blue) !important; transform: none; }
.zs-btn--outline { background: var(--paper-3); color: var(--navy) !important; }
.zs-btn--outline:hover { background: var(--line); }
.zs-btn[disabled], .zs-btn[aria-busy="true"] { opacity: .6; cursor: progress; transform: none; }
.zs-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; color: inherit; }
.zs-link .zi { transition: transform .2s var(--ease); }
.zs-link:hover .zi { transform: translateX(4px); }

/* ── bars above the header ── */
.zs-announce, .zs-sample { position: relative; z-index: 2; }  /* above the footer the page uncovers at its end */
.zs-announce { background: var(--navy); color: #fff; font-size: var(--t-small); font-weight: 600; text-align: center; padding: .55rem var(--m); }
.zs-announce a { color: #fff; }
.zs-sample { background: var(--paper-3); color: var(--ink); font-size: var(--t-small); text-align: center; padding: .45rem var(--m); }

/* ── header: the board's top row of tiles on every page (logo tile, links tile, action tile) ── */
.zs-bar { position: sticky; top: 0; z-index: 100; background: var(--paper); padding: var(--tile) var(--m) 0; }
.zs-bar__row { display: grid; grid-template-columns: var(--bar) minmax(0, 1fr) auto; gap: var(--tile); height: var(--bar); }
.zs-bar__logo { display: grid; place-items: center; background: var(--navy); text-decoration: none; }
.zs-bar__logo img { width: 38px; height: auto; }
.zs-bar__links { display: grid; grid-template-columns: minmax(150px, .72fr) minmax(0, 1fr); align-items: center; background: var(--paper-2); padding-inline: 20px; gap: 24px; }
.zs-bar__name { font-weight: 800; font-size: 20px; letter-spacing: -.03em; text-decoration: none; white-space: nowrap; }
.zs-nav { display: flex; align-items: center; justify-content: flex-start; gap: clamp(12px, 1.6vw, 28px); }
.zs-nav > li { position: relative; }
.zs-nav__top { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink);
	font: 600 16px/1 var(--face); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; }
.zs-nav__top:hover, .zs-nav__top[aria-expanded="true"] { color: var(--blue); }
.zs-nav__top.is-current { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .45em; }
.zs-nav__chev { transition: transform .2s var(--ease); }
.zs-nav__top[aria-expanded="true"] .zs-nav__chev { transform: rotate(180deg); }
.zs-nav__signin { margin-left: auto; }
.zs-bar__action { display: flex; gap: var(--tile); }
.zs-bar__action .zs-btn { height: var(--bar); min-height: var(--bar); padding-inline: clamp(18px, 2vw, 32px); }
.zs-bar__action .zs-btn:hover { transform: none; }
.zs-menu { display: none; }
/* the services panel under the bar: a wide tile, one row per service */
.zs-mega { position: absolute; left: var(--m); right: var(--m); top: calc(var(--bar) + var(--tile) * 2); z-index: 99; background: var(--navy); color: #fff;
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 32px 28px 36px; box-shadow: 0 24px 48px rgba(5, 34, 72, .22); }
.zs-mega[hidden] { display: none !important; }
.zs-mega__intro { grid-column: 1 / 5; }
.zs-mega__intro p { font-size: var(--t-lead); line-height: 1.3; max-width: 22ch; }
.zs-mega__list { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.zs-mega__list a { display: grid; gap: .2rem; padding: 14px 0; text-decoration: none; color: #fff; }
.zs-mega__list a b { font-size: 20px; letter-spacing: -.02em; }
.zs-mega__list a span { color: rgba(255, 255, 255, .78); font-size: var(--t-small); }
.zs-mega__list a:hover b, .zs-mega__list a[aria-current] b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em; }

/* ── sections ── */
.zs-sec { padding-block: var(--section); position: relative; scroll-margin-top: 96px; }
.zs-sec--tight { padding-block: calc(var(--section) * .55); }
/* a colour page: one flat field; its top edge rises in a growth curve over the page above */
.zs-fill { background: var(--field); color: var(--field-ink, #fff); }
.zs-fill--navy { --field: var(--navy); --field-ink: #fff; --field-soft: rgba(255, 255, 255, .8); }
.zs-fill--blue { --field: var(--blue); --field-ink: #fff; --field-soft: rgba(255, 255, 255, .86); }
.zs-fill--green { --field: var(--green); --field-ink: #fff; --field-soft: rgba(255, 255, 255, .88); }
.zs-fill--sky { --field: var(--sky); --field-ink: var(--navy); --field-soft: var(--navy); }
.zs-fill--yellow { --field: var(--accent); --field-ink: var(--navy); --field-soft: var(--navy); }
.zs-fill--paper { --field: var(--paper-2); --field-ink: var(--ink); --field-soft: var(--soft); }
.zs-fill .zs-soft { color: var(--field-soft); }
.zs-curve::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--curve); background: var(--field); pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V86C32 86 62 72 100 0V100Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V86C32 86 62 72 100 0V100Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat; }
.zs-fill :focus-visible { outline-color: var(--field-ink); }
.zs-foot :focus-visible, .zs-panel :focus-visible, .zs-mega :focus-visible, .zs-board__dark :focus-visible, .zs-tiles__a :focus-visible, .zs-bar__logo:focus-visible, .zs-fill--navy :focus-visible { outline-color: var(--accent); }
.zs-fill a:not(.zs-btn) { color: inherit; }

/* a section's heading row: the heading on the axis, its proof beside it */
.zs-title { grid-column: 6 / 13; }
.zs-title--full { grid-column: 1 / 13; }
.zs-note { grid-column: 1 / 5; align-self: end; color: var(--soft); max-width: 34ch; }
.zs-fill .zs-note { color: var(--field-soft); }
.zs-stand { grid-column: 6 / 12; margin-top: 28px; font-size: var(--t-lead); line-height: 1.35; max-width: 36ch; }

/* ── the home board: the name, two photographs read as one, a dark statement and the accent statement ── */
.zs-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: var(--tile); padding: var(--tile) var(--m) 0; height: calc(100svh - var(--bar) - var(--tile) * 2); min-height: 600px; max-height: 1000px; }
.zs-board > * { min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.zs-board__name { background: var(--paper-2); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.zs-board__name h1 { font-size: var(--t-name); font-weight: 800; line-height: .82; letter-spacing: -.06em; margin-left: -.04em; }
.zs-board__name p { margin-top: 18px; font-size: var(--t-lead); line-height: 1.3; max-width: 30ch; }
.zs-board__photo img { width: 100%; height: 100%; object-fit: cover; }
.zs-board__photo--a img { object-position: 50% 30%; }
.zs-board__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tile); overflow: visible; }
.zs-board__dark, .zs-board__acc { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.zs-board__dark { background: var(--navy); color: #fff; }
.zs-board__acc { background: var(--accent); color: var(--navy); }
.zs-board__dark p, .zs-board__acc p { font-size: var(--t-lead); line-height: 1.22; letter-spacing: -.02em; font-weight: 600; max-width: 22ch; }
.zs-board__doors { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.zs-board__doors a { font-weight: 700; }
.zs-board__acc .zs-btn { align-self: flex-start; }
.zs-board__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 24px; }

/* ── an inner page's masthead: a band of pictures, then the title on the axis with its standfirst ── */
.zs-mast { padding: var(--tile) var(--m) 0; }
.zs-mast__band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--tile); height: clamp(220px, 38svh, 420px); }
.zs-mast__band > * { min-height: 0; overflow: hidden; position: relative; }
.zs-mast__band img { width: 100%; height: 100%; object-fit: cover; }
.zs-mast__band .w5 { grid-column: span 5; } .zs-mast__band .w4 { grid-column: span 4; } .zs-mast__band .w3 { grid-column: span 3; }
.zs-mast__band .w7 { grid-column: span 7; } .zs-mast__band .w8 { grid-column: span 8; } .zs-mast__band .w12 { grid-column: span 12; }
.zs-mast__tile { display: flex; align-items: flex-end; padding: 20px; font-weight: 700; font-size: var(--t-lead); line-height: 1.2; letter-spacing: -.02em; }
.zs-mast__tile--navy { background: var(--navy); color: #fff; } .zs-mast__tile--blue { background: var(--blue); color: #fff; }
.zs-mast__tile--green { background: var(--green); color: #fff; } .zs-mast__tile--yellow { background: var(--accent); color: var(--navy); }
.zs-mast__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(24px, 4vw, 56px); }
.zs-mast__head h1 { grid-column: 6 / 13; font-size: var(--t-display); font-weight: 800; line-height: .9; letter-spacing: -.05em; }
.zs-mast__head .zs-stand { grid-column: 6 / 12; }
.zs-mast__crumb { grid-column: 1 / 5; grid-row: 1; align-self: end; font-size: var(--t-small); color: var(--soft); }
.zs-mast__crumb a { text-decoration: none; font-weight: 600; }
.zs-mast__jump { grid-column: 6 / 13; display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 28px; }
.zs-mast__jump a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.zs-mast--compact .zs-mast__head { padding-top: clamp(28px, 4vw, 56px); padding-bottom: 24px; }
.zs-mast--compact .zs-mast__head h1 { font-size: var(--t-head); }

/* ── statement tiles: the slogan, the second half, a photograph; the text below on the right half ── */
.zs-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 38svh 38svh; gap: var(--tile); padding-inline: var(--m); min-height: 520px; }
.zs-tiles > * { min-height: 0; overflow: hidden; position: relative; }
.zs-tiles__a { grid-column: 1 / 9; grid-row: 1 / 3; background: var(--navy); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 24px; }
.zs-tiles__en { font-size: var(--t-lead); line-height: 1.3; max-width: 22ch; color: rgba(255, 255, 255, .82); }
.zs-board + .zs-sec { padding-top: calc(var(--section) * .4); }
.zs-tiles__a h2 { font-size: var(--t-display); line-height: .86; letter-spacing: -.05em; }
.zs-tiles__b { grid-column: 9 / 13; grid-row: 1; background: var(--accent); color: var(--navy); display: flex; align-items: flex-end; padding: 24px; }
.zs-tiles__b p { font-size: var(--t-head); font-weight: 800; line-height: .9; letter-spacing: -.045em; }
.zs-tiles__c { grid-column: 9 / 13; grid-row: 2; }
.zs-tiles__c img { width: 100%; height: 100%; object-fit: cover; }
.zs-tiles__text { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 40px 0 0; }
.zs-tiles__text > div { grid-column: 7 / 13; }
.zs-tiles__text p { font-size: var(--t-lead); line-height: 1.38; }
.zs-tiles__text p + p { margin-top: 18px; }

/* ── the services index: a statement, then one row per service, pushed right ── */
.zs-index__head { grid-column: 6 / 13; grid-row: 1; font-size: var(--t-head); line-height: .96; max-width: 16ch; }
.zs-index__fig { grid-column: 1 / 5; grid-row: 1 / 3; align-self: end; }
.zs-index__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.zs-index__list { grid-column: 6 / 13; grid-row: 2; margin-top: 40px; }
.zs-index__list > a, .zs-index__list > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 18px; align-items: baseline; padding: 22px 0; text-decoration: none; color: inherit; }
.zs-index__list b { font-size: var(--t-sub); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.zs-index__list span { color: var(--soft); font-size: var(--t-body); line-height: 1.4; }
.zs-index__list .zi { transition: transform .2s var(--ease); }
.zs-index__list a:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .18em; }
.zs-index__list a:hover .zi { transform: translateX(6px); }
.zs-fill .zs-index__list span { color: var(--field-soft); }

/* ── the pinned exhibit: a sticky field holding the M-Pesa message, the controls in a reading column ── */
.zs-pin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.zs-pin__stage { grid-column: 1 / 7; position: sticky; top: calc(var(--bar) + var(--tile)); height: calc(100svh - var(--bar) - var(--tile)); min-height: 560px;
	background: var(--navy); color: #fff; display: grid; place-items: center; padding: 32px; }
.zs-pin__col { grid-column: 8 / 13; padding: 72px var(--m) 18svh 0; }
.zs-pin__col h2 { font-size: var(--t-head); line-height: .98; max-width: 14ch; }
.zs-pin__intro { margin-top: 22px; font-size: var(--t-lead); line-height: 1.36; max-width: 34ch; }
.zs-pin__who { margin-top: 36px; }
.zs-pin__block { padding-top: 14vh; max-width: 44ch; }
.zs-pin__result { display: none; }
@media (max-width: 1023px) {
	.zs-pin__result { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 16px; padding: 10px 14px; background: #fff; color: #111A24; font-size: 16px; }
	.zs-pin__result b { font-weight: 800; overflow-wrap: anywhere; }
}
.zs-pin__block h3 { font-size: var(--t-sub); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.zs-pin__block p { margin-top: 12px; }
.zs-pin__block .zs-control { margin-top: 18px; }
.zs-pin__block.is-on h3 { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: .2em; text-decoration-color: var(--accent); }
.zs-control { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.zs-control label { font-weight: 700; font-size: var(--t-small); }
.zs-control input[type="range"] { -webkit-appearance: none; appearance: none; width: min(360px, 100%); min-height: 44px; margin: 0; background: transparent; cursor: pointer;
	--track: #7A8BA2; --thumb: var(--navy); }  /* the track is 3:1 on paper (WCAG 1.4.11) */
.zs-fill--navy .zs-control input[type="range"], .zs-fill--blue .zs-control input[type="range"], .zs-fill--green .zs-control input[type="range"] { --track: rgba(255, 255, 255, .6); --thumb: var(--accent); }
.zs-fill--yellow .zs-control input[type="range"] { --track: rgba(5, 34, 72, .6); --thumb: var(--navy); }
.zs-control input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--track); }
.zs-control input[type="range"]::-moz-range-track { height: 8px; background: var(--track); }
.zs-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -8px; border: 0; border-radius: 0; background: var(--thumb); }
.zs-control input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 0; background: var(--thumb); }
.zs-control output { font-weight: 800; font-size: 20px; }
.zs-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.zs-seg button { min-height: 44px; padding: .55rem .95rem; border: 0; background: var(--paper-3); color: var(--navy); font: 700 16px/1 var(--face); cursor: pointer; }
.zs-seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.zs-seg button:hover { background: var(--line); }
.zs-seg button[aria-pressed="true"]:hover { background: var(--blue); }
/* the phone message, at true size (an interface fragment: its own corners and lines are its product's) */
.zs-sms { width: min(440px, 100%); background: #fff; color: #111A24; border-radius: 28px; padding: 18px 18px 22px; font-family: var(--face); }
.zs-sms__top { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px solid #E3E8EE; }
.zs-sms__av { width: 40px; height: 40px; border-radius: 50%; background: #3BB54A; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: var(--t-small); }
.zs-sms__who b { display: block; font-size: var(--t-body); letter-spacing: 0; }
.zs-sms__who span { font-size: var(--t-small); color: #5B6775; }
.zs-sms__day { text-align: center; font-size: var(--t-small); color: #5B6775; margin: 14px 0 10px; }
.zs-sms__bubble { background: #EEF2F6; border-radius: 4px 20px 20px 20px; padding: 16px 18px; font-size: 18px; line-height: 1.45; letter-spacing: 0; word-break: break-word; }
.zs-sms__bubble mark { background: var(--accent); color: var(--navy); padding: 0 .15em; font-weight: 700; }
.zs-sms__time { font-size: var(--t-small); color: #5B6775; margin-top: 8px; padding-left: 4px; }
.zs-sms__steps { margin-top: 16px; display: grid; gap: 6px; font-size: var(--t-small); color: #33404E; }
.zs-sms__steps b { color: #111A24; }
.zs-pin__caption { margin-top: 18px; color: #fff; font-size: 16px; max-width: 440px; }

/* ── tiles that grow: the journey, each stage larger than the one before ── */
.zs-grow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; padding-inline: var(--m); }
.zs-grow__head { grid-column: 1 / 8; grid-row: 1; align-self: start; font-size: var(--t-head); line-height: .96; max-width: 12ch; }
.zs-grow__stage { display: grid; gap: 14px; align-self: end; grid-row: 1; }
.zs-grow__stage:nth-of-type(1) { grid-column: 1 / 3; } .zs-grow__stage:nth-of-type(2) { grid-column: 3 / 6; }
.zs-grow__stage:nth-of-type(3) { grid-column: 6 / 9; } .zs-grow__stage:nth-of-type(4) { grid-column: 9 / 13; }
.zs-grow__tile { position: relative; overflow: hidden; }
.zs-grow__stage:nth-of-type(1) .zs-grow__tile { height: 26svh; background: var(--sky); }
.zs-grow__stage:nth-of-type(2) .zs-grow__tile { height: 38svh; background: var(--blue); }
.zs-grow__stage:nth-of-type(3) .zs-grow__tile { height: 50svh; background: var(--green); }
.zs-grow__stage:nth-of-type(4) .zs-grow__tile { height: 62svh; background: var(--accent); }
.zs-grow__tile img { width: 100%; height: 100%; object-fit: cover; }
.zs-grow__tile span { position: absolute; z-index: 1; left: 12px; top: 12px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: #fff; }
.zs-grow__stage:nth-of-type(1) .zs-grow__tile span, .zs-grow__stage:nth-of-type(4) .zs-grow__tile span { color: var(--navy); }
.zs-grow__tile--photo span { padding: 2px 8px; background: var(--navy); color: #fff !important; }
.zs-grow__stage h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.zs-grow__stage p { color: var(--soft); font-size: 16px; line-height: 1.45; max-width: 30ch; }
.zs-grow__stage a { font-size: 16px; }

/* ── two giant figures compared ── */
.zs-compare__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-inline: var(--m); align-items: start; }
.zs-compare__top h2 { grid-column: 1 / 6; font-size: var(--t-head); line-height: 1; letter-spacing: -.035em; }
.zs-compare__top p { grid-column: 7 / 12; font-size: var(--t-body); max-width: 46ch; }
/* the section ends on the two figures: its bottom edge cuts them at about 60% of their height */
.zs-compare { padding-bottom: 0; }
.zs-compare__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding-inline: var(--m); margin-top: 10vh; height: clamp(200px, 21vw, 330px); overflow: hidden; }
.zs-compare__spec { display: flex; align-items: flex-start; gap: clamp(12px, 2vw, 28px); }
.zs-compare__spec small { order: 2; font-size: 16px; font-weight: 600; padding-top: 1.2em; }
.zs-compare__spec b { font-size: clamp(180px, 34vw, 560px); font-weight: 800; line-height: .8; letter-spacing: -.07em; margin-left: -.05em; }

/* ── a statement, then a table pushed right (the figures of the by-laws) ── */
.zs-facts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); }
.zs-facts h2 { grid-column: 1 / 13; font-size: var(--t-head); line-height: .98; max-width: 17ch; }
.zs-facts__name { grid-column: 8 / 13; grid-row: 2; margin-top: 96px; font-size: var(--t-small); color: var(--soft); font-weight: 600; max-width: 46ch; }
.zs-fill .zs-facts__name { color: var(--field-soft); }
.zs-facts__rows { grid-column: 8 / 13; grid-row: 3; margin-top: 8px; }
.zs-facts__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; padding-block: 13px; font-size: 16px; }
.zs-facts__row:nth-child(4n+1):not(:first-child) { margin-top: 30px; }
.zs-facts__row dt { font-weight: 600; }
.zs-facts__row dt small { display: block; font-weight: 400; color: var(--soft); font-size: var(--t-small); }
.zs-fill .zs-facts__row dt small { color: var(--field-soft); }
.zs-facts__row dd { text-align: right; font-weight: 800; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.zs-facts__row dd.is-tbc { font-weight: 600; font-size: var(--t-small); color: var(--soft); white-space: normal; max-width: 16ch; }
.zs-fill .zs-facts__row dd.is-tbc { color: var(--field-soft); }
.zs-facts__fig { grid-column: 1 / 5; grid-row: 2 / 5; align-self: end; margin-top: 96px; }
.zs-facts__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.zs-facts__foot { grid-column: 8 / 13; grid-row: 4; margin-top: 24px; font-size: var(--t-small); color: var(--soft); }
.zs-fill .zs-facts__foot { color: var(--field-soft); }

/* ── questions as reading text, two columns ── */
.zs-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); }
.zs-faq h2 { grid-column: 1 / 4; font-size: var(--t-sub); line-height: 1; letter-spacing: -.035em; }
.zs-faq__text { grid-column: 5 / 13; columns: 2; column-gap: 56px; }
.zs-faq__text p { break-inside: avoid; margin-bottom: 22px; font-size: var(--t-body); line-height: 1.55; }
.zs-faq__text p b { font-weight: 700; }
.zs-faq__more { grid-column: 5 / 13; margin-top: 8px; }

/* ── the close: three photographs, then a field ── */
.zs-close__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); height: 40svh; min-height: 260px; }
.zs-close__strip img, .zs-close__strip video { width: 100%; height: 100%; object-fit: cover; }
.zs-clip { position: relative; min-height: 0; overflow: hidden; }
.zs-clip__btn { position: absolute; left: 12px; bottom: 12px; min-height: 44px; padding: 0 18px; border: 0; background: var(--navy); color: #fff; font: 700 16px var(--face); cursor: pointer; }
.zs-clip__btn:focus-visible { outline-color: var(--accent); }
.zs-close__band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: clamp(48px, 7vw, 96px) var(--m); min-height: 44svh; align-content: start; }
.zs-close__band p.zs-close__say { grid-column: 1 / 8; font-size: var(--t-sub); line-height: 1.22; font-weight: 600; letter-spacing: -.02em; max-width: 30ch; }
.zs-close__band p.zs-close__say a { text-decoration-thickness: 4px; text-underline-offset: 6px; }
.zs-close__band .zs-close__more { grid-column: 1 / 8; margin-top: 32px; font-size: 16px; display: grid; gap: 4px; }
.zs-close__band .zs-close__act { grid-column: 9 / 13; grid-row: 1 / 3; align-self: end; justify-self: end; display: flex; flex-wrap: wrap; gap: 10px; }

/* ── text page: the title on the axis, the reading text in two columns hanging from it, notes on the left ── */
.zs-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); }
.zs-text > h2 { grid-column: 6 / 13; font-size: var(--t-head); }
.zs-text__aside { grid-column: 1 / 5; grid-row: 1 / 3; align-self: start; display: grid; gap: 14px; color: var(--soft); font-size: var(--t-small); max-width: 34ch; }
.zs-fill .zs-text__aside { color: var(--field-soft); }
.zs-text__body { grid-column: 6 / 13; margin-top: 32px; columns: 2 30ch; column-gap: 48px; }
.zs-text__body p { margin-bottom: 18px; break-inside: avoid-column; }
.zs-text__one { grid-column: 6 / 12; margin-top: 32px; }
.zs-text__one p + p { margin-top: 16px; }
.zs-text__fig { grid-column: 1 / 5; grid-row: 1 / 4; align-self: end; }
.zs-text__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ── a colour page with one large figure and what it means ── */
.zs-big { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); align-items: end; }
.zs-big__fig { grid-column: 1 / 8; font-size: clamp(96px, 15vw, 260px); font-weight: 800; line-height: .82; letter-spacing: -.065em; margin-left: -.04em; }
.zs-big__fig small { display: block; font-size: var(--t-lead); letter-spacing: -.01em; line-height: 1.2; font-weight: 600; margin: 0 0 14px .3em; }
.zs-big__text { grid-column: 8 / 13; }
.zs-big__text h2 { font-size: var(--t-head); line-height: 1; margin-bottom: 16px; }
.zs-big__text p + p { margin-top: 12px; }

/* ── a plain list of items set as a definition table (requirements, rules, documents) ── */
.zs-list { display: grid; gap: 0; }
.zs-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-block: 11px; align-items: start; }
.zs-list li > .zi { margin-top: 4px; color: var(--green); }
.zs-fill .zs-list li > .zi { color: var(--field-ink); }
.zs-list li b { display: block; }

/* columns of short blocks laid on the axis (values, member types, channels): text, never boxed */
.zs-cols { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px var(--gap); margin-top: 48px; }
.zs-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zs-cols--full { grid-column: 1 / 13; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zs-cols--full.zs-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zs-cols h3 { font-size: var(--t-sub); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 10px; }
.zs-cols p { font-size: var(--t-body); }
.zs-cols .zs-soft { font-size: 16px; }

/* a mosaic of photographs and flat tiles, gutterless */
.zs-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 17vw, 260px); }
.zs-mosaic > * { overflow: hidden; position: relative; }
.zs-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.zs-mosaic .s2 { grid-column: span 2; } .zs-mosaic .s3 { grid-column: span 3; } .zs-mosaic .r2 { grid-row: span 2; }
.zs-mosaic__tile { padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.zs-mosaic__tile b { font-size: var(--t-sub); font-weight: 800; letter-spacing: -.04em; line-height: .95; }
.zs-mosaic__tile span { font-size: 16px; line-height: 1.35; }

/* the journey timeline: stages along one line, the current one filled (loans, membership) */
.zs-track { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; margin-top: 56px; }
.zs-track li { display: grid; gap: 12px; align-content: start; }
.zs-track__bar { height: 14px; background: var(--paper-3); }
.zs-track li:nth-child(-n+1) .zs-track__bar { background: var(--accent); }
.zs-fill .zs-track__bar { background: rgba(255, 255, 255, .25); }
.zs-fill .zs-track li:nth-child(-n+1) .zs-track__bar { background: var(--accent); }
.zs-track h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.zs-track p { font-size: 16px; line-height: 1.45; }
.zs-track .zs-soft { font-size: var(--t-small); }

/* ── interface fragments at true size (data-ui): the USSD phone and the portal ── */
.zs-phone { width: min(360px, 100%); background: #1B2430; border-radius: 34px; padding: 18px 16px 22px; color: #fff; }
.zs-phone__screen { background: #DCE6D2; color: #1A2A12; border-radius: 10px; min-height: 236px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.zs-phone__screen pre, .zs-phone__text { margin: 0; white-space: pre-wrap; font: 600 15px/1.45 var(--face); letter-spacing: 0; background: none; border: 0; padding: 0; color: inherit; }
.zs-phone__reply { display: flex; gap: 6px; margin-top: auto; }
.zs-phone__reply input { flex: 1; min-width: 0; min-height: 40px !important; padding: .35rem .6rem !important; border: 1px solid #8DA07F !important; background: #F4F8EF !important; font-size: 16px !important; }
.zs-phone__reply button { min-height: 40px; padding: 0 .9rem; border: 0; background: #2E4224; color: #fff; font: 700 15px var(--face); cursor: pointer; }
.zs-phone__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.zs-phone__keys button { min-height: 44px; border: 0; border-radius: 12px; background: #2C3846; color: #fff; font: 700 18px var(--face); cursor: pointer; }
.zs-phone__keys button:hover { background: #3A4859; }
.zs-phone__keys button:active { transform: translateY(1px); }
.zs-phone__note { margin-top: 12px; font-size: var(--t-small); color: #B9C4D2; text-align: center; }
.zs-phone__again { border: 0; background: none; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; }
.zs-sms--inbox .zs-sms__bubble + .zs-sms__bubble { margin-top: 12px; }
.zs-sms--inbox .zs-sms__top { margin-bottom: 14px; }
.zs-sms__av--sacco { background: var(--navy); }

/* the share meter: shares held against the minimum */
.zs-meter { display: grid; gap: 14px; }
.zs-meter__track { height: 40px; background: rgba(255, 255, 255, .22); position: relative; }
.zs-fill--paper .zs-meter__track, .zs-meter--light .zs-meter__track { background: var(--paper-3); }
.zs-meter__fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); width: var(--pct, 0%); transition: width .35s var(--ease); }
.zs-meter__ends { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; }
.zs-meter__read { font-size: var(--t-head); font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.zs-meter__read small { display: block; font-size: var(--t-lead); letter-spacing: -.01em; font-weight: 600; margin-top: 10px; }

/* the savings columns: a total that grows month by month (simple arithmetic, no interest promised) */
.zs-cols-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 6px; height: 240px; margin-top: 24px; }
.zs-cols-chart span { background: var(--accent); height: var(--h, 10%); transition: height .35s var(--ease); position: relative; }
.zs-cols-chart span:last-child { background: var(--navy); }
.zs-fill--yellow .zs-cols-chart span { background: var(--navy); } .zs-fill--yellow .zs-cols-chart span:last-child { background: var(--blue); }
.zs-cols-chart__axis { display: flex; justify-content: space-between; font-size: var(--t-small); margin-top: 8px; }

/* downloads and notices: rows of a register */
.zs-reg { grid-column: 6 / 13; display: grid; }
.zs-reg__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding-block: 16px; align-items: baseline; }
.zs-reg__row b { font-size: 20px; letter-spacing: -.02em; font-weight: 800; }
.zs-reg__row p { color: var(--soft); font-size: 16px; }
.zs-reg__row .zs-reg__go { font-weight: 700; white-space: nowrap; }
.zs-reg__group { margin-top: 40px; font-size: var(--t-small); font-weight: 700; color: var(--soft); }
.zs-reg__group:first-child { margin-top: 0; }

/* the loan calculator and the enquiry form, restyled */
.zs-calc { display: grid; gap: 24px; background: var(--paper); color: var(--ink); padding: clamp(20px, 3vw, 40px); }
.zs-calc__head h3 { font-size: var(--t-sub); font-weight: 800; letter-spacing: -.03em; }
.zs-calc__head p { color: var(--soft); margin-top: 6px; }
.zs-calc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zs-calc__result { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; background: var(--paper-2); padding: 20px; align-items: end; }
.zs-calc__result b { display: block; font-size: var(--t-sub); font-weight: 800; letter-spacing: -.02em; }
.zs-calc__result span { font-size: var(--t-small); color: var(--soft); }
.zs-calc__main b { font-size: var(--t-head); letter-spacing: -.04em; }
.zs-calc__note { font-size: var(--t-small); color: var(--soft); }
.zs-enquiry { display: grid; gap: 16px; background: var(--paper); color: var(--ink); padding: clamp(20px, 3vw, 40px); }
.zs-enquiry h3 { font-size: var(--t-sub); font-weight: 800; letter-spacing: -.03em; }
.zs-enquiry .zs-btn { justify-self: start; }

/* contact cards: what a visitor needs to reach the office, set as large text */
.zs-reach { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); margin-top: 40px; }
.zs-reach h3 { font-size: 16px; font-weight: 700; color: var(--soft); letter-spacing: -.005em; margin-bottom: 6px; }
.zs-fill .zs-reach h3 { color: var(--field-soft); }
.zs-reach p, .zs-reach a { font-size: var(--t-sub); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.zs-reach .zs-small { font-size: var(--t-small); font-weight: 400; letter-spacing: 0; line-height: 1.45; margin-top: 6px; }

/* ── inner pages (2026-10-29) ── */
/* the close of an inner page: a picture tile and the accent tile with the next step */
.zs-next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--tile); padding: var(--section) var(--m) var(--tile); }
.zs-next__strip { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: var(--tile); height: clamp(220px, 30svh, 360px); }
.zs-next__strip img, .zs-next__strip video { width: 100%; height: 100%; object-fit: cover; }
.zs-next__pic { grid-column: 1 / 6; min-height: clamp(260px, 34vw, 480px); overflow: hidden; }
.zs-next__pic img { width: 100%; height: 100%; object-fit: cover; }
.zs-next__say { grid-column: 6 / 13; background: var(--accent); color: var(--navy); padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.zs-next__say h2 { font-size: var(--t-head); max-width: 14ch; }
.zs-next__say p { font-size: var(--t-lead); line-height: 1.3; max-width: 30ch; margin-top: 16px; }
.zs-next__acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* the governance chart: the members at the top, what they elect, who runs the day */
.zs-org { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--tile); margin-top: 56px; }
.zs-org__box { padding: clamp(18px, 2vw, 28px); display: grid; gap: 10px; align-content: start; min-height: 200px; }
.zs-org__box h3 { font-size: var(--t-sub); line-height: 1.05; }
.zs-org__box p { font-size: var(--t-body); line-height: 1.45; }
.zs-org__members { grid-column: 1 / 13; background: var(--accent); color: var(--navy); min-height: 0; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--gap); }
.zs-org__board { grid-column: 1 / 8; background: var(--paper); color: var(--ink); }
.zs-org__super { grid-column: 8 / 13; background: var(--sky); color: var(--navy); }
.zs-org__staff { grid-column: 1 / 8; background: var(--navy); color: #fff; min-height: 0; }
.zs-org__link { grid-column: 1 / 13; display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 6px 0; font-weight: 700; font-size: 16px; }
.zs-org__link span::before { content: "↓ "; }
.zs-org__reg { grid-column: 1 / 13; margin-top: 32px; font-size: var(--t-small); color: var(--field-soft); }
.zs-agree { margin-top: clamp(56px, 6vw, 88px); }
.zs-agree__list { grid-column: 6 / 13; margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
/* the loans side by side: a picture, the name, what it is for */
.zs-loans figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zs-loans h3 { margin: 20px 0 10px; }
.zs-loans .zs-list { margin-top: 12px; }
.zs-loans__bring { margin-top: 12px; font-size: 16px; }
.zs-loans__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
/* contact: a picture under the heading; downloads: a picture at the side */
.zs-reach__fig, .zs-dl-side figure { margin-top: 40px; }
.zs-reach__fig img, .zs-dl-side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.zs-dl-side .zs-lead { margin-top: 24px; }
.zs-reach { grid-column: 6 / 13; margin-top: 0; align-content: start; }
.zs-reach__social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.zs-dl-cat { margin: 48px 0 6px; }
.zs-dl-cat:first-child { margin-top: 0; }
.zs-reg__later { color: var(--soft); font-size: var(--t-small); white-space: nowrap; }
/* the officers: one column per body, each role with its name */
.zs-people dl { display: grid; margin-top: 14px; }
.zs-people dl > div { display: grid; gap: 2px; padding-block: 12px; }
.zs-people dt { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.zs-people dd { color: var(--soft); font-size: 16px; }

/* a table that is a real table (loan terms): lines allowed here */
.zs-table-wrap { grid-column: 1 / 13; overflow-x: auto; margin-top: 48px; }
.zs-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 720px; }
.zs-table th, .zs-table td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); }
.zs-table thead th { font-size: var(--t-small); color: var(--soft); font-weight: 700; }
.zs-table tbody th { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.zs-table .is-tbc { color: var(--soft); }

/* two things side by side, row by row (shares and deposits) */
.zs-vs { grid-column: 1 / 13; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4.5fr) minmax(0, 4.5fr); column-gap: var(--gap); margin-top: 48px; }
.zs-vs__r { display: contents; }
.zs-vs__r > * { padding: 16px 0; }
.zs-vs__h { font-size: var(--t-sub); font-weight: 800; letter-spacing: -.03em; padding-bottom: 20px; }
.zs-vs__k { font-weight: 700; color: var(--field-soft, var(--soft)); }
.zs-vs__a, .zs-vs__b { font-size: var(--t-body); }
.zs-vs__a b, .zs-vs__b b { font-weight: 800; }

/* two ways to do something, as two tiles */
.zs-ways { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile); margin-top: 56px; }
.zs-ways > div { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.zs-ways h3 { font-size: var(--t-sub); }
.zs-ways p { max-width: 40ch; }
.zs-ways .zs-btn { margin-top: auto; }
.zs-ways__a { background: var(--accent); color: var(--navy); }
.zs-ways__b { background: var(--paper); color: var(--ink); }

/* a notice in full: the date at the side, the title and the text on the axis */
.zs-notice { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); scroll-margin-top: 96px; }
.zs-notice + .zs-notice { margin-top: clamp(56px, 7vw, 96px); }
.zs-notice__when { grid-column: 1 / 5; font-weight: 700; display: grid; gap: 4px; align-content: start; }
.zs-notice__when span { color: var(--soft); font-weight: 400; font-size: var(--t-small); }
.zs-notice__body { grid-column: 6 / 13; }
.zs-notice__body h2 { font-size: var(--t-sub); margin-bottom: 16px; }
.zs-notice__body p + p { margin-top: 12px; }
.zs-notice.is-important .zs-notice__when b { background: var(--accent); color: var(--navy); padding: 2px 8px; justify-self: start; }

/* the USSD demonstration: the phone at the side, what each screen does on the axis */
.zs-ussd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); align-items: start; }
.zs-ussd__phone { grid-column: 1 / 6; position: sticky; top: calc(var(--bar) + 40px); }
.zs-ussd__phone .zs-phone { width: min(380px, 100%); }
.zs-ussd__phone .zs-phone__screen { min-height: 300px; }
.zs-ussd__text { grid-column: 7 / 13; }
.zs-ussd__text h2 { font-size: var(--t-head); }
.zs-ussd__text > p { font-size: var(--t-lead); line-height: 1.35; margin-top: 24px; max-width: 34ch; }
.zs-ussd__rules { margin-top: 40px; display: grid; gap: 22px; }
.zs-ussd__rules h3 { font-size: 20px; margin-bottom: 4px; }

/* the endings of the M-Pesa account: what each one pays */
.zs-ends { display: grid; }
.zs-ends__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; padding-block: 14px; align-items: baseline; }
.zs-ends__row b { font-size: var(--t-sub); font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.zs-ends__row b mark { background: var(--accent); color: var(--navy); padding: 0 .12em; }
.zs-ends__row span { font-size: var(--t-body); }

/* ── footer: columns above, the wordmark below ── */
.zs-foot { position: relative; z-index: 0; background: var(--navy); color: #fff; display: grid; grid-template-rows: auto clamp(64px, 12vh, 160px) auto; padding: 40px var(--m) 20px; }
/* the page slides away to uncover the footer only when the footer fits the screen (site.js sets is-reveal) */
.zs-foot.is-reveal { position: sticky; bottom: 0; }
.zs-foot__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gap); }
.zs-foot__col { grid-column: span 3; display: grid; gap: 6px; align-content: start; font-size: 16px; }
.zs-foot__col h2 { font-size: 16px; font-weight: 700; letter-spacing: -.005em; line-height: 1.3; margin-bottom: 4px; }
.zs-foot__col p, .zs-foot__col li { color: rgba(255, 255, 255, .8); }
.zs-foot__col a { color: #fff; text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.zs-foot__col a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.zs-foot__mark { align-self: end; padding-top: 48px; }
.zs-foot__mark svg { width: 100%; height: auto; fill: #fff; }
.zs-foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--t-small); color: rgba(255, 255, 255, .78); padding-top: 18px; }
.zs-foot__legal a { color: #fff; }
.zs-foot__legal p { max-width: 64ch; }
.zs-foot__credits { margin-top: 10px; font-size: var(--t-small); color: rgba(255, 255, 255, .78); }
.zs-foot__credits summary { cursor: pointer; font-size: var(--t-small); color: #fff; min-height: 32px; display: inline-flex; align-items: center; }
.zs-foot__credits ul { margin-top: 8px; columns: 2 34ch; column-gap: 32px; }
.zs-foot__credits li { break-inside: avoid; margin-bottom: 4px; }
.zs-foot__credits a { color: #fff; }

/* WhatsApp, when the office has a number */
.zs-wa { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 1.1rem; background: #25D366; color: #08381A; font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px rgba(5, 34, 72, .25); }

/* ── motion: entrances once a section enters (site.js adds .zs-motion when it runs: nothing stays hidden without it) ── */
@media (prefers-reduced-motion: no-preference) {
	.zs-motion [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
	.zs-motion [data-rise].is-in { opacity: 1; transform: none; }
	.zs-motion .zs-shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
	.zs-motion .zs-shutter img { transform: scale(1.12); transition: transform 1.4s var(--ease); }
	.zs-motion .zs-shutter.is-in { clip-path: inset(0 0 0 0); }
	.zs-motion .zs-shutter.is-in img { transform: none; }
	.zs-drift img { animation: zs-drift 24s ease-in-out infinite alternate; }
	@keyframes zs-drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.1) translateX(-2.5%); } }
	.zs-grow__tile img, .zs-mosaic img, .zs-close__strip img { transition: transform .8s var(--ease); }
	.zs-grow__stage:hover .zs-grow__tile img, .zs-mosaic > *:hover img, .zs-close__strip img:hover { transform: scale(1.04); }
}

/* ── laptops: the bar keeps every link; tablets and phones fold it into a panel ── */
@media (max-width: 1180px) {
	.zs-bar__links { grid-template-columns: auto minmax(0, 1fr); }
	.zs-nav { justify-content: flex-end; }
}
@media (max-width: 1023px) {
	:root body.zs-site { --bar: 56px; }
	.zs-bar__row { grid-template-columns: var(--bar) minmax(0, 1fr) auto; }
	.zs-bar__links { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 16px; }
	.zs-bar__links > nav { display: none; }
	.zs-bar__action .zs-btn--quiet { display: none; }
	.zs-menu { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: 0 .6rem; border: 0; background: none; color: var(--ink); font: 700 16px var(--face); cursor: pointer; }
	.zs-menu .zs-menu__close { display: none; }
	.zs-menu[aria-expanded="true"] .zs-menu__open { display: none; }
	.zs-menu[aria-expanded="true"] .zs-menu__close { display: inline; }
	.zs-panel { position: fixed; inset: calc(var(--bar) + var(--tile)) 0 0 0; z-index: 98; background: var(--navy); color: #fff; overflow-y: auto; padding: 24px var(--m) 40px; }
	.zs-panel[hidden] { display: none !important; }
	.zs-panel a { color: #fff; text-decoration: none; display: flex; min-height: 48px; align-items: center; font-size: var(--t-sub); font-weight: 700; letter-spacing: -.02em; }
	.zs-panel a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .25em; }
	.zs-panel__group { margin-top: 18px; font-size: var(--t-small); color: rgba(255, 255, 255, .78); }
	.zs-panel__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
	.zs-panel__acts .zs-btn { width: 100%; font-size: var(--t-body); }
	.zs-mega { display: none !important; }
}
@media (min-width: 1024px) { .zs-panel { display: none !important; } }

@media (max-width: 1023px) {
	.zs-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; max-height: none; min-height: 0; gap: 6px; }
	.zs-board__name { min-height: 34svh; }
	.zs-board__name h1 { font-size: 22vw; }
	.zs-board__photo--a { aspect-ratio: 4 / 3; }
	.zs-board__photo--b { display: none; }
	.zs-board__pair { gap: 6px; }
	.zs-board__dark, .zs-board__acc { min-height: 46vw; padding: 18px; }
	.zs-board__dark p, .zs-board__acc p { font-size: 20px; }
	.zs-mast__band { grid-template-columns: repeat(6, minmax(0, 1fr)); height: 30svh; }
	.zs-mast__band .w5, .zs-mast__band .w4, .zs-mast__band .w7, .zs-mast__band .w8 { grid-column: span 3; }
	.zs-mast__band .w3 { display: none; }
	.zs-mast__band .w12 { grid-column: span 6; }
	.zs-mast__head h1, .zs-mast__head .zs-stand, .zs-mast__jump { grid-column: 1 / 13; }
	.zs-mast__crumb { grid-row: auto; margin-bottom: 18px; }
	.zs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(30svh, auto) auto; gap: 6px; min-height: 0; }
	.zs-tiles__a { grid-column: 1 / 3; grid-row: 1; }
	.zs-tiles__a h2 { font-size: 11vw; }
	.zs-tiles__b, .zs-tiles__c { grid-row: 2; aspect-ratio: 1; }
	.zs-tiles__b { grid-column: 1; } .zs-tiles__c { grid-column: 2; }
	.zs-tiles__b p { font-size: 10vw; }
	.zs-tiles__text { grid-column: 1 / 3; }
	.zs-tiles__text > div { grid-column: 1 / 13; }
	.zs-index__head, .zs-index__list, .zs-index__fig { grid-column: 1 / 13; grid-row: auto; }
	.zs-index__fig { margin-top: 40px; }
	.zs-index__fig img { aspect-ratio: 3 / 2; }
	.zs-index__list { margin-top: 40px; }
	.zs-pin { display: block; }
	.zs-pin__stage { position: static; height: auto; min-height: 0; padding: 24px var(--m); }  /* on a phone the message leads, the controls follow */
	.zs-sms { width: min(380px, 100%); padding: 12px 14px 14px; }
	.zs-sms__steps, .zs-pin__caption { display: none; }
	.zs-pin__col { padding: 40px var(--m) 40px; }
	.zs-pin__block { padding-top: 48px; }
	.zs-grow { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.zs-grow__head, .zs-grow__stage { grid-column: 1 / -1 !important; grid-row: auto; }
	.zs-grow__stage:nth-of-type(1) .zs-grow__tile { height: 34vw; } .zs-grow__stage:nth-of-type(2) .zs-grow__tile { height: 46vw; }
	.zs-grow__stage:nth-of-type(3) .zs-grow__tile { height: 56vw; } .zs-grow__stage:nth-of-type(4) .zs-grow__tile { height: 66vw; }
	.zs-compare__top h2, .zs-compare__top p { grid-column: 1 / 13; }
	.zs-compare__top p { margin-top: 16px; }
	.zs-compare__specs { grid-template-columns: minmax(0, 1fr); height: auto; margin-top: 40px; gap: 0; }
	.zs-compare__spec { height: 30svh; overflow: hidden; padding: 14px var(--m) 0; }
	.zs-compare__spec + .zs-compare__spec { background: var(--navy); color: #fff; }
	.zs-compare__spec b { font-size: 62vw; }
	.zs-compare__specs { padding-inline: 0; }
	.zs-facts__name { grid-column: 1 / 13; grid-row: auto; margin-top: 40px; }
	.zs-facts__rows, .zs-facts__foot { grid-column: 1 / 13; grid-row: auto; margin-top: 12px; }
	.zs-facts__foot { margin-top: 18px; }
	.zs-facts__fig { grid-column: 1 / 13; grid-row: auto; margin-top: 32px; }
	.zs-facts__fig img, .zs-text__fig img, .zs-reach__fig img, .zs-dl-side img { aspect-ratio: 16 / 9; }
	.zs-faq h2, .zs-faq__text, .zs-faq__more { grid-column: 1 / 13; }
	.zs-faq__text { columns: 1; margin-top: 24px; }
	.zs-close__strip { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
	.zs-close__strip > :first-child { grid-column: 1 / 3; aspect-ratio: 4 / 3; }
	.zs-close__strip > :not(:first-child) { aspect-ratio: 1; }
	.zs-close__band p.zs-close__say, .zs-close__band .zs-close__more, .zs-close__band .zs-close__act { grid-column: 1 / 13; grid-row: auto; justify-self: start; }
	.zs-close__band .zs-close__act { margin-top: 28px; }
	.zs-close__band p.zs-close__say { font-size: var(--t-sub); }
	.zs-text > h2, .zs-text__aside, .zs-text__body, .zs-text__one, .zs-text__fig { grid-column: 1 / 13; grid-row: auto; }
	.zs-text__aside { margin-top: 20px; }
	.zs-text__body { columns: 1; }
	.zs-text__fig { margin-top: 32px; }
	.zs-big__fig, .zs-big__text { grid-column: 1 / 13; }
	.zs-big__text { margin-top: 32px; }
	.zs-cols, .zs-cols--full, .zs-reg, .zs-reach, .zs-agree__list { grid-column: 1 / 13; }
	.zs-cols--3, .zs-cols--full, .zs-cols--full.zs-cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zs-title, .zs-note, .zs-stand, .zs-axis, .zs-side { grid-column: 1 / 13; }
	.zs-side + .zs-axis { margin-top: 32px; }
	.zs-board__acc .zs-btn { white-space: normal; text-align: left; padding-inline: 14px; min-height: 48px; }
	.zs-note { margin-top: 16px; }
	.zs-track { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.zs-track li { grid-template-columns: 14px minmax(0, 1fr); column-gap: 16px; }
	.zs-track__bar { height: auto; grid-row: 1 / 4; }
	.zs-foot__col { grid-column: span 6; }
	.zs-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
	.zs-mosaic .s3, .zs-mosaic .s2 { grid-column: span 2; }
	.zs-mosaic .r2 { grid-row: span 1; }
	.zs-calc__fields, .zs-calc__result { grid-template-columns: minmax(0, 1fr); }
	.zs-mega__intro, .zs-mega__list { grid-column: 1 / 13; }
}
@media (max-width: 599px) {
	.zs-cols, .zs-cols--3, .zs-cols--full, .zs-cols--full.zs-cols--3, .zs-reach, .zs-agree__list { grid-template-columns: minmax(0, 1fr); }
	.zs-index__list > a, .zs-index__list > div { grid-template-columns: minmax(0, 1fr) auto; }
	.zs-index__list > * span { grid-column: 1 / 2; grid-row: 2; }
	.zs-index__list a .zi { grid-row: 1; grid-column: 2; }
	.zs-reg__row { grid-template-columns: minmax(0, 1fr); }
	.zs-foot__col { grid-column: span 12; }
	.zs-foot__credits ul { columns: 1; }
	.zs-board__name h1 { font-size: 24vw; }
	.zs-compare__spec b { font-size: 70vw; }
	.zs-bar__name { font-size: 18px; }
}

/* the inner pages on tablets and phones */
@media (max-width: 1023px) {
	.zs-next__pic, .zs-next__say { grid-column: 1 / 13; }
	.zs-next__pic { min-height: 0; aspect-ratio: 16 / 9; }
	.zs-org__members { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
	.zs-org__board, .zs-org__super, .zs-org__staff { grid-column: 1 / 13; min-height: 0; }
	.zs-vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.zs-vs__k { grid-column: 1 / 3; padding-bottom: 0; }
	.zs-vs__corner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.zs-ways { grid-template-columns: minmax(0, 1fr); }
	.zs-notice__when, .zs-notice__body { grid-column: 1 / 13; }
	.zs-notice__body { margin-top: 12px; }
	.zs-ussd__phone, .zs-ussd__text { grid-column: 1 / 13; position: static; }
	.zs-ussd__text { margin-top: 40px; }
}
@media (max-width: 599px) {
	.zs-ends__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.zs-next__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
	.zs-next__strip > * { aspect-ratio: 1; }
	.zs-next__strip .zs-clip { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16 / 9; }

	.zs-facts__row { grid-template-columns: minmax(0, 1fr); }
	.zs-facts__row dd { text-align: left; white-space: normal; margin-top: 2px; }
	.zs-table { min-width: 0; }
	.zs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.zs-table tr { display: grid; padding-block: 12px; border-bottom: 1px solid var(--line); }
	.zs-table th, .zs-table td { border: 0; padding: 4px 0; }
	.zs-table td::before { content: attr(data-label) ": "; font-weight: 700; }
	.zs-vs { grid-template-columns: minmax(0, 1fr); }
	.zs-vs__k { grid-column: auto; }
	.zs-vs__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.zs-vs__r > .zs-vs__a, .zs-vs__r > .zs-vs__b { padding-block: 4px; }
	.zs-vs__a::before, .zs-vs__b::before { content: attr(data-h) ": "; font-weight: 800; }
}


/* tablets: the journey two by two, each step still taller than the last */
@media (min-width: 600px) and (max-width: 1023px) {
	.zs-grow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 12px; }
	.zs-grow__stage { grid-column: auto !important; }
	.zs-grow__stage:nth-of-type(1) .zs-grow__tile { height: 24vw; } .zs-grow__stage:nth-of-type(2) .zs-grow__tile { height: 30vw; }
	.zs-grow__stage:nth-of-type(3) .zs-grow__tile { height: 36vw; } .zs-grow__stage:nth-of-type(4) .zs-grow__tile { height: 42vw; }
}
/* ── carried over unchanged from the 17 Oct build, on the new tokens: fields and messages, the sign-in, password and
   registration pages (/join), terms and privacy (rules picked by class; their phone rules with them) ── */

/* fields everywhere (enquiry, calculator, registration, password pages, sign-in); the sign-in panel's logo and bars */
:where(body.zs-site) label { font-weight: 700; font-size: var(--t-small); color: inherit; }
body.zs-site input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="range"]), body.zs-site textarea, body.zs-site select {
	width: 100%; min-height: 52px; padding: .7rem .9rem; border: 2px solid var(--line); border-radius: 0; background: #fff; color: var(--ink);
	font: 500 var(--t-body) var(--face); box-shadow: none; transition: border-color .15s ease; }
body.zs-site textarea { min-height: 120px; resize: vertical; }
body.zs-site input:focus, body.zs-site textarea:focus, body.zs-site select:focus { outline: 3px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
body.zs-site input[aria-invalid="true"], body.zs-site select[aria-invalid="true"], body.zs-site .invalid input { border-color: #C4161C; }
body.zs-site ::placeholder { color: #66717F; opacity: 1; }  /* 4.9:1 on white; the browser's grey was 4.2:1 */
#j-msg:not(:empty) { margin-top: 1.2rem; }
.zs-logo { display: inline-flex; align-items: center; text-decoration: none !important; flex: 0 0 auto; }
.zs-logo img { width: auto; height: 46px; }
.zbars { --gap: clamp(4px, .6vw, 14px); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); align-items: end; width: 100%; height: 100%; }
.zbar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.zbar__col { height: calc(22% + var(--i) * 15%); background: var(--blue); }
.zbar:nth-child(2) .zbar__col { background: var(--sky); }
.zbar:nth-child(3) .zbar__col { background: var(--green); }
.zbar:nth-child(4) .zbar__col { background: var(--paper-3); }
.zbar:nth-child(5) .zbar__col, .zbar:nth-child(6) .zbar__col { background: var(--accent); }
.zbars--panel { height: 120px; }
.zbars--panel .zbar__label, .zbars--mini .zbar__label { display: none; }

body.zs-site .page-content-wrapper, body.zs-site .page_content { padding: 0; margin: 0; }
body.zs-site > .zs-auth, body.zs-site > main, body.zs-site > header, body.zs-site > footer, body.zs-site > div { width: 100%; }
.zs-plus { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.zs-plus::before, .zs-plus::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor; transition: transform .25s var(--ease); }
.zs-plus::after { transform: rotate(90deg); }
.zs-faq details[open] .zs-plus::after { transform: rotate(0deg); }
.zs-field { display: grid; gap: .4rem; align-content: start; }
.zs-field__err { color: #B3141A; font-size: var(--t5); font-weight: 600; }
.zs-form__note { font-size: var(--t5); color: var(--z-muted); }
.zs-form__status:empty { display: none; }
.zs-msg { padding: .9rem 1rem; font-size: var(--t5); line-height: 1.5; }
.zs-msg--err { background: #FDE7E6; color: #8A1116; }
.zs-msg--info { background: #E2EEFA; color: #0A3D8F; }
.zs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.zs-feelist { display: grid; gap: .7rem; }
.zs-feelist li { display: grid; gap: .1rem; }
.zs-feelist li span { font-size: var(--t5); font-weight: 600; }
.zs-numlist { counter-reset: n; display: grid; gap: 1.1rem; }
.zs-numlist li { counter-increment: n; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .8rem; }
.zs-numlist li::before { content: counter(n); grid-row: 1 / span 2; font-family: var(--z-display); font-size: var(--t3); font-weight: 800; line-height: 1.1; color: var(--z-blue); }
.zs-tools__pay .zs-numlist li::before { color: var(--z-yellow); }
.zs-numlist b { display: block; }
.zs-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }
.zs-section { padding-block: var(--z-section); scroll-margin-top: 80px; }
.zs-h2 { font-size: var(--t2); font-weight: 700; line-height: 1.08; letter-spacing: -.022em; margin-bottom: 1.2rem !important; }
.zs-h3 { font-size: var(--t3); font-weight: 700; margin: 2.4rem 0 1rem !important; }
.zs-muted { color: var(--z-muted); }
.zs-ticks { display: grid; gap: .6rem; }
.zs-ticks li { display: flex; gap: .6rem; align-items: flex-start; }
.zs-ticks .zi { color: var(--z-teal); margin-top: .2rem; }
body.zs-authpage { background: #fff; }
.zs-auth { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); min-height: 100vh; width: 100%; }
.zs-auth__side { background: var(--z-navy); color: #fff; display: flex; flex-direction: column; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.6rem, 3.5vw, 3.4rem) 0; position: relative; overflow: hidden; }
.zs-auth__side .zs-logo { padding: 0; align-self: flex-start; }
.zs-auth__side .zs-logo img { height: 48px; }
body.zs-site .zs-auth__side h1 { color: #fff; font-size: var(--t2); font-weight: 700; line-height: 1.08; letter-spacing: -.022em; margin-top: clamp(2.5rem, 7vh, 5rem); max-width: 12ch; overflow-wrap: break-word; }
.zs-auth__side > p { margin-top: 1.1rem; max-width: 28rem; }
.zs-auth__list { margin-top: 2rem; display: grid; gap: 1rem; max-width: 28rem; }
.zs-auth__list li { display: flex; gap: .8rem; align-items: flex-start; }
.zs-auth__list .zi { color: var(--z-yellow); margin-top: .2rem; }
.zs-auth__list b { display: block; }
.zs-auth__list span { display: block; font-size: var(--t5); }
.zs-auth__num { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; background: var(--z-navy-2); color: var(--z-yellow); font-weight: 800; font-family: var(--z-display); font-size: var(--t5); line-height: 1; }
.zs-auth__bars { margin-top: auto; padding-top: 2.5rem; }
.zs-auth__bars .zbars { height: clamp(110px, 18vh, 170px); }
.zs-auth__main { display: flex; flex-direction: column; padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.2rem, 5vw, 4rem) 2rem; }
.zs-auth__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: var(--t5); }
.zs-auth__top a { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; min-width: 44px; }
.zs-auth__form { width: 100%; max-width: 460px; margin: auto; padding-block: 2.5rem; }
.zs-auth__form > h2, .zs-auth__form form > h2, .zs-auth__form .zs-check-email > h2, body.zs-authpage .login-content > h2 { font-size: var(--t2); font-weight: 700; line-height: 1.08; letter-spacing: -.022em; }
.zs-auth__sub { margin-top: .7rem; color: var(--z-muted); }
.zs-auth__fields { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.zs-auth__actions { display: grid; gap: .75rem; margin-top: 1.6rem; }
.zs-auth__actions .zs-btn { width: 100%; }
.zs-auth__alt { margin-top: 1.6rem; padding: 1.1rem; background: var(--z-paper); font-size: var(--t5); text-align: center; }
.zs-auth__alt a { font-weight: 700; }
.zs-auth__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; font-size: var(--t5); color: var(--z-muted); }
.zs-check-email .zs-badge { display: inline-grid; place-items: center; width: 64px; height: 64px; background: var(--z-yellow); color: var(--z-navy); margin-bottom: 1.2rem; }
.zs-check-email ol { margin-top: 1rem; display: grid; gap: .5rem; padding-left: 1.2rem; list-style: decimal; }
.zs-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0; }
.zs-choice legend { font-weight: 700; font-size: var(--t5); margin-bottom: .45rem; padding: 0; }
.zs-choice label { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .9rem .85rem; background: var(--z-paper); cursor: pointer; font-weight: 700; }
.zs-choice label .zi { color: var(--z-blue); }
.zs-choice label small { font-weight: 500; color: var(--z-muted); font-size: var(--t5); line-height: 1.35; }
.zs-choice input { position: absolute; opacity: 0; pointer-events: none; }
.zs-choice label:has(input:checked) { background: var(--z-navy); color: #fff; }
.zs-choice label:has(input:checked) .zi, .zs-choice label:has(input:checked) small { color: #fff; }
.zs-choice label:has(input:focus-visible) { outline: 3px solid var(--z-blue); outline-offset: 2px; }
body.zs-authpage .login-content.page-card { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: none; width: auto; margin: 0; }
body.zs-authpage .page-card-head { display: none; }
body.zs-authpage .page-card-body { display: grid; gap: 1.1rem; padding: 0; }
body.zs-authpage .form-group { margin: 0; display: grid; gap: .4rem; }
body.zs-authpage .form-group label { margin: 0; }
body.zs-authpage .email-field, body.zs-authpage .password-field { position: relative; width: 100%; }
body.zs-authpage .password-field .toggle-password { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--z-muted); width: 18px; height: 18px; }
body.zs-authpage .field-error { color: #B3141A; font-size: var(--t5); margin: 0; }
body.zs-authpage .field-error:empty { display: none; }
body.zs-authpage .page-card-actions { display: grid; gap: .75rem; margin-top: 1.6rem; }
body.zs-authpage .page-card-actions .es-button, body.zs-authpage #verify_token { width: 100%; min-height: 56px; border-radius: 0; border: 0; background: var(--z-navy); color: #fff;
	font: 700 var(--t4) var(--z-body); cursor: pointer; }
body.zs-authpage .page-card-actions .es-button:hover, body.zs-authpage #verify_token:hover { background: var(--z-blue); }
body.zs-authpage .page-card-actions .es-button:disabled { background: #C7D3E3; cursor: not-allowed; }
body.zs-authpage .page-card-actions .btn-login-option { background: var(--z-paper); color: var(--z-navy); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
body.zs-authpage .login-error-banner, body.zs-authpage .login-success-banner { padding: .8rem .9rem; font-size: var(--t5); }
body.zs-authpage .login-error-banner { background: #FDE7E6; color: #8A1116; }
body.zs-authpage .login-success-banner { background: #EAF5D6; color: #2F4700; }
body.zs-authpage .hidden, body.zs-authpage .hide { display: none !important; }
body.zs-authpage #twofactor_div .page-card-head { display: block; padding: 0; }
body.zs-authpage #twofactor_div .indicator { font-family: var(--z-display); font-size: var(--t3); font-weight: 700; display: block; margin-bottom: .6rem; }
body.zs-authpage #twofactor_div .indicator::before { display: none; }
body.zs-authpage #otp_div { color: var(--z-muted); font-size: var(--t5); margin-bottom: 1rem; }
body.zs-authpage #login_token { margin-bottom: 1rem; }
body.zs-authpage .zs-forgot-link { display: flex; align-items: center; width: fit-content; min-height: 44px; margin: -.8rem 0 -.5rem auto; font-size: var(--t5); font-weight: 700; }
body.zs-authpage .page-card-actions .es-button:focus-visible { outline: 3px solid var(--z-blue); outline-offset: 3px; }
.zs-auth__side :focus-visible { outline-color: var(--z-yellow); }
body.zs-authpage section.for-forgot, body.zs-authpage section.for-signup, body.zs-authpage section.for-email-login,
body.zs-authpage section.for-login-with-email-link { display: none; }
body.zs-authpage .es-alert svg { display: none; }
body.zs-authpage .es-alert { border-radius: 0; }
.zs-signin-hint { display: none; font-size: var(--t5); }
.zs-signin-hint a { font-weight: 700; }
body.zs-authpage .login-error-banner:not(.hidden) + .zs-signin-hint { display: block; }
body.zs-authpage .zs-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: transparent; color: var(--z-muted);
	cursor: pointer; display: inline-grid; place-items: center; }
body.zs-authpage .zs-eye[aria-pressed="true"] { color: var(--z-blue); }
body.zs-authpage .password-field input { padding-right: 3rem; }
.zs-section--form { background: var(--z-paper); padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.zs-join2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; }
.zs-formcard { background: #fff; padding: clamp(1.3rem, 3.5vw, 2.6rem); scroll-margin-top: 130px; }
.zs-wiz .zs-auth__alt { margin-top: 1.2rem; }
.zs-wiz__steps { display: flex; gap: 4px; margin-bottom: .6rem; }
.zs-wiz__steps li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .4rem; font-size: var(--t5); color: var(--z-muted); }
.zs-wiz__steps li span { display: block; height: 8px; background: var(--z-paper-2); font-size: 0; }
.zs-wiz__steps li.is-done span { background: var(--z-teal); }
.zs-wiz__steps li[aria-current] span { background: var(--z-blue); }
.zs-wiz__steps li b { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.zs-wiz__steps li[aria-current] b { color: var(--z-ink); font-weight: 700; }
.zs-wiz__count { font-size: var(--t5); color: var(--z-muted); margin-bottom: 1.4rem; }
.zs-wiz__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.zs-wiz__title { font-family: var(--z-display); font-weight: 700; font-size: var(--t2); line-height: 1; letter-spacing: -.022em; color: var(--z-ink); padding: 0; margin-bottom: 1.2rem; }
.zs-wiz__title:focus { outline: none; }
.zs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.zs-grid__item { display: contents; }
.zs-grid__item[hidden] { display: none !important; }
.zs-subhead { margin: 1.8rem 0 .8rem; font-weight: 700; padding-top: 1.2rem; border-top: 4px solid var(--z-paper); }
.zs-hint { display: block; font-size: var(--t5); color: var(--z-muted); line-height: 1.45; }
.zs-hint-inline { font-weight: 500; color: var(--z-muted); font-size: var(--t5); }
fieldset > .zs-hint { margin: -.4rem 0 1.1rem; }
.zs-req-mark { color: #B3141A; }
.zs-wiz__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 1.8rem; padding-top: 1.4rem; }
.zs-wiz__nav [data-wiz="next"], .zs-wiz__nav [data-wiz="submit"] { margin-left: auto; }
.zs-review { display: grid; gap: 1.1rem; margin-bottom: 1.4rem; }
.zs-review__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .3rem; }
.zs-review__head h3 { font-size: var(--t4); font-weight: 700; }
.zs-review__edit { min-height: 44px; padding: 0 .5rem; border: 0; background: none; color: var(--z-blue); font: 700 var(--t5) var(--z-body); text-decoration: underline; cursor: pointer; }
.zs-review dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; }
.zs-review dl div { padding: .65rem .9rem; background: var(--z-paper); min-width: 0; }
.zs-declare-note { margin-top: 1rem; }
.zs-planfees { display: none; margin-top: 1.4rem; padding: 1rem 1.1rem; background: var(--z-paper); }
.zs-review dt { font-size: var(--t5); color: var(--z-muted); }
.zs-review dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.zs-consents { display: grid; gap: .8rem; }
.zs-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .7rem; align-items: start; font-weight: 500 !important; font-size: var(--t4) !important; cursor: pointer; }
.zs-check input { width: 20px; height: 20px; margin: .2rem 0 0; accent-color: var(--z-blue); }
.zs-check input[aria-invalid="true"] { outline: 2px solid #C4161C; outline-offset: 2px; }
.zs-join2__side { display: grid; gap: 8px; position: sticky; top: 100px; }
.zs-sidecard { background: #fff; padding: 1.4rem 1.5rem; }
.zs-sidecard h2 { display: flex; align-items: center; gap: .5rem; font-family: var(--z-body); font-size: var(--t4); font-weight: 700; margin-bottom: .8rem; letter-spacing: 0; }
.zs-sidecard h2 .zi { color: var(--z-blue); }
.zs-sidecard__sub { font-size: var(--t5); font-weight: 700; color: var(--z-teal); margin-bottom: .5rem !important; }
.zs-sidecard .zs-ticks { gap: .45rem; font-size: var(--t5); }
.zs-sidecard__note { margin-top: .8rem !important; font-size: var(--t5); color: var(--z-muted); }
.zs-sidecard p + p { margin-top: .4rem; }
.zs-sidecard__links { display: grid; gap: .3rem; margin-top: .6rem; font-weight: 600; }
.zs-sidecard--fees { background: #FFF1C2; }
body.zs-joinpage .zs-check-email .zs-numlist { margin-top: .4rem; }
.zs-join2__top { margin-bottom: 8px; }
.zs-join2__ready { display: none; margin-bottom: 8px; padding: .4rem 1.5rem; background: #fff; }
.zs-join2__ready[open] { padding-bottom: 1.3rem; }
.zs-join2__ready .zs-ticks { gap: .45rem; font-size: var(--t5); }
.zs-join2__ready > summary { list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; font-weight: 700; }
.zs-join2__ready > summary::-webkit-details-marker { display: none; }
.zs-join2__ready > summary .zi { color: var(--z-blue); }
.zs-join2__ready > summary .zs-plus { margin-left: auto; }
.zs-join2__ready[open] > summary { margin-bottom: .6rem; }
.zs-join2__ready[open] .zs-plus::after { transform: rotate(0deg); }
.zs-join2__role { margin-top: 1rem; max-width: 26rem; }
.zs-doc { padding-block: clamp(3rem, 6vw, 5rem); }
.zs-doc__inner { max-width: 46rem; }
.zs-doc h1 { font-size: var(--t2); font-weight: 700; letter-spacing: -.022em; line-height: 1.08; }
.zs-doc__meta { margin-top: .8rem !important; color: var(--z-muted); }
.zs-doc__body { margin-top: 2rem; line-height: 1.7; }
.zs-doc__body h2, .zs-doc__body h3 { margin: 2rem 0 .6rem; font-size: var(--t3); }
.zs-doc__body p, .zs-doc__body ul, .zs-doc__body ol { margin: 0 0 1rem; }
.zs-doc__body ul { list-style: disc; padding-left: 1.3rem; }
.zs-doc__body ol { list-style: decimal; padding-left: 1.3rem; }
@media (max-width: 960px) {
	.zs-join2, .zs-portal__grid, .zs-about__grid, .zs-faq__grid, .zs-contact__grid, .zs-visit__grid, .zs-ways, .zs-whogrid, .zs-vm--wide { grid-template-columns: minmax(0, 1fr); }
	.zs-join2__side { position: static; }
	.zs-join2__ready { display: block; }
	.zs-join2:has(.zs-join2__ready) .zs-join2__side > .zs-sidecard:first-child { display: none; }
	.zs-planfees { display: block; }
	.zs-auth { grid-template-columns: minmax(0, 1fr); }
	.zs-auth__side { padding-bottom: 1.6rem; overflow: visible; }
	.zs-auth__side h1 { margin-top: 1.6rem; }
	.zs-auth__list, .zs-auth__bars, .zs-auth__side > p.zs-auth__more { display: none; }
	.zs-auth__form { margin: 0 auto; padding-top: 1.6rem; }
}
@media (max-width: 640px) {
	.zs-grid, .zs-review dl { grid-template-columns: minmax(0, 1fr); }
	.zs-wiz__steps li b { display: none; }
	.zs-wiz__nav .zs-btn { flex: 1 1 auto; }
	.zs-choice { grid-template-columns: minmax(0, 1fr); }
	.zs-choice label { flex-direction: row; align-items: center; flex-wrap: wrap; }
	.zs-choice label small { flex-basis: 100%; }
	.zs-auth__top .zs-auth__home-label { display: none; }
	.zs-auth__side > p { display: none; }
	.zs-auth__side h1 { margin-top: 1.2rem; }
}
@media (min-width: 961px) and (max-height: 720px) {
	.zs-auth__bars { display: none; }
}