/* PayScope UK brand system */
:root {
  --ps-navy: #0F2A44;
  --ps-blue: #0084BD;
  --ps-blue-dark: #006C9A;
  --ps-teal: #2FA4A9;
  --ps-slate: #5F6B7A;
  --ps-light-grey: #D1D9E0;
  --ps-off-white: #F7F9FC;
  --ps-white: #FFFFFF;
  --ps-ink: #142126;

  --navy: var(--ps-navy);
  --lens-blue: var(--ps-blue);
  --soft-teal: var(--ps-teal);
  --slate: var(--ps-slate);
  --light-grey: var(--ps-light-grey);
  --off-white: var(--ps-off-white);
  --brand: var(--ps-blue);
  --brand-600: var(--ps-blue-dark);
  --brand-dark: var(--ps-navy);
  --ink: var(--ps-navy);
  --ink-2: var(--ps-slate);
  --muted: var(--ps-off-white);
  --card: var(--ps-white);
  --ring: rgba(0, 132, 189, 0.24);
}

html, body { background: var(--ps-off-white); color: var(--ps-slate); }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.ps-brand-lockup { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; text-decoration: none; }
.ps-brand-mark { width: 2.35rem; height: 2.35rem; flex: 0 0 auto; display: inline-block; background: url('/static/branding/payscope-icon-transparent.png') center / contain no-repeat; aspect-ratio: 1 / 1; }
.ps-brand-mark--large { width: 5rem; height: 5rem; }
.ps-brand-mark--tile { width: 3.25rem; height: 3.25rem; flex: 0 0 auto; display: inline-block; border-radius: 1.25rem; background-color: var(--ps-blue); background: url('/static/branding/payscope-icon-white-on-blue.png') center / contain no-repeat; aspect-ratio: 1 / 1; }
.ps-brand-img { display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; }
.ps-brand-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.ps-brand-name { color: var(--ps-white); font-weight: 800; letter-spacing: 0.02em; font-size: 0.98rem; }
.ps-brand-tagline { color: rgba(255,255,255,0.72); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.12rem; }

.ps-topbar { background: linear-gradient(90deg, var(--ps-navy), #123654); border-bottom: 1px solid rgba(209,217,224,0.22); box-shadow: 0 10px 28px rgba(15,42,68,0.16); }
.ps-app-subnav { background: rgba(247,249,252,0.96); border-bottom: 1px solid var(--ps-light-grey); backdrop-filter: blur(12px); }

.nav-chip { color: var(--ps-white) !important; border-color: var(--ps-blue) !important; background: var(--ps-blue) !important; box-shadow: 0 10px 22px rgba(0,132,189,0.18) !important; }
.nav-chip:hover { background: var(--ps-blue-dark) !important; border-color: var(--ps-blue-dark) !important; color: var(--ps-white) !important; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,132,189,0.24) !important; }
.nav-chip--active { background: var(--ps-navy) !important; border-color: var(--ps-navy) !important; color: var(--ps-white) !important; box-shadow: 0 0 0 3px rgba(0,132,189,0.18), 0 14px 28px rgba(15,42,68,0.18) !important; }

.btn-primary, .ps-btn-primary { background: var(--ps-blue) !important; color: var(--ps-white) !important; border-color: var(--ps-blue) !important; box-shadow: 0 14px 30px rgba(0,132,189,0.24) !important; }
.btn-primary:hover, .ps-btn-primary:hover { background: var(--ps-blue-dark) !important; border-color: var(--ps-blue-dark) !important; }
.btn-secondary, .ps-btn-secondary { background: var(--ps-white) !important; color: var(--ps-blue) !important; border-color: var(--ps-light-grey) !important; }

.card, .ps-card { background: var(--ps-white) !important; border: 1px solid var(--ps-light-grey) !important; box-shadow: 0 16px 40px rgba(15,42,68,0.07) !important; }
.card-hover:hover, .ps-card-hover:hover { border-color: rgba(0,132,189,0.45) !important; box-shadow: 0 22px 54px rgba(15,42,68,0.12) !important; }

.ps-kicker { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ps-blue); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; }
.ps-kicker::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: var(--ps-teal); }
.ps-page-shell { background: radial-gradient(circle at 8% 0%, rgba(0,132,189,0.10), transparent 26rem), radial-gradient(circle at 92% 10%, rgba(47,164,169,0.10), transparent 24rem), var(--ps-off-white); }
.hero-shell { background: radial-gradient(circle at top left, rgba(0,132,189,0.20), transparent 54%), radial-gradient(circle at bottom right, rgba(47,164,169,0.18), transparent 58%), var(--ps-navy) !important; border: 1px solid rgba(209,217,224,0.28) !important; box-shadow: 0 24px 70px rgba(15,42,68,0.28) !important; }
.ps-hero-logo-card { display: inline-flex; align-items: center; justify-content: center; width: 6.5rem; height: 6.5rem; border-radius: 2rem; background: var(--ps-white); border: 1px solid rgba(209,217,224,0.8); box-shadow: 0 24px 54px rgba(15,42,68,0.16); overflow: hidden; }
.ps-hero-logo-card .ps-brand-mark { width: 4.8rem; height: 4.8rem; }

.ps-data-accent { color: var(--ps-teal) !important; }
.ps-navy-text { color: var(--ps-navy) !important; }
.ps-muted-text { color: var(--ps-slate) !important; }
.ps-border { border-color: var(--ps-light-grey) !important; }
.ps-bg { background: var(--ps-off-white) !important; }
.ps-surface { background: var(--ps-white) !important; }

input:focus, select:focus, textarea:focus { border-color: var(--ps-blue) !important; box-shadow: 0 0 0 3px rgba(0,132,189,0.22) !important; }