/* ═════════════════════════════════════════════════════════════════════
   BRETHREN — public pages v5 (/, /login, /reset-password, /about,
   /contact, /privacy). Approved mockup: mockups/public-v5.html.
   The Watch / Scroll v5 language: no boxed or cut-corner cards; open
   sections (uppercase label + trailing rule), rows split by hairlines,
   columns split by vertical rules on desktop, round icon nodes, rounded
   pills (one gold pill per screen), a gold left rule for verses/notes.
   Stands alone (no brethren-v2.css). Tokens are --p5-* because
   branding-loader.js writes --bg and friends on :root. Mobile first;
   the desktop layout switches on at 900px.
   ═════════════════════════════════════════════════════════════════════ */
:root {
    --p5-bg: #060c2e; --p5-bg-2: #0a1442; --p5-bg-3: #0f1d5a; --p5-bg-4: #16277a;
    --p5-gold: #f5a623; --p5-gold-hi: #ffc964; --p5-gold-lo: #c47f0e;
    --p5-ink: #f0f2ff; --p5-ink-2: #b8c4e8; --p5-ink-3: #7a8ec0;
    --p5-alert: #ff5d6c;
    --p5-edge: rgba(122, 142, 192, 0.16); --p5-edge-2: rgba(122, 142, 192, 0.28); --p5-edge-gold: rgba(245, 166, 35, 0.45);
    --p5-display: 'Sora', sans-serif; --p5-body: 'Plus Jakarta Sans', sans-serif;
    --p5-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --p5-safe-t: env(safe-area-inset-top, 0px);
    --p5-safe-b: env(safe-area-inset-bottom, 0px);
    --p5-gut: 16px;
}
html.p5 { scroll-behavior: smooth; scroll-padding-top: 76px; }
html.p5 *, html.p5 *::before, html.p5 *::after { box-sizing: border-box; }
html.p5, html.p5 body { margin: 0; background: var(--p5-bg); color: var(--p5-ink); font-family: var(--p5-body); -webkit-font-smoothing: antialiased; }
html.p5 body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; font-size: 15px; line-height: 1.6;
    background: radial-gradient(1200px 520px at 30% -10%, rgba(22, 39, 122, 0.55), transparent 70%), var(--p5-bg); }
html.p5 main { flex: 1 0 auto; }
:where(html.p5) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(html.p5) button { background: none; border: 0; padding: 0; cursor: pointer; }
:where(html.p5) a { color: inherit; text-decoration: none; }
:where(html.p5) img { display: block; max-width: 100%; }
:where(html.p5) :where(h1, h2, h3, p, figure, blockquote, ul, ol) { margin: 0; }
:where(html.p5) :where(ul, ol) { padding: 0; list-style: none; }
html.p5 [hidden] { display: none !important; }
html.p5 :focus-visible { outline: 2px solid var(--p5-gold); outline-offset: 2px; }
.p5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pub-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 99px; background: var(--p5-gold); color: var(--p5-bg) !important; font-weight: 700; }
.pub-skip:focus { top: calc(8px + var(--p5-safe-t)); }

/* ═══ shared building blocks ═══ */
.pub-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--p5-gut); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 11px var(--p5-display); letter-spacing: .16em; text-transform: uppercase; color: var(--p5-gold); }
.eyebrow.line::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--p5-gold); }
.gold { color: var(--p5-gold); }
.lede { font-size: 16px; line-height: 1.65; color: var(--p5-ink-2); text-wrap: pretty; }
.sec-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 800 12px var(--p5-display); letter-spacing: .16em; text-transform: uppercase; color: var(--p5-ink); }
.sec-h::after { content: ''; flex: 1; height: 1px; background: var(--p5-edge); }
.h2 { font: 800 clamp(28px, 7vw, 44px)/1.08 var(--p5-display); letter-spacing: -0.02em; margin: 0 0 12px; text-wrap: balance; }

.pill { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--p5-bg-3);
    border: 1px solid var(--p5-edge-2); font: 700 14px var(--p5-body); color: var(--p5-ink); white-space: nowrap; cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s var(--p5-ease), box-shadow .15s; }
.pill i { color: var(--p5-gold); font-size: 14px; }
.pill:hover { border-color: var(--p5-edge-gold); }
.pill:active { transform: scale(.97); }
.pill.gold { background: linear-gradient(180deg, var(--p5-gold-hi), var(--p5-gold)); color: var(--p5-bg); border: 0; font-family: var(--p5-display); font-weight: 800; box-shadow: 0 10px 30px rgba(245, 166, 35, 0.22); }
.pill.gold i { color: var(--p5-bg); }
.pill.gold:hover { box-shadow: 0 12px 36px rgba(245, 166, 35, 0.36); }
.pill.lg { height: 54px; padding: 0 24px; font-size: 15px; }
.pill.sm { height: 36px; padding: 0 14px; font-size: 13px; }
.pill.block { width: 100%; }
.pill:disabled { opacity: .7; cursor: default; transform: none; }

.node { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--p5-bg-3); border: 1px solid var(--p5-edge-2); color: var(--p5-gold); font-size: 15px; }
.node.is-gold { background: linear-gradient(180deg, var(--p5-gold-hi), var(--p5-gold)); color: var(--p5-bg); border: 0; box-shadow: 0 0 22px rgba(245, 166, 35, 0.35); }
.node.sm { width: 34px; height: 34px; font-size: 13px; }

.verse { position: relative; isolation: isolate; margin: 0; padding: 4px 0 2px 18px; border-left: 2px solid var(--p5-gold); }
.verse::before { content: '\201C'; position: absolute; right: 0; bottom: -46px; z-index: -1; font: 800 120px/1 var(--p5-display); color: var(--p5-bg-4); pointer-events: none; }
.verse p { font: italic 500 19px/1.55 var(--p5-body); color: var(--p5-ink); text-wrap: pretty; }
.verse cite { display: block; margin-top: 12px; font: 800 12px var(--p5-display); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--p5-gold); }
.verse.plain::before { display: none; }
.verse.plain p { font: 400 14.5px/1.65 var(--p5-body); color: var(--p5-ink-2); }
.verse.plain p strong { color: var(--p5-ink); }

.rows > * { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--p5-edge); }
.rows > *:last-child { border-bottom: 1px solid var(--p5-edge); }
.rows .grow { flex: 1; min-width: 0; }
.rows strong { display: block; font: 700 15px/1.3 var(--p5-display); color: var(--p5-ink); }
.rows small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--p5-ink-3); }
.rows .chev { color: var(--p5-ink-3); font-size: 12px; }
a.rowlink:hover .chev, a.rowlink:hover strong { color: var(--p5-gold); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--p5-bg-3); border: 1px solid var(--p5-edge); font: 700 12px var(--p5-body); color: var(--p5-ink-2); }
.tag i { color: var(--p5-gold); font-size: 11px; }

/* notes and messages: a left rule, no box */
.msg { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-left: 2px solid var(--p5-gold); border-radius: 0 12px 12px 0; background: var(--p5-bg-2);
    font-size: 14px; line-height: 1.55; color: var(--p5-ink-2); }
.msg > i { margin-top: 3px; color: var(--p5-gold); }
.msg strong { color: var(--p5-ink); }
.msg a { color: var(--p5-gold); font-weight: 700; }
.msg.err { border-left-color: var(--p5-alert); }
.msg.err > i { color: var(--p5-alert); }

/* glow band for closing calls */
.band { position: relative; isolation: isolate; padding: 40px 0 42px; border-top: 1px solid var(--p5-edge); border-bottom: 1px solid var(--p5-edge); }
.band::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
    background: radial-gradient(70% 90% at 20% 40%, rgba(32, 64, 200, 0.34), transparent 72%), radial-gradient(40% 60% at 90% 80%, rgba(245, 166, 35, 0.10), transparent 70%); }
.band h2 { font: 800 clamp(30px, 8vw, 48px)/1.06 var(--p5-display); letter-spacing: -0.02em; margin: 12px 0 12px; }
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.cta .pill { height: 52px; padding: 0 14px; }
.cta [data-pub-signed-in] { grid-column: 1 / -1; }

/* ═══ header ═══ */
.pub-head { position: sticky; top: 0; z-index: 900; padding-top: var(--p5-safe-t); background: rgba(10, 20, 66, 0.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--p5-edge); }
.pub-head-in { display: flex; align-items: center; gap: 6px; height: 60px; max-width: 1180px; margin: 0 auto; padding: 0 10px 0 var(--p5-gut); }
.pub-brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.pub-brand img { display: block; height: 22px; width: auto; }
.pub-nav { display: none; }
.pub-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pub-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 99px; font: 700 13.5px var(--p5-body); color: var(--p5-ink-2); white-space: nowrap; transition: color .15s, background .15s; }
.pub-link:hover { color: var(--p5-ink); background: rgba(122, 142, 192, 0.12); }
.pub-link[aria-current='page'] { color: var(--p5-gold); }
.pub-link i { font-size: 12px; }
.pub-actions .pill { height: 38px; padding: 0 16px; font-size: 13.5px; }
/* signed-in header, built by brethren-public.js */
.pub-me { display: inline-flex; align-items: center; gap: 10px; }
.pub-me .v2-av-ring { width: 36px; height: 36px; flex: none; border-radius: 50%; padding: 2px; background: linear-gradient(160deg, var(--p5-gold-hi), var(--p5-gold-lo)); }
.pub-me .v2-av-ring img, .pub-me .v2-av-initials { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--p5-bg-2); }
.pub-me .v2-av-initials { display: grid; place-items: center; background: var(--p5-bg-3); font: 800 12px var(--p5-display); color: var(--p5-gold); }
.pub-me .v2-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 99px; background: linear-gradient(180deg, var(--p5-gold-hi), var(--p5-gold));
    color: var(--p5-bg); font: 800 13px var(--p5-display); white-space: nowrap; }
@media (max-width: 379px) {
    .pub-brand img { height: 19px; }
    .pub-link { padding: 0 9px; }
    .pub-me .v2-btn span { display: none; }
}

/* ═══ footer ═══ */
.pub-foot { margin-top: 56px; padding: 34px 0 calc(26px + var(--p5-safe-b)); border-top: 1px solid var(--p5-edge); }
.pub-foot.after-band { margin-top: 0; border-top: 0; }
.pub-foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.pub-foot-brand { grid-column: 1 / -1; }
.pub-foot-brand img { height: 24px; width: auto; margin-bottom: 12px; }
.pub-foot-brand p { max-width: 360px; font-size: 13.5px; line-height: 1.65; color: var(--p5-ink-3); }
.pub-foot .sec-h { margin-bottom: 4px; font-size: 11px; color: var(--p5-ink-2); }
.pub-foot li a { display: flex; align-items: center; min-height: 40px; font: 600 14px var(--p5-body); color: var(--p5-ink-2); border-bottom: 1px solid var(--p5-edge); }
.pub-foot li:last-child a { border-bottom: 0; }
.pub-foot li a:hover { color: var(--p5-gold); }
.pub-foot-base { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--p5-edge); font-size: 12.5px; line-height: 1.7; color: var(--p5-ink-3); }
.pub-foot-base a { color: var(--p5-gold); font-weight: 700; }
.pub-foot.slim { margin-top: 40px; padding-top: 0; border-top: 0; }
.pub-foot.slim .pub-foot-base { margin-top: 0; }

/* page hero (about, contact, privacy) */
.pub-hero { padding: 26px 0; }
.pub-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 700 12.5px var(--p5-display); color: var(--p5-ink-3); }
.pub-crumbs a:hover { color: var(--p5-gold); }
.pub-crumbs i { font-size: 9px; color: var(--p5-edge-gold); }
.pub-crumbs [aria-current] { color: var(--p5-ink-2); }
.pub-hero h1 { margin: 14px 0; font: 800 clamp(38px, 10.5vw, 64px)/1.02 var(--p5-display); letter-spacing: -0.03em; }
.pub-hero .updated { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--p5-edge-2);
    font: 700 12px var(--p5-body); color: var(--p5-ink-2); }
.pub-hero .updated i { color: var(--p5-gold); }

/* ═══════════════ HOME ═══════════════ */
.hero { position: relative; isolation: isolate; padding: 30px 0 34px; overflow-x: clip; }
.hero-map { position: absolute; z-index: -1; top: 6px; right: -34%; width: 120%; aspect-ratio: 2 / 1; opacity: .22; pointer-events: none;
    background: linear-gradient(120deg, var(--p5-gold) 0%, var(--p5-bg-4) 70%);
    -webkit-mask: url('/images/brethren-map.png') center / contain no-repeat; mask: url('/images/brethren-map.png') center / contain no-repeat; }
.hero-grid { display: grid; gap: 34px; }
.hero h1 { margin: 16px 0 18px; font: 800 clamp(42px, 12vw, 78px)/0.98 var(--p5-display); letter-spacing: -0.035em; }
.hero h1 .gold { display: block; }
.hero .lede { font-size: 16.5px; }
.promise { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font: 600 13px var(--p5-body); color: var(--p5-ink-2); }
.promise li { display: inline-flex; align-items: center; gap: 8px; }
.promise i { color: var(--p5-gold); font-size: 12px; }
.hero-side { display: grid; gap: 26px; }
.hero-index { display: none; }

.sec { padding: 34px 0 10px; }
.feats { margin-top: 22px; }
.feat { padding: 24px 0; border-top: 1px solid var(--p5-edge); }
.feat-top { display: flex; align-items: center; gap: 14px; }
.kind { font: 800 11px var(--p5-display); letter-spacing: .16em; text-transform: uppercase; color: var(--p5-gold); }
.feat h3 { margin: 14px 0 8px; font: 700 20px/1.25 var(--p5-display); }
.feat p { font-size: 14.5px; line-height: 1.65; color: var(--p5-ink-2); }
.feat .tags { margin-top: 14px; }

.more { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--p5-edge); }
.more li { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--p5-edge); font: 700 13.5px var(--p5-display); }
.more li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--p5-edge); }
.more li:last-child { grid-column: 1 / -1; }
.more i { width: 18px; text-align: center; color: var(--p5-gold); }

.begin { display: grid; gap: 26px; }
.steps { position: relative; }
.steps::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 30px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--p5-gold), rgba(245, 166, 35, 0.12)); }
.step { position: relative; display: flex; gap: 18px; padding-bottom: 26px; }
.step:last-child { padding-bottom: 0; }
.step-n { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--p5-bg-3);
    border: 1px solid var(--p5-edge-gold); color: var(--p5-gold); font: 800 15px var(--p5-display); box-shadow: 0 0 0 5px var(--p5-bg); }
.step:first-child .step-n { background: linear-gradient(180deg, var(--p5-gold-hi), var(--p5-gold)); color: var(--p5-bg); border: 0; box-shadow: 0 0 0 5px var(--p5-bg), 0 0 22px rgba(245, 166, 35, 0.5); }
.step h3 { margin: 9px 0 5px; font: 700 17px var(--p5-display); }
.step p { font-size: 14px; line-height: 1.6; color: var(--p5-ink-3); }
.home-close { margin-top: 44px; }

/* ═══════════════ FORMS (login, reset, contact) ═══════════════ */
.form-group { margin-bottom: 18px; }
.form-label { display: block; margin-bottom: 8px; font: 700 12.5px var(--p5-display); letter-spacing: .02em; color: var(--p5-ink-2); }
.req { color: var(--p5-gold); }
.form-input { display: block; width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; background: var(--p5-bg-2); border: 1px solid var(--p5-edge-2); font: 500 16px var(--p5-body); color: var(--p5-ink);
    outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.form-input::placeholder { color: var(--p5-ink-3); }
.form-input:focus { border-color: var(--p5-gold); box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.14); }
textarea.form-input { height: auto; min-height: 112px; padding: 14px 16px; resize: vertical; line-height: 1.55; }
select.form-input { padding-right: 44px; cursor: pointer;
    background: var(--p5-bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 18px center no-repeat; }
select.form-input option { background: var(--p5-bg-2); color: var(--p5-ink); }
.pw-wrap, .username-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 54px; }
.pw-toggle { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--p5-ink-3); }
.pw-toggle:hover { color: var(--p5-gold); background: rgba(122, 142, 192, 0.12); }
.username-wrap .form-input { padding-left: 38px; padding-right: 48px; }
.username-wrap .prefix { position: absolute; left: 16px; top: 0; height: 52px; display: flex; align-items: center; font: 700 16px var(--p5-display); color: var(--p5-gold); pointer-events: none; }
.username-wrap .status { position: absolute; right: 16px; top: 16px; width: 20px; height: 20px; }
.username-wrap .status.checking { border-radius: 50%; border: 2px solid var(--p5-edge-2); border-top-color: var(--p5-gold); animation: p5spin .8s linear infinite; }
.username-wrap .status.available::before, .username-wrap .status.taken::before { font: 900 18px/20px 'Font Awesome 6 Free'; }
.username-wrap .status.available::before { content: '\f058'; color: var(--p5-gold); }
.username-wrap .status.taken::before { content: '\f057'; color: var(--p5-alert); }
@keyframes p5spin { to { transform: rotate(360deg); } }
.field-hint { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--p5-ink-3); }
.field-hint > i { margin-top: 2px; color: var(--p5-gold); font-size: 12px; }
.field-hint.success { color: var(--p5-gold-hi); }
.field-hint.error { color: var(--p5-alert); }
.form-row { display: grid; }
@media (min-width: 480px) { .form-row { grid-template-columns: 1fr 1fr; gap: 0 12px; } }

/* ═══════════════ AUTH (/login) ═══════════════ */
.auth { padding: 22px 0 0; }
.auth-grid { display: grid; gap: 40px; }
.auth-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--p5-bg-2); border: 1px solid var(--p5-edge); }
.auth-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 99px; font: 700 13.5px var(--p5-body); color: var(--p5-ink-3); transition: color .15s, background .15s; }
.auth-tab i { font-size: 13px; }
.auth-tab:hover { color: var(--p5-ink); }
.auth-tab.active { color: var(--p5-gold-hi); background: var(--p5-bg-4); box-shadow: inset 0 0 0 1px var(--p5-edge-gold); }
.ah { margin: 28px 0 22px; }
.ah h1, .ah h2 { font: 800 clamp(28px, 7.6vw, 36px)/1.12 var(--p5-display); letter-spacing: -0.02em; }
.ah em { font-style: normal; color: var(--p5-gold); }
.ah p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--p5-ink-2); }
.step-panel { display: none; }
.step-panel.active { display: block; }
.msg-error, .msg-success { display: none; margin-bottom: 18px; }
.msg-error.show, .msg-success.show { display: flex; }
.auth-form-container > .msg { margin: 20px 0 0; }

.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 22px; }
.remember { display: inline-flex; align-items: center; gap: 10px; font: 600 14px var(--p5-body); color: var(--p5-ink-2); cursor: pointer; }
.remember input { position: absolute; opacity: 0; pointer-events: none; }
.remember .box { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; border: 1px solid var(--p5-edge-2); background: var(--p5-bg-2); color: transparent; font-size: 11px; }
.remember input:checked + .box { background: linear-gradient(180deg, var(--p5-gold-hi), var(--p5-gold)); border-color: transparent; color: var(--p5-bg); }
.remember input:focus-visible + .box { outline: 2px solid var(--p5-gold); outline-offset: 2px; }
.link { font: 700 13.5px var(--p5-body); color: var(--p5-gold); }
.link:hover { color: var(--p5-gold-hi); }
.submit-btn .spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(6, 12, 46, 0.25); border-top-color: var(--p5-bg); animation: p5spin .8s linear infinite; }
.submit-btn.loading .spinner { display: block; }
.submit-btn.loading .btn-text { display: none; }
.btn-text { display: inline-flex; align-items: center; gap: 9px; }
.auth-footer { margin-top: 24px; text-align: center; }
.divider { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font: 700 11px var(--p5-display); letter-spacing: .16em; text-transform: uppercase; color: var(--p5-ink-3); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--p5-edge); }
.auth-footer > a { font-size: 14.5px; color: var(--p5-ink-2); }
.auth-footer > a strong, .auth-footer > a i { color: var(--p5-gold); }
.security-badge { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font: 600 12.5px var(--p5-body); color: var(--p5-ink-3); }
.security-badge i { color: var(--p5-gold); font-size: 11px; }

/* reset steps and the key */
.mini { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font: 700 12.5px var(--p5-display); color: var(--p5-ink-3); }
.mini span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mini .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--p5-edge-2); font-size: 11.5px; }
.mini .on { color: var(--p5-gold); }
.mini .on .n { background: linear-gradient(180deg, var(--p5-gold-hi), var(--p5-gold)); color: var(--p5-bg); border: 0; }
.mini .done { color: var(--p5-ink-2); }
.mini .done .n { border-color: var(--p5-edge-gold); color: var(--p5-gold); }
.mini hr { flex: 1; min-width: 20px; height: 1px; margin: 0; border: 0; background: var(--p5-edge-2); }
.key { position: relative; width: 76px; height: 76px; margin: 4px 0 24px; border-radius: 50%; display: grid; place-items: center; background: var(--p5-bg-3); border: 1px solid var(--p5-edge-gold); color: var(--p5-gold); font-size: 28px;
    box-shadow: 0 0 0 8px rgba(22, 39, 122, 0.5), 0 0 40px rgba(245, 166, 35, 0.22); }

/* join: progress, phone and country pickers, photo, interests */
.step-dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 22px; }
.step-dot { font: 700 12px var(--p5-display); color: var(--p5-ink-3); }
.step-dot::before { content: ''; display: block; height: 4px; margin-bottom: 8px; border-radius: 4px; background: var(--p5-bg-4); }
.step-dot.done::before, .step-dot.active::before { background: linear-gradient(90deg, var(--p5-gold-lo), var(--p5-gold-hi)); }
.step-dot.active { color: var(--p5-gold); }
.step-dot.done { color: var(--p5-ink-2); }
.step-dot b { margin-right: 4px; }
.step-header { margin-bottom: 18px; }
.step-header h3 { font: 800 19px var(--p5-display); }
.step-header p { margin-top: 4px; font-size: 13.5px; color: var(--p5-ink-3); }
.step-nav { display: flex; gap: 10px; margin-top: 8px; }
.step-nav .pill { height: 52px; }
.step-nav .pill.gold { flex: 1; }

.phone-wrap { display: flex; gap: 8px; }
.phone-wrap .form-input { flex: 1; min-width: 0; }
.cdd { position: relative; }
.phone-cdd { flex: none; }
.cdd-trigger { display: inline-flex; align-items: center; gap: 8px; width: 100%; height: 52px; padding: 0 14px; border-radius: 14px; background: var(--p5-bg-2); border: 1px solid var(--p5-edge-2);
    font: 700 15px var(--p5-body); color: var(--p5-ink); transition: border-color .15s, box-shadow .15s; }
.cdd-name { flex: 1; text-align: left; font-weight: 500; font-size: 16px; }
.cdd-arrow { margin-left: auto; font-size: 11px; color: var(--p5-gold); transition: transform .2s var(--p5-ease); }
.cdd-flag, .ci-flag { font-size: 18px; line-height: 1; }
.cdd.open .cdd-trigger { border-color: var(--p5-gold); box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.14); }
.cdd.open .cdd-arrow { transform: rotate(180deg); }
.cdd-panel { display: none; position: absolute; z-index: 40; top: 60px; left: 0; width: min(320px, calc(100vw - 32px)); padding: 8px; border-radius: 16px; background: var(--p5-bg-2);
    border: 1px solid var(--p5-edge-gold); box-shadow: 0 24px 60px rgba(2, 6, 30, 0.7); }
#countryCdd .cdd-panel { width: 100%; }
.cdd.open .cdd-panel { display: block; }
.cdd-search input { display: block; width: 100%; height: 44px; padding: 0 16px 0 40px; border-radius: 99px; border: 1px solid var(--p5-edge-2); outline: none; font: 500 15px var(--p5-body); color: var(--p5-ink);
    background: var(--p5-bg-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='%23f5a623' stroke-width='2.5'/%3E%3Cpath d='M15 15l6 6' stroke='%23f5a623' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 16px center no-repeat; }
.cdd-search input:focus { border-color: var(--p5-gold); }
.cdd-search input::placeholder { color: var(--p5-ink-3); }
.cdd-list { max-height: 240px; overflow-y: auto; margin-top: 6px; overscroll-behavior: contain; }
.cdd-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 10px; font-size: 14.5px; color: var(--p5-ink-2); cursor: pointer; }
.ci-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-code { font: 700 13px var(--p5-display); color: var(--p5-ink-3); }
.cdd-item:hover, .cdd-item.selected { background: var(--p5-bg-3); color: var(--p5-ink); }
.cdd-item.selected .ci-code { color: var(--p5-gold); }
.cdd-empty { padding: 14px 10px; font-size: 14px; color: var(--p5-ink-3); }

.photo-upload { display: flex; align-items: center; gap: 16px; }
.photo-preview { width: 84px; height: 84px; flex: none; overflow: hidden; border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--p5-edge-gold); background: var(--p5-bg-2); color: var(--p5-ink-3); font-size: 28px; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-upload small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--p5-ink-3); }
.interests-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.int-tag { height: 38px; padding: 0 14px; border-radius: 99px; background: var(--p5-bg-3); border: 1px solid var(--p5-edge); font: 700 13px var(--p5-body); color: var(--p5-ink-2); transition: all .15s; }
.int-tag:hover { border-color: var(--p5-edge-gold); }
.int-tag.selected { background: var(--p5-bg-4); border-color: var(--p5-edge-gold); color: var(--p5-gold-hi); }

/* the story next to the form */
.auth-story { padding-top: 34px; border-top: 1px solid var(--p5-edge); }
.auth-story h2 { margin: 14px 0; font: 800 clamp(30px, 8vw, 46px)/1.06 var(--p5-display); letter-spacing: -0.02em; }
.auth-story .lede { margin-bottom: 26px; }
.auth-story .rows { margin-top: 30px; }

/* ═══════════════ /reset-password ═══════════════ */
.rp { max-width: 480px; margin: 0 auto; padding: 26px 0 0; }
.rp .ah { margin-top: 0; }
.rp .msg { margin-bottom: 22px; }
.meter { margin-top: 10px; }
.meter .bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.meter .bars i { height: 4px; border-radius: 4px; background: var(--p5-bg-4); }
.meter .bars i.on1 { background: var(--p5-gold-lo); }
.meter .bars i.on2, .meter .bars i.on3, .meter .bars i.on4 { background: var(--p5-gold); }
.meter .lab { margin-top: 7px; font: 600 12.5px var(--p5-body); color: var(--p5-ink-3); }
.rp .verse { margin-top: 34px; }
.back { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 30px auto 0; font: 700 13.5px var(--p5-body); color: var(--p5-ink-2); }
.back i { color: var(--p5-gold); }
.back:hover { color: var(--p5-gold); }
.state { text-align: center; padding-top: 30px; }
.state .key { margin: 0 auto 22px; }
.state .key.warn { color: var(--p5-ink-2); border-color: var(--p5-edge-2); box-shadow: none; }
.state h2 { font: 800 30px/1.15 var(--p5-display); letter-spacing: -0.02em; }
.state p { max-width: 360px; margin: 10px auto 26px; font-size: 15px; line-height: 1.6; color: var(--p5-ink-2); }

/* ═══════════════ ABOUT ═══════════════ */
.two > * { padding: 24px 0; border-top: 1px solid var(--p5-edge); }
.two > *:last-child { border-bottom: 1px solid var(--p5-edge); }
.two h2 { margin: 16px 0 8px; font: 800 22px var(--p5-display); }
.two p, .cols p { font-size: 14.5px; line-height: 1.65; color: var(--p5-ink-2); }
.block { padding-top: 46px; }
.block .lede { margin-bottom: 4px; }
.cols { margin-top: 22px; }
.cols > * { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--p5-edge); }
.cols > *:last-child { border-bottom: 1px solid var(--p5-edge); }
.cols h3 { margin: 2px 0 6px; font: 700 16.5px var(--p5-display); }
.ticks { margin-top: 22px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--p5-edge); font-size: 14.5px; line-height: 1.6; color: var(--p5-ink-2); }
.ticks li:last-child { border-bottom: 1px solid var(--p5-edge); }
.ticks .t { width: 26px; height: 26px; flex: none; margin-top: -1px; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 166, 35, 0.14); color: var(--p5-gold); font-size: 11px; }
.ticks strong { color: var(--p5-ink); font-weight: 700; }
.callout { margin-top: 28px; }
.callout.verse p { font: 500 15.5px/1.65 var(--p5-body); color: var(--p5-ink-2); }
.techs { margin-top: 20px; }
.techs .tag { height: 36px; padding: 0 14px; font-size: 13px; }
.team > * { display: flex; gap: 16px; align-items: flex-start; }
.av { width: 56px; height: 56px; flex: none; border-radius: 50%; padding: 2px; background: linear-gradient(160deg, var(--p5-gold-hi), var(--p5-gold-lo)); }
.av span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--p5-bg-3); border: 2px solid var(--p5-bg); font: 800 16px var(--p5-display); color: var(--p5-gold); }
.role { display: block; margin-bottom: 6px; font: 800 10.5px var(--p5-display); letter-spacing: .14em; text-transform: uppercase; color: var(--p5-gold); }

/* ═══════════════ CONTACT ═══════════════ */
.contact { display: grid; gap: 40px; }
.info > li { align-items: flex-start; padding: 16px 0; }
.info h2 { font: 700 15.5px var(--p5-display); }
.info p { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--p5-ink-3); }
.info a.m { display: inline-block; margin-top: 4px; font: 700 14px var(--p5-body); color: var(--p5-gold); }
.org { margin-top: 26px; }
.org h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font: 800 12px var(--p5-display); letter-spacing: .16em; text-transform: uppercase; color: var(--p5-gold); }
.cform h2 { font: 800 26px var(--p5-display); letter-spacing: -0.02em; }
.cform .sub { margin: 6px 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--p5-ink-2); }
.cform .form-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--p5-ink-3); }
.cform .form-note i { color: var(--p5-gold); font-size: 11px; }
.form-success { display: none; margin-top: 18px; }
.form-success.show { display: flex; }
.faq { padding-top: 50px; }
.faq-item { border-top: 1px solid var(--p5-edge); }
.faq-item:last-child { border-bottom: 1px solid var(--p5-edge); }
.faq-item summary { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 12px 0; list-style: none; cursor: pointer; font: 700 15.5px/1.35 var(--p5-display); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .c { width: 30px; height: 30px; flex: none; margin-left: auto; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--p5-edge-2); color: var(--p5-gold); font-size: 11px; transition: transform .2s var(--p5-ease); }
.faq-item[open] summary .c { transform: rotate(45deg); background: rgba(245, 166, 35, 0.14); border-color: var(--p5-edge-gold); }
.faq-item p { padding: 0 44px 18px 0; font-size: 14.5px; line-height: 1.65; color: var(--p5-ink-2); }

/* ═══════════════ PRIVACY ═══════════════ */
.policy { display: grid; gap: 10px; }
.policy > * { min-width: 0; }
.toc .sec-h { display: none; }
.toc ol { display: flex; gap: 8px; margin: 0 calc(var(--p5-gut) * -1); padding: 0 var(--p5-gut) 6px; overflow-x: auto; scrollbar-width: none; }
.toc ol::-webkit-scrollbar { display: none; }
.toc a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--p5-bg-3); border: 1px solid var(--p5-edge); font: 700 13px var(--p5-body); color: var(--p5-ink-2); white-space: nowrap; }
.toc a:hover { color: var(--p5-gold); }
.toc a b { font: 800 11px var(--p5-display); color: var(--p5-gold); }
.psec { padding: 28px 0 26px; border-bottom: 1px solid var(--p5-edge); }
.psec:first-child { padding-top: 18px; }
.psec:last-child { border-bottom: 0; }
.psec h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font: 800 21px/1.25 var(--p5-display); letter-spacing: -0.01em; }
.psec > p { font-size: 15px; line-height: 1.7; color: var(--p5-ink-2); }
.psec > p + p { margin-top: 12px; }
.psec a { color: var(--p5-gold); font-weight: 700; }
.dl { margin-top: 14px; }
.dl li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--p5-edge); font-size: 14.5px; line-height: 1.6; color: var(--p5-ink-2); }
.dl li > i { width: 18px; flex: none; margin-top: 4px; text-align: center; color: var(--p5-gold); font-size: 13px; }
.dl li strong { color: var(--p5-ink); }
.dl.dont li > i { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 166, 35, 0.14); font-size: 11px; }
.psec .msg { margin-top: 16px; }
.rights { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--p5-edge); }
.rights > div { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--p5-edge); }
.rights > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--p5-edge); }
.rights i { color: var(--p5-gold); font-size: 16px; }
.rights h3 { margin: 10px 0 4px; font: 700 15px var(--p5-display); }
.rights p { font-size: 13px; line-height: 1.55; color: var(--p5-ink-3); }

/* ═══ tablet ═══ */
@media (min-width: 600px) {
    :root { --p5-gut: 24px; }
    .pub-head-in { padding-right: 18px; }
    .cta { display: flex; flex-wrap: wrap; gap: 12px; }
    .cta .pill { padding: 0 28px; }
}

/* ═══ desktop ═══ */
@media (min-width: 900px) {
    :root { --p5-gut: 40px; }
    html.p5 { scroll-padding-top: 84px; }
    .pub-head-in { height: 68px; gap: 18px; padding-right: 40px; }
    .pub-brand img { height: 24px; }
    .pub-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
    .pub-actions { margin-left: 8px; gap: 8px; }
    .pub-actions .pill { height: 40px; padding: 0 20px; }
    .lede { font-size: 17px; }
    .verse p { font-size: 21px; }

    /* home */
    .hero { padding: 76px 0 84px; }
    .hero-map { top: 0; bottom: 0; left: 38%; right: -12%; width: auto; aspect-ratio: auto; opacity: .32; }
    .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 64px; align-items: center; }
    .hero .lede { font-size: 18px; }
    .hero-side { gap: 30px; }
    .hero-index { display: block; }
    .hero-index.rows > * { min-height: 66px; }
    .sec { padding-top: 54px; }
    .sec-intro .h2, .sec-intro .lede { max-width: 760px; }
    .feats { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 30px; border-top: 1px solid var(--p5-edge); border-bottom: 1px solid var(--p5-edge); }
    .feat { grid-column: span 2; padding: 30px 30px 32px; border: 0; }
    .feat:nth-child(-n + 2) { grid-column: span 3; }
    .feat:nth-child(1), .feat:nth-child(3) { padding-left: 0; }
    .feat:nth-child(2), .feat:nth-child(5) { padding-right: 0; }
    .feat:nth-child(2), .feat:nth-child(4), .feat:nth-child(5) { border-left: 1px solid var(--p5-edge); }
    .feat:nth-child(n + 3) { border-top: 1px solid var(--p5-edge); }
    .feat:nth-child(-n + 2) h3 { font-size: 24px; }
    .more { grid-template-columns: repeat(5, 1fr); border-top: 0; }
    .more li, .more li:nth-child(even) { min-height: 66px; padding: 12px 18px; border-left: 1px solid var(--p5-edge); }
    .more li:first-child { padding-left: 0; border-left: 0; }
    .more li:last-child { grid-column: auto; }
    .begin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 64px; align-items: center; }
    .begin .steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 18px; }
    .steps::before { left: 22px; right: 22px; top: 21px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--p5-gold), rgba(245, 166, 35, 0.12)); }
    .step { flex-direction: column; gap: 8px; padding: 0; }
    .home-close { margin-top: 70px; }
    .band { padding: 64px 0; }
    .band .pub-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
    .band .cta { margin-top: 0; }

    /* footer */
    .pub-foot { margin-top: 88px; padding-top: 50px; }
    .pub-foot.slim { margin-top: 60px; }
    .pub-foot-grid { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
    .pub-foot-brand { grid-column: auto; }
    .pub-foot li a { min-height: 36px; border-bottom: 0; }

    /* auth: the story on the left, the form right of a vertical rule */
    .auth { padding-top: 56px; }
    .auth-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 0; align-items: start; }
    .auth-card { padding: 6px 0 0 64px; border-left: 1px solid var(--p5-edge); min-height: 640px; }
    .auth-story { order: -1; position: sticky; top: 108px; padding: 18px 64px 0 0; border-top: 0; }
    .auth-story h2 { font-size: 50px; }
    .ah { margin-top: 32px; }
    .rp { padding-top: 64px; }

    /* about / contact / privacy */
    .pub-hero { padding: 48px 0 40px; }
    .pub-hero .lede { max-width: 640px; }
    .two { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--p5-edge); border-bottom: 1px solid var(--p5-edge); }
    .two > *, .two > *:last-child { padding: 34px 40px 36px 0; border: 0; }
    .two > * + * { padding: 34px 0 36px 40px; border-left: 1px solid var(--p5-edge); }
    .two h2 { font-size: 26px; }
    .block { padding-top: 70px; }
    .block-head .h2, .block-head .lede { max-width: 720px; }
    .cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--p5-edge); border-bottom: 1px solid var(--p5-edge); }
    .cols > *, .cols > *:last-child { flex-direction: column; gap: 12px; padding: 28px 28px 30px; border: 0; }
    .cols > *:first-child { padding-left: 0; }
    .cols > *:last-child { padding-right: 0; }
    .cols > * + * { border-left: 1px solid var(--p5-edge); }
    .cols.team { grid-template-columns: repeat(4, 1fr); }
    .ticks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
    .ticks li:nth-last-child(2) { border-bottom: 1px solid var(--p5-edge); }
    .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 0; align-items: start; }
    .contact > :first-child { padding-right: 56px; }
    .cform { padding-left: 56px; border-left: 1px solid var(--p5-edge); }
    .faq { padding-top: 76px; }
    .faq-list { columns: 2; column-gap: 48px; }
    .faq-item { break-inside: avoid; }
    .policy { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
    .toc { position: sticky; top: 100px; }
    .toc .sec-h { display: flex; }
    .toc ol { display: block; margin: 0; padding: 0; overflow: visible; }
    .toc li { border-top: 1px solid var(--p5-edge); }
    .toc li:last-child { border-bottom: 1px solid var(--p5-edge); }
    .toc a { display: flex; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; transition: padding .15s, color .15s; }
    .toc a:hover { padding-left: 12px; box-shadow: inset 2px 0 0 var(--p5-gold); }
    .psec { padding: 34px 0 32px; }
    .psec:first-child { padding-top: 6px; }
    .psec h2 { font-size: 24px; }
    .rights { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--p5-edge); }
    .rights > div, .rights > div:nth-child(even) { padding: 18px; border-bottom: 0; border-left: 1px solid var(--p5-edge); }
    .rights > div:first-child { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    html.p5 { scroll-behavior: auto; }
    html.p5 *, html.p5 *::before, html.p5 *::after { transition: none !important; animation-duration: .01ms !important; }
}