/*
 * UI v3, Step 1: calm the chrome.  RFC docs/rfcs/2026-10-24_ui_foundation.md
 *
 * Loaded ONLY when UI_V3_ENABLED is on (see App\config\UiConfig), and every rule is scoped under
 * `.ui-v3` (the <body> class), so switching the flag off restores today's pages exactly.
 * Tokens come from ui-foundation.css (--ds-*).
 *
 *   1. One overlay at a time (the choreography is public/js/ui-overlay-queue.js; the look is here)
 *   2. Cookie sheet and welcome prompt sized for phone, iPad and desktop
 *   3. One calm Share button instead of a nine-icon rail
 *   4. Solid header (iOS repaints backdrop blur while the URL bar resizes, which reads as "blurred")
 *   5. Navigation that fits every iPad width (menu below 1200px, tighter links from 1200px to 1279px)
 */

.ui-v3 {
  --ds-bottom-nav-h: 0px;
  --ds-fab-bottom: calc(16px + var(--ds-safe-bottom));
  background-color: var(--ds-bg);
}
/* The phone bottom bar exists below 992px on pages that render it. */
@media (max-width: 991.98px) {
  .ui-v3:has(.pp-bottom-nav) { --ds-bottom-nav-h: calc(57px + var(--ds-safe-bottom)); --ds-fab-bottom: calc(57px + 16px + var(--ds-safe-bottom)); }
}

/* ============ 1. One overlay at a time ============ */
/* The queue script sets <html data-ds-overlay="cookie|tour|install|push"> to the one that has the floor.
   Anything lower in the queue waits, invisible and untappable, and appears when the one above is dismissed. */
html[data-ds-overlay="cookie"] :is(#tourWelcomePrompt, #pwa-install-banner, #pwaUniversalInstallBanner, #push-notification-banner),
html[data-ds-overlay="menu"] :is(#tourWelcomePrompt, #pwa-install-banner, #pwaUniversalInstallBanner, #push-notification-banner),
html[data-ds-overlay="tour"] :is(#pwa-install-banner, #pwaUniversalInstallBanner, #push-notification-banner),
html[data-ds-overlay="install"] #push-notification-banner,
html[data-ds-overlay] #mobileShareTrigger,
html[data-ds-overlay] #backToTop {
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
.ui-v3 :is(#tourWelcomePrompt, #pwa-install-banner, #push-notification-banner, #mobileShareTrigger) { transition: opacity var(--ds-dur-base) var(--ds-ease); }

/* ============ 2. Sheets ============ */
.ui-v3 #cookieBanner { z-index: var(--ds-z-banner) !important; padding: 0 !important; }
.ui-v3 #cookieBanner > .container { max-width: none; padding: 0; }
.ui-v3 #cookieBanner .card {
  border: 0; border-top: 1px solid var(--ds-line); border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
  background: var(--ds-surface); box-shadow: var(--ds-shadow-3);
}
.ui-v3 #cookieBanner .card-body { padding: var(--ds-space-4) var(--ds-space-4) calc(var(--ds-space-4) + var(--ds-safe-bottom)); gap: var(--ds-space-3) !important; }
.ui-v3 #cookieBanner .fw-semibold { font-size: var(--ds-text-base); color: var(--ds-ink); }
.ui-v3 #cookieBanner .small { font-size: var(--ds-text-sm) !important; line-height: 1.5; color: var(--ds-ink-3) !important; }
.ui-v3 #cookieBanner .small a { color: var(--ds-brand-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ui-v3 #cookieBanner .card-body > .d-flex { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--ds-space-2) !important; width: 100%; }
.ui-v3 #cookieBanner .btn { min-height: var(--ds-tap); font-weight: 600; font-size: var(--ds-text-sm); border-radius: var(--ds-radius-md); white-space: normal; line-height: 1.2; }
.ui-v3 #cookieBanner #cookieAccept { background: var(--ds-brand); border-color: var(--ds-brand); color: var(--ds-on-brand); }
.ui-v3 #cookieBanner #cookieNecessary { color: var(--ds-brand-text); border-color: var(--ds-brand); background: var(--ds-surface); }
@media (min-width: 640px) {
  /* iPad and desktop: a floating card, not a full-width slab over the content */
  .ui-v3 #cookieBanner { left: 50% !important; right: auto !important; bottom: var(--ds-bottom-nav-h) !important; width: min(calc(100% - 32px), 880px); transform: translateX(-50%); margin-bottom: var(--ds-space-4); }
  .ui-v3 #cookieBanner .card { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-xl); }
  .ui-v3 #cookieBanner .card-body { padding: var(--ds-space-5); flex-direction: row !important; align-items: center !important; gap: var(--ds-space-5) !important; }
  .ui-v3 #cookieBanner .card-body > .d-flex { display: flex !important; width: auto; flex: none; }
  .ui-v3 #cookieBanner .btn { white-space: nowrap; padding-inline: var(--ds-space-4); }
}

.ui-v3 #tourWelcomePrompt { z-index: var(--ds-z-banner); bottom: calc(var(--ds-bottom-nav-h) + var(--ds-space-4)); right: var(--ds-space-4); width: min(420px, calc(100vw - 32px)); max-width: none; border-radius: var(--ds-radius-xl); }
.ui-v3 #tourWelcomePrompt .btn { min-height: var(--ds-tap); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
.ui-v3 #tourWelcomePrompt .d-flex.gap-2 { flex-wrap: wrap; }
.ui-v3 #tourWelcomePrompt .text-muted { color: var(--ds-ink-3) !important; }
@media (max-width: 639.98px) {
  .ui-v3 #tourWelcomePrompt { left: var(--ds-space-3); right: var(--ds-space-3); width: auto; bottom: calc(var(--ds-bottom-nav-h) + var(--ds-space-3)); }
  .ui-v3 #tourWelcomePrompt .d-flex.gap-2 .btn { flex: 1 1 auto; }
}
.ui-v3 #tourWelcomePrompt .tour-btn-close { min-width: var(--ds-tap); min-height: var(--ds-tap); display: inline-flex; align-items: center; justify-content: center; }

.ui-v3 #pwa-install-banner { z-index: var(--ds-z-banner); bottom: calc(var(--ds-bottom-nav-h) + var(--ds-space-4)); background: #ffffff; color: #0f172a; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ui-v3 #push-notification-banner { z-index: var(--ds-z-banner) !important; top: calc(var(--ds-safe-top) + 72px) !important; background: #ffffff !important; color: #0f172a !important; border: 1px solid rgba(123, 3, 252, 0.25) !important; }
.ui-v3 #push-notification-banner :is(.alert-heading, .push-banner-title) { color: #0f172a !important; font-weight: 700 !important; }
.ui-v3 #push-notification-banner :is(.text-muted, .push-banner-desc, p) { color: #334155 !important; }

/* ============ 3. One calm Share button ============ */
/* The nine-icon rail covered content on desktop and the guest invitation. Gone everywhere; a single Share
   button remains on the public marketing pages only (not in the host app, not on a guest's RSVP page). */
.ui-v3 #socialSidebar { display: none !important; }
.ui-v3 #mobileShareTrigger { display: none !important; }
.ui-v3:has([data-ui-zone="public"]) #mobileShareTrigger {
  display: flex !important; z-index: var(--ds-z-sticky); right: var(--ds-space-4); bottom: var(--ds-fab-bottom);
  width: 48px; height: 48px; box-shadow: var(--ds-shadow-2);
}
/* Back-to-top sits above it instead of on top of it */
.ui-v3 #backToTop { right: var(--ds-space-4); bottom: calc(var(--ds-fab-bottom) + 64px); width: var(--ds-tap) !important; height: var(--ds-tap) !important; z-index: var(--ds-z-sticky); }
.ui-v3:not(:has([data-ui-zone="public"])) #backToTop { bottom: var(--ds-fab-bottom); }

/* ============ 4. Solid header ============ */
.ui-v3 .navbar-glass {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom: 1px solid var(--ds-line) !important;
}
.ui-v3 .landing-nav-modern { background: #0c061d !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ui-v3 .navbar-glass .offcanvas { background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* main.css gives every <button> width:100%, which pushed the landing menu button onto a second row, centred under the logo. */
.ui-v3 .navbar .navbar-toggler { width: auto; flex: none; margin-left: auto; min-width: var(--ds-tap); min-height: var(--ds-tap); display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 1200px) { .ui-v3 .navbar.navbar-expand-xl .navbar-toggler { display: none; } }
/* Brand + bell + menu button must all fit a 320px phone with the menu button fully on screen */
@media (max-width: 767.98px) {
  .ui-v3 .navbar-glass .navbar-brand { max-width: calc(100% - 120px) !important; min-width: 0; }
  .ui-v3 .navbar-glass > .container-fluid { gap: var(--ds-space-2); padding-right: max(var(--ds-space-3), env(safe-area-inset-right, 0px)) !important; }
  .ui-v3 .navbar-glass .navbar-toggler { min-width: var(--ds-tap); min-height: var(--ds-tap); }
}

/* The host header is about 59px tall but the page reserved 90px, leaving a bare 31px band of page colour under it. */
.ui-v3:has(nav[data-ui-zone="host"]) { padding-top: 60px !important; }

/* ============ 5. Navigation that fits ============ */
/* Below 1200px the nav lives in the menu (Bootstrap xl switch done in the partials). From 1200px to 1279px the
   inline links need about 1,160px, so tighten them instead of letting the last link leave the screen. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .ui-v3 .navbar-glass .nav-link { padding-inline: .5rem; font-size: .8125rem; gap: .3rem; }
  .ui-v3 .navbar-glass .navbar-nav { gap: .125rem; }
  .ui-v3 .landing-nav-modern .landing-nav-link { padding-inline: .6rem; font-size: .875rem; }
  .ui-v3 .landing-nav-modern { padding-inline: .75rem !important; }
}

/* =====================================================================================================
 * STEP 2: public pages (Home, Explore, Features, FAQ, About, Login, Register)
 * Scope: any page that shows the public header (data-ui-zone="public"). Guest invitations keep their own fonts.
 * ===================================================================================================== */

/* ---- 6a. One typeface. Inter only (self-hosted); icon fonts are left alone. ---- */
.ui-v3:has([data-ui-zone="public"]), .ui-v3:has(.stitch-auth-container, .auth-container), .ui-v3:has([data-ui-zone="public"]) :is(section, main, header, footer, nav, article, aside, form, fieldset, legend, ul, ol, dl, dt, dd, option, h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, select, textarea, label, small, strong, em, td, th, summary, blockquote):not([class*="fa-"]):not([class*="bi-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.bi) {
  font-family: var(--ds-font) !important;
}
.ui-v3:has(.stitch-auth-container, .auth-container) :is(section, main, header, footer, nav, form, ul, li, h1, h2, h3, h4, p, a, span, div, button, input, label, small, strong):not([class*="bi-"]):not(.bi) { font-family: var(--ds-font) !important; }

/* ---- 6b. Header links: no default underline, 44px targets ---- */
.ui-v3 .landing-nav-modern a { text-decoration: none; }
.ui-v3 .landing-nav-modern .landing-nav-link { min-height: var(--ds-tap); display: inline-flex; align-items: center; padding-inline: .75rem; border-radius: var(--ds-radius-pill); transition: background-color var(--ds-dur-base) var(--ds-ease), color var(--ds-dur-base) var(--ds-ease); }
@media (hover: hover) { .ui-v3 .landing-nav-modern .landing-nav-link:hover { background: rgba(255, 255, 255, .08); } }
.ui-v3 .landing-nav-modern .landing-brand { min-height: var(--ds-tap); }
@media (min-width: 1200px) and (max-width: 1279.98px) { .ui-v3 .landing-nav-modern .landing-nav-link { padding-inline: .5rem; } }

/* ---- 6c. Footers: readable size, 44px link rows ---- */
.ui-v3 .landing-footer-modern .footer-links-list { gap: 0; }
.ui-v3 .landing-footer-modern .footer-links-list li { margin: 0; }
.ui-v3 .landing-footer-modern .footer-links-list a { display: inline-flex; align-items: center; min-height: var(--ds-tap); font-size: .9375rem; color: var(--ds-ink-3, #cbd5e1); }
.ui-v3 .landing-footer-modern a.text-muted { display: inline-flex; align-items: center; min-height: var(--ds-tap); padding-inline: .25rem; font-size: .875rem !important; color: #cbd5e1 !important; }
.ui-v3 .landing-footer-modern .text-muted:not(a) { color: #cbd5e1 !important; }
.ui-v3 .landing-footer-modern p.small { font-size: .875rem !important; }
.ui-v3 .managed-footer li > a { display: inline-flex; align-items: center; min-height: var(--ds-tap); }
.ui-v3 .managed-footer .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-tap); height: var(--ds-tap); }

/* ---- 6d. Phone tab bar labels and the install banner buttons ---- */
.ui-v3 .pp-bottom-nav__item span { font-size: .75rem; }
.ui-v3 #pwa-install-banner :is(.btn-pwa-install, .btn-pwa-close) { min-height: var(--ds-tap); display: inline-flex; align-items: center; justify-content: center; }

/* ---- 6e. Explore ---- */
/* main.css button{width:100%} stretched the category pill across the whole card image and out of it */
.ui-v3 .hub-media .type-pill { width: auto; max-width: calc(100% - 28px); min-height: 32px; display: inline-flex; align-items: center; }
.ui-v3 .hub-media .type-pill::after { content: ""; position: absolute; inset: -8px; } /* 48px hit area, same look */
.ui-v3 .date-chip .m { font-size: .75rem; }
.ui-v3 .host-avatar { font-size: .75rem; }

/* ---- 6f. Info pages (Features, FAQ, About, legal) join the dark marketing look ---- */
.ui-v3:has(.info-page-container) {
  background: radial-gradient(circle at 50% 0%, #2e1065 0%, #0c061d 60%) fixed, #0c061d;
  color: var(--ds-ink-3, #cbd5e1);
}
.ui-v3 .info-page-container { color: #cbd5e1; }
.ui-v3 .info-page-container .hero-section { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ui-v3 .info-page-container .hero-section h1 { background: linear-gradient(135deg, #c4a1ff, #f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem); line-height: 1.1; }
.ui-v3 .info-page-container .hero-section p { color: #cbd5e1; }
.ui-v3 .info-page-container .glass-content-card,
.ui-v3 .info-page-container .feature-card,
.ui-v3 .info-page-container .calc-card { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; box-shadow: var(--ds-shadow-1); -webkit-backdrop-filter: none; backdrop-filter: none; color: #cbd5e1; }
.ui-v3 .info-page-container .stat-pill { background: var(--ds-surface-2) !important; border: 1px solid var(--ds-line) !important; }
.ui-v3 .info-page-container .form-range { background: transparent; }
.ui-v3 .info-page-container .form-range::-webkit-slider-runnable-track { background-color: var(--ds-line-strong, #3b2d60) !important; height: 8px; border-radius: 4px; }
.ui-v3 .info-page-container .form-range::-webkit-slider-thumb { background-color: #c4a1ff !important; box-shadow: 0 0 12px rgba(196, 161, 255, 0.6) !important; }
.ui-v3 .info-page-container .form-range::-moz-range-track { background-color: var(--ds-line-strong, #3b2d60) !important; height: 8px; border-radius: 4px; }
.ui-v3 .info-page-container .form-range::-moz-range-thumb { background-color: #c4a1ff !important; box-shadow: 0 0 12px rgba(196, 161, 255, 0.6) !important; }
.ui-v3 .info-page-container :is(.form-control, .form-select) {
  background-color: var(--ds-surface-2) !important;
  border-color: var(--ds-line) !important;
  color: #f8fafc !important;
}
.ui-v3 .info-page-container :is(.form-control, .form-select):focus {
  border-color: var(--ds-brand-text, #c4a1ff) !important;
  box-shadow: 0 0 0 3px rgba(196, 161, 255, 0.25) !important;
}
.ui-v3 .info-page-container .input-group-text {
  background-color: var(--ds-surface-2) !important;
  border-color: var(--ds-line) !important;
  color: #cbd5e1 !important;
}

/* 🛡️ Olutobi Permanent Safeguard: Light Surface Shield against Dark-Mode Text Inversion */
.ui-v3 .surface-light,
.ui-v3 [data-surface="light"],
.ui-v3 .bg-warning-subtle,
.ui-v3 .bg-light-subtle {
  background-color: #ffffff !important;
  color: #0f172a !important;
}
.ui-v3 .surface-light :is(h1, h2, h3, h4, h5, h6, strong, b, .text-dark, .fw-bold, .h1, .h2, .h3, .h4, .h5, .h6),
.ui-v3 [data-surface="light"] :is(h1, h2, h3, h4, h5, h6, strong, b, .text-dark, .fw-bold, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: #0f172a !important;
}
.ui-v3 .surface-light :is(p, span, label, small, .text-muted, .text-secondary),
.ui-v3 [data-surface="light"] :is(p, span, label, small, .text-muted, .text-secondary) {
  color: #475569 !important;
}
.ui-v3 .info-page-container .glass-content-card:hover { transform: none; box-shadow: var(--ds-shadow-2); }
.ui-v3 .info-page-container :is(h1, h2, h3, h4, h5, h6):not(.hero-section h1), .ui-v3 .info-page-container .fw-700, .ui-v3 .info-page-container .fw-800, .ui-v3 .info-page-container strong { color: #f8fafc; }
.ui-v3 .info-page-container .text-muted, .ui-v3 .info-page-container .small.text-muted, .ui-v3 .info-page-container p { color: #cbd5e1 !important; }
.ui-v3 .info-page-container .text-dark, .ui-v3 .info-page-container .text-body { color: #f8fafc !important; }
.ui-v3 .info-page-container :is(.bg-light, .bg-white) { background: var(--ds-surface-2) !important; color: #e2e8f0; border-color: var(--ds-line) !important; }
.ui-v3 .info-page-container :is(.bg-primary.bg-opacity-10, .bg-dark.bg-opacity-10, .bg-success.bg-opacity-10, .bg-warning.bg-opacity-10, .bg-danger.bg-opacity-10, .bg-info.bg-opacity-10) { background: rgba(196, 161, 255, .14) !important; }
.ui-v3 .info-page-container :is(.text-primary) { color: #c4a1ff !important; }
.ui-v3 .info-page-container :is(.text-success) { color: #6ee7b7 !important; }
.ui-v3 .info-page-container .border, .ui-v3 .info-page-container .border-start { border-color: var(--ds-line) !important; }
.ui-v3 .info-page-container .legal-section-title { color: #f8fafc; }
.ui-v3 .info-page-container .badge.bg-light { background: rgba(196, 161, 255, .16) !important; color: #e9d5ff !important; border-color: rgba(196, 161, 255, .35) !important; }
.ui-v3 .info-page-container .accordion-item, .ui-v3 .info-page-container .accordion-button { background: var(--ds-surface); color: #f8fafc; border-color: var(--ds-line); }
.ui-v3 .info-page-container .accordion-button:not(.collapsed) { background: var(--ds-surface-2); color: #f8fafc; box-shadow: none; }
.ui-v3 .info-page-container .accordion-button::after { filter: invert(1) grayscale(1) brightness(2); }
.ui-v3 .info-page-container .accordion-button { min-height: 56px; }
.ui-v3 .info-page-container a:not(.btn):not(.nav-link) { color: #c4a1ff; }
.ui-v3 .info-page-container .btn-outline-primary { color: #e9d5ff; border-color: #c4a1ff; }
.ui-v3 .info-page-container .btn { min-height: var(--ds-tap); display: inline-flex; align-items: center; justify-content: center; width: auto; }

/* ---- 6g. Sign-in and sign-up ---- */
.ui-v3 .stitch-link, .ui-v3 .auth-link { display: inline-flex; align-items: center; min-height: var(--ds-tap); padding-inline: .125rem; font-weight: 700; }
.ui-v3 .terms-text a { display: inline-block; padding-block: 12px; }
.ui-v3 .landing-footer-modern a.text-muted { min-width: var(--ds-tap); justify-content: center; }

/* Info pages use the dark theme tokens (the same values as .ds-dark in ui-foundation.css) */
.ui-v3:has(.info-page-container),
body:has(.info-page-container),
.info-page-container {
  --ds-bg: #0b0714; --ds-surface: #161026; --ds-surface-2: #1f1736; --ds-ink: #f8fafc; --ds-ink-2: #e2e8f0; --ds-ink-3: #cbd5e1;
  --ds-line: #2c2347; --ds-line-strong: #7c6fa3; --ds-brand-text: #c4a1ff; --ds-ring: #c4a1ff; color-scheme: dark;
}
body:has(.info-page-container) {
  background: radial-gradient(circle at 50% 0%, #2e1065 0%, #0c061d 60%) fixed, #0c061d !important;
  color: #cbd5e1 !important;
}
.ui-v3:has(.info-page-container) .app-main-container,
body:has(.info-page-container) .app-main-container,
.info-page-container .container,
.info-page-container .container-fluid {
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
  overflow-x: visible !important;
}
.info-page-container section {
  min-height: 0 !important;
}
.ui-v3:has(.info-page-container) .app-main-container > .info-page-container { padding-top: 6.5rem; }

/* Sign-in / sign-up: one brand mark, one button style, one checkbox style */
body.ui-v3 .logo-container { display: flex !important; justify-content: center; margin: 1.25rem 0 0 !important; }
body.ui-v3 .logo-container a { display: inline-flex; min-width: var(--ds-tap); min-height: var(--ds-tap); align-items: center; justify-content: center; }
body.ui-v3 .form__login__logo { width: 56px !important; height: 56px !important; max-width: 56px; border-radius: 14px; object-fit: cover; }
.ui-v3 .stitch-auth-container { margin-top: 1rem; }
.ui-v3 .stitch-auth-container #password_help { display: none; } /* "Please enter a strong password" belongs on sign-up, not sign-in */
.ui-v3 .stitch-submit { background: var(--ds-brand); min-height: 48px; border-radius: var(--ds-radius-md); }
@media (hover: hover) { .ui-v3 .stitch-submit:hover { background: var(--ds-brand-hover); } }
.ui-v3 :is(.stitch-social-btn, .auth-btn) { min-height: 48px; border-radius: var(--ds-radius-md); }
.ui-v3 .auth-btn:is(.btn-google, .btn-facebook) { background: #18181f; color: #ffffff; border-color: #18181f; }
.ui-v3 label.checkbox, .ui-v3 .stitch-checkbox-group { display: flex; align-items: center; gap: .75rem; min-height: var(--ds-tap); font-size: .9375rem; font-weight: 500; color: #374151; cursor: pointer; text-align: left; }
.ui-v3 label.checkbox + br { display: none; }
.ui-v3 :is(#showPassword, .stitch-checkbox) { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; display: grid; place-content: center; background: #fff; border: 2px solid var(--ds-line-strong); border-radius: 6px; cursor: pointer; }
.ui-v3 :is(#showPassword, .stitch-checkbox)::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform var(--ds-dur-fast) var(--ds-ease); }
.ui-v3 :is(#showPassword, .stitch-checkbox):checked { background: var(--ds-brand); border-color: var(--ds-brand); }
.ui-v3 :is(#showPassword, .stitch-checkbox):checked::after { transform: rotate(-45deg) scale(1); }
.ui-v3 :is(#showPassword, .stitch-checkbox):focus-visible { outline: 2px solid var(--ds-brand); outline-offset: 2px; }

/* Bootstrap's grey .text-muted is 3.3:1 on the dark pages; lift it to AA */
.ui-v3:has(.hero-wrapper, .hub-title) .text-muted, .ui-v3:has(.hero-wrapper, .hub-title) .small.text-muted { color: #cbd5e1 !important; }

/* Contrast: measured with axe-core 4.10; every pair below was under 4.5:1 */
.ui-v3 .footer-bottom-bar > div:first-child, .ui-v3 .footer-bottom-bar > div:first-child * { color: #cbd5e1 !important; }
.ui-v3 #pwa-install-banner #pwa-banner-close { color: #475569; }
.ui-v3 .pp-bottom-nav__item:not(.active) span { color: #475569; }
.ui-v3 :is(.stitch-divider, .divider) span { color: #4b5563; }
.ui-v3 :is(.stitch-link, .auth-link) { color: var(--ds-brand-text); }
.ui-v3 .terms-text, .ui-v3 .terms-text a { color: #4b5563; }
.ui-v3 .info-page-container .blockquote-footer { color: #cbd5e1; }

/* Home: the "Looking for public celebrations?" link is a stand-alone target */
.ui-v3 .hero-wrapper a.text-decoration-none { display: inline-flex; align-items: center; min-height: var(--ds-tap); }

/* ---- Features page graphics (illustrations, labelled as such) ---- */
.ui-v3 .feature-figure { margin: 0; display: flex; flex-direction: column; justify-content: center; gap: .75rem; }
.ui-v3 .feature-figure figcaption { font-size: .875rem; color: #cbd5e1; text-align: center; }
.ui-v3 .feature-graphic { width: 100%; height: auto; display: block; }
.ui-v3 .feature-wall { border: 2px solid var(--ds-line); border-radius: 22px; background: var(--ds-surface-2); overflow: hidden; }
.ui-v3 .feature-wall__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--ds-line); color: #f8fafc; font-size: .875rem; }
.ui-v3 .feature-wall__bar span { width: 10px; height: 10px; border-radius: 50%; background: #ec4899; }
.ui-v3 .feature-wall__bar span:nth-child(2) { background: #c4a1ff; }
.ui-v3 .feature-wall__bar span:nth-child(3) { background: #7c3aed; }
.ui-v3 .feature-wall__bar strong { margin-left: auto; font-weight: 700; letter-spacing: .02em; }
.ui-v3 .feature-wall__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(88px, auto); gap: 10px; padding: 14px; }
.ui-v3 .feature-wall__msg { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(196, 161, 255, .12); border: 1px solid rgba(196, 161, 255, .3); color: #f8fafc; font-weight: 600; font-size: .875rem; line-height: 1.3; }
.ui-v3 .feature-wall__msg i { color: #f0abfc; flex: none; }
.ui-v3 .feature-wall__msg--alt { background: rgba(236, 72, 153, .14); border-color: rgba(236, 72, 153, .35); }
.ui-v3 .feature-wall__photo { display: grid; place-items: center; border-radius: 14px; color: rgba(255, 255, 255, .9); font-size: 1.5rem; }
.ui-v3 .feature-wall__photo--a { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.ui-v3 .feature-wall__photo--b { background: linear-gradient(135deg, #4c1d95, #7c3aed); }
.ui-v3 .feature-wall__photo--c { background: linear-gradient(135deg, #ec4899, #f59e0b); }
@media (max-width: 575.98px) { .ui-v3 .feature-wall__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Info pages carry the brand colours (purple and pink), not Bootstrap blue and gold ---- */
.ui-v3 .info-page-container :is(.progress-bar, .bg-primary:not([class*="bg-opacity"])) { background: var(--ds-brand-gradient) !important; }
.ui-v3 .info-page-container .border-primary { border-color: #c4a1ff !important; }
.ui-v3 .info-page-container .feature-icon { background: rgba(196, 161, 255, .14); color: #c4a1ff; }
.ui-v3 .info-page-container .feature-card:hover { border-color: #c4a1ff; transform: none; }
.ui-v3 .info-page-container .step-number { background: var(--ds-brand-gradient); }
.ui-v3 .info-page-container .legal-section-title::before { background: var(--ds-brand-gradient); }
.ui-v3 .info-page-container :is(.text-warning, .text-info) { color: #f0abfc !important; }
.ui-v3 .info-page-container .text-danger.fs-4 { color: #f472b6 !important; }
.ui-v3 .info-page-container .fs-4.text-success { color: #c4a1ff !important; }