/* Brand skin for the Identity pages, which use Bootstrap markup. Palette and type from the Youco brand guidelines. */
:root {
  --bs-body-bg: #F4EFE3;
  --bs-body-color: #1B1F1C;
  --bs-body-font-family: "Jost", Arial, sans-serif;
  --bs-border-radius: 2px;
  --bs-border-radius-lg: 2px;
  --bs-border-radius-sm: 2px;
  --bs-border-color: #D9D0BE;
  --bs-link-color: #2A4B3D;
  --bs-link-hover-color: #1B1F1C;
  --bs-link-color-rgb: 42, 75, 61;
  --bs-link-hover-color-rgb: 27, 31, 28;
  --bs-primary: #2A4B3D;
  --bs-primary-rgb: 42, 75, 61;
}
body { background: #F4EFE3; font-family: "Jost", Arial, sans-serif; }
h1, h2, h3, h4 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
hr { border-color: #B8925A; opacity: 1; }
.btn { border-radius: 2px; font-weight: 500; }
.btn-primary { --bs-btn-bg: #2A4B3D; --bs-btn-border-color: #2A4B3D; --bs-btn-hover-bg: #1F3a2e; --bs-btn-hover-border-color: #1F3a2e; --bs-btn-active-bg: #1B1F1C; --bs-btn-color: #F4EFE3; --bs-btn-hover-color: #F4EFE3; }
.btn-outline-primary { --bs-btn-color: #2A4B3D; --bs-btn-border-color: #2A4B3D; --bs-btn-hover-bg: #2A4B3D; --bs-btn-hover-border-color: #2A4B3D; --bs-btn-hover-color: #F4EFE3; }
.form-control, .form-select { border-color: #D9D0BE; border-radius: 2px; background: #FBF8F1; }
.form-control:focus { border-color: #2A4B3D; box-shadow: none; }
.form-label { font-size: .82rem; font-weight: 500; color: #5C625D; }
.form-check-input:checked { background-color: #2A4B3D; border-color: #2A4B3D; }
.alert { border-radius: 2px; }
.nav-pills .nav-link.active { background: #2A4B3D; }

.account-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: max(28px, env(safe-area-inset-top, 0px)) 16px 40px; gap: 22px; }
.account-brand { width: 100%; max-width: 520px; background: #2A4B3D; padding: 28px 24px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: inset 0 0 0 5px #2A4B3D, inset 0 0 0 6px #B8925A; }
.account-brand img { height: 40px; width: auto; display: block; }
.descriptor { display: flex; align-items: center; gap: 10px; color: #F4EFE3; font-size: .66rem; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; }
.descriptor::before, .descriptor::after { content: ""; width: 14px; height: 1px; background: #B8925A; }
.account-card { width: 100%; max-width: 520px; background: #FBF8F1; border: 1px solid #D9D0BE; padding: 28px 24px; }
.account-card h1 { font-size: 1.7rem; margin-bottom: 4px; }
.account-lead { color: #5C625D; margin-bottom: 18px; }
.account-divider { display: flex; align-items: center; gap: 12px; color: #5C625D; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin: 18px 0; }
.account-divider::before, .account-divider::after { content: ""; flex: 1; height: 1px; background: #D9D0BE; }
.account-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: .9rem; }
.account-note { color: #5C625D; font-size: .9rem; margin: 0; }
.btn-provider { padding: 10px; }
.account-tagline { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; color: #2A4B3D; margin: 0; }
.account-card .row { --bs-gutter-x: 1rem; }
.account-card .col-lg-3, .account-card .col-lg-9, .account-card .col-lg-6, .account-card .col-md-4, .account-card .col-md-6, .account-card .col-xl-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }

/* FocusOnNavigate moves focus to the h1 for screen readers; no visible ring needed on a heading */
h1:focus, h1:focus-visible { outline: none; }