/* =============================================================
   CompanyInformation.com — Master Stylesheet
   Version 1.0
   Design system: Navy #0B1F3A + Electric Blue #2DA5D8
   Typeface: Inter (Google Fonts)
   Visual tier: Experian / Creditsafe
   ============================================================= */

/* ── 1. GOOGLE FONTS ──────────────────────────────────────── */
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
*/
/* ── 2. CSS CUSTOM PROPERTIES ─────────────────────────────── */
:root {
  /* Brand colours */
  --navy:          #0B1F3A;
  --navy-mid:      #1A3A5C;
  --navy-light:    #243d5c;
  --blue:          #2DA5D8;
  --blue-dark:     #1A8BBF;
  --blue-light:    #E6F6FD;
  --blue-border:   rgba(45,165,216,0.3);

  /* Neutral palette */
  --white:         #FFFFFF;
  --near-black:    #0F172A;
  --gray-900:      #0F172A;
  --gray-700:      #334155;
  --gray-600:      #475569;
  --gray-500:      #64748B;
  --gray-400:      #94A3B8;
  --gray-200:      #E2E8F0;
  --gray-100:      #F1F5F9;
  --gray-50:       #F8FAFC;

  /* Risk indicator colours */
  --risk-low-bg:   #DCFCE7;
  --risk-low-text: #166534;
  --risk-med-bg:   #FEF3C7;
  --risk-med-text: #92400E;
  --risk-high-bg:  #FECACA;
  --risk-high-text:#991B1B;

  /* Status colours */
  --green:         #16A34A;
  --amber:         #D97706;
  --red:           #DC2626;

  /* Typography */
  --font:          'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Sizing */
  --max-width:     1200px;
  --nav-height:    60px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:     0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

  /* Transitions */
  --transition:    150ms ease;
  --transition-md: 250ms ease;
}

/* ── 3. RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  overflow-wrap: break-word;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--near-black);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-dark); }
ul, ol { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font); }

/* ── 4. TYPOGRAPHY SCALE ──────────────────────────────────── */
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

h1, .h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--navy);
}

h2, .h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--navy);
}

h3, .h3 {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
}

h4, .h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.text-sm   { font-size: 0.875rem; }
.text-xs   { font-size: 0.75rem; }
.text-lg   { font-size: 1.125rem; }
.text-muted { color: var(--gray-500); }
.text-white { color: var(--white); }
.text-blue  { color: var(--blue); }
.text-navy  { color: var(--navy); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold  { font-weight: 700; }

/* ── 5. LAYOUT UTILITIES ──────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.container--narrow {
  max-width: 860px;
}

.section {
  padding: 4rem 0;
}

.section--lg {
  padding: 5rem 0;
}

.section--sm {
  padding: 2.5rem 0;
}

/* Grid system */
.grid { display: grid; }
.grid--2 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Flexbox utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* Spacing */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ── 6. NAVIGATION ─────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  height: var(--nav-height);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.nav__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2rem;
}

.nav__logo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav__logo span {
  color: var(--blue);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.nav__link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.nav__link.is-active {
  color: var(--white);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Client login pill — logged-out state */
.nav__login {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--white);
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  transition: background var(--transition), border-color var(--transition);
}

.nav__login:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}

.nav__login svg {
  width: 14px;
  height: 14px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Account dropdown — logged-in state */
.nav__account {
  position: relative;
}

.nav__account-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--white);
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  transition: background var(--transition);
}

.nav__account-btn:hover { background: rgba(255,255,255,0.12); }

.nav__account-btn svg {
  width: 12px;
  height: 12px;
  stroke: rgba(255,255,255,0.6);
  fill: none;
  stroke-width: 2;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  overflow: hidden;
  display: none;
}

.nav__account:hover .nav__dropdown,
.nav__account:focus-within .nav__dropdown {
  display: block;
}

.nav__dropdown-link {
  display: block;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  transition: background var(--transition), color var(--transition);
}

.nav__dropdown-link:hover {
  background: var(--gray-100);
  color: var(--navy);
}

.nav__dropdown-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 0.25rem 0;
}

.nav__dropdown-signout {
  color: var(--red);
}

.nav__dropdown-signout:hover {
  background: #FEF2F2;
  color: var(--red);
}

/* Get a report button */
.nav__cta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--white);
  background: var(--blue);
  padding: 0.4375rem 1rem;
  border-radius: var(--radius-md);
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}

.nav__cta:hover {
  background: var(--blue-dark);
  color: var(--white);
  transform: translateY(-1px);
}

/* Mobile nav toggle */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  margin-left: auto;
}

.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition-md), opacity var(--transition);
}

/* ── 7. RETURNING CLIENT BANNER (homepage only) ────────────── */
.client-banner {
  background: var(--navy-mid);
  border-bottom: 1px solid var(--blue-border);
  padding: 0.5rem 0;
}

.client-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.client-banner__text {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
}

.client-banner__text strong {
  color: var(--white);
  font-weight: 600;
}

.client-banner__btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--white);
  background: var(--blue);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition);
}

.client-banner__btn:hover {
  background: var(--blue-dark);
  color: var(--white);
}

.client-banner__btn svg {
  width: 13px;
  height: 13px;
  stroke: var(--white);
  fill: none;
  stroke-width: 2;
}

/* ── 8. HERO ────────────────────────────────────────────────── */
.hero {
  background: var(--navy);
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}

/* Subtle geometric texture */
.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,165,216,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
  position: relative;
}

.hero__eyebrow {
  margin-bottom: 0.875rem;
}

.hero__heading {
  color: var(--white);
  margin-bottom: 1rem;
}

.hero__heading em {
  color: var(--blue);
  font-style: normal;
}

.hero__subheading {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 2rem;
}

.hero__stats {
  display: flex;
  gap: 2rem;
}

.hero__stat {
  border-left: 2px solid var(--blue);
  padding-left: 0.875rem;
}

.hero__stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.hero__stat-label {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ── 9. SEARCH CARD ─────────────────────────────────────────── */
.search-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
}

.search-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.125rem;
}

.search-card__field {
  margin-bottom: 0.875rem;
}

.search-card__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  margin-bottom: 0.375rem;
}

.search-card__select,
.search-card__input {
  width: 100%;
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--navy);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.search-card__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.search-card__select:focus,
.search-card__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(45,165,216,0.12);
}

.search-card__btn {
  width: 100%;
  padding: 0.6875rem 1rem;
  background: var(--navy);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: background var(--transition), transform var(--transition);
  margin-top: 0.25rem;
  letter-spacing: 0.01em;
}

.search-card__btn:hover {
  background: var(--navy-mid);
  transform: translateY(-1px);
}

.search-card__login {
  text-align: center;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.search-card__login a {
  color: var(--blue);
  font-weight: 500;
}

/* ── 10. TRUST BAR ──────────────────────────────────────────── */
.trust-bar {
  background: #0D2444;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0.625rem 0;
}

.trust-bar__inner {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  padding: 0.25rem 1.5rem 0.25rem 0;
  font-weight: 400;
}

.trust-bar__item:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.1);
  margin-right: 1.5rem;
}

.trust-bar__dot {
  width: 5px;
  height: 5px;
  background: var(--blue);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── 11. SECTION HEADERS ────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.section-header__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.section-header__sub {
  font-size: 0.8125rem;
  color: var(--gray-500);
  white-space: nowrap;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 0;
}

/* ── 12. COUNTRY CARDS ──────────────────────────────────────── */
.country-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.country-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  display: block;
}

.country-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.country-card__flag {
  font-size: 1.375rem;
  margin-bottom: 0.375rem;
  line-height: 1;
}

.country-card__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.125rem;
}

.country-card__type {
  font-size: 0.6875rem;
  color: var(--gray-500);
  margin-bottom: 0.375rem;
}

.country-card__badge {
  display: inline-flex;
  align-items: center;
  background: var(--blue-light);
  color: #1A7FA0;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── 13. FEATURE CARDS ──────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.375rem;
  transition: box-shadow var(--transition-md), transform var(--transition-md);
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--blue-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
  flex-shrink: 0;
}

.feature-card__icon svg {
  width: 1rem;
  height: 1rem;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
}

.feature-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.375rem;
}

.feature-card__body {
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ── 14. BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius-md);
  padding: 0.6875rem 1.5rem;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--blue);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--blue-dark);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(45,165,216,0.35);
}

.btn--navy {
  background: var(--navy);
  color: var(--white);
}
.btn--navy:hover {
  background: var(--navy-mid);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.btn--outline:hover {
  background: var(--blue-light);
  color: var(--blue-dark);
}

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
}

.btn--sm {
  font-size: 0.8125rem;
  padding: 0.4375rem 0.875rem;
}

.btn--lg {
  font-size: 1rem;
  padding: 0.875rem 2rem;
}

.btn--full { width: 100%; }

.btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── 15. FORMS ──────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.375rem;
}

.form-label--req::after {
  content: ' *';
  color: var(--red);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--near-black);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(45,165,216,0.12);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--gray-400);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
}

.form-textarea { resize: vertical; min-height: 120px; }

.form-hint {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}

.form-error {
  font-size: 0.75rem;
  color: var(--red);
  margin-top: 0.25rem;
}

/* Radio cards (used in Add Credits) */
.radio-card {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.radio-card:has(input:checked),
.radio-card.is-selected {
  border-color: var(--blue);
  background: var(--blue-light);
}

/* ── 16. CARDS (generic) ────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.card--navy {
  background: var(--navy);
  border-color: transparent;
}

.card--blue-tint {
  background: var(--blue-light);
  border-color: rgba(45,165,216,0.2);
}

/* ── 17. BADGES & PILLS ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge--blue { background: var(--blue-light); color: #1A7FA0; }
.badge--green { background: var(--risk-low-bg); color: var(--risk-low-text); }
.badge--amber { background: var(--risk-med-bg); color: var(--risk-med-text); }
.badge--red { background: var(--risk-high-bg); color: var(--risk-high-text); }
.badge--navy { background: rgba(11,31,58,0.1); color: var(--navy); }

/* Risk indicator badges */
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.risk-low  { background: var(--risk-low-bg);  color: var(--risk-low-text); }
.risk-medium { background: var(--risk-med-bg); color: var(--risk-med-text); }
.risk-high { background: var(--risk-high-bg); color: var(--risk-high-text); }

/* ── 18. TABLES ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -- Responsive table patterns (site-wide toolkit) ---------------------
   Two reusable options for wide / multi-column tables on small screens:
   - .table-wrap   : wrap a <table> in <div class="table-wrap"> for a
                     horizontal-scroll container. Best for numeric /
                     comparison tables (e.g. financial statements).
   - .table--stack : add to a <table> to collapse each row into a labelled
                     card on mobile. Best for record / list tables (e.g.
                     report history). REQUIRES each data <td> to carry
                     data-label="Column heading".
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .table--stack thead {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .table--stack tr {
    display: block; background: var(--white);
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    padding: 0.5rem 1rem; margin-bottom: 0.75rem;
  }
  .table--stack td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: 0.4rem 0; border: 0; text-align: right;
  }
  .table--stack td + td { border-top: 1px solid var(--gray-100); }
  .table--stack td[data-label]::before {
    content: attr(data-label); font-weight: 600; color: var(--gray-600);
    text-align: left; white-space: nowrap;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table--report {
  width: 100%;
}

.table--report th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 0.75rem;
  text-align: left;
  padding: 0.625rem 0.875rem;
  white-space: nowrap;
}

.table--report td {
  padding: 0.5625rem 0.875rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--near-black);
  vertical-align: top;
}

.table--report tr:nth-child(even) td { background: var(--gray-50); }
.table--report tr:hover td { background: var(--blue-light); }

/* Report table specific classes (server-rendered, restyled via CSS) */
.reporttable { width: 100%; border-collapse: collapse; }
.reporttable td, .reporttable th { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--gray-100); font-size: 0.875rem; }
.reporttable .dataheadleft { font-weight: 600; color: var(--navy); background: var(--gray-50); width: 220px; vertical-align: top;  }
.reporttable .data { color: var(--near-black); }
.reporttable .dataheadright { font-weight: 600; color: var(--navy); text-align: right; }
.reporttable .sectionSubHeading td { background: var(--navy); color: var(--white); font-weight: 600; font-size: 0.8125rem; }
.reporttable .pagetitle h4 { font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.reporttable td[align="right"] { text-align: right; font-variant-numeric: tabular-nums; }

.CARSectionHead {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 1.25rem 0 0.5rem;
  border-left: 3px solid var(--blue);
  padding-left: 0.75rem;
  margin: 1.25rem 0 0.75rem;
}

.sectionSubHeading { background: var(--navy); }
.sectionSubHeading td, .sectionSubHeading th {text-align:left; color: var(--white) !important; font-weight: 600 !important; }
.sectionSubSection { margin-bottom: 1.5rem; }

/* Grid view (report history) */
.gridview_head th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.625rem 0.75rem;
  text-align: left;
}

/* ── 19. SIDEBAR ────────────────────────────────────────────── */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 2rem;
  align-items: start;
}

.page-layout--full {
  grid-template-columns: 1fr;
}

.sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
}

.sidebar__card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}

.sidebar__card-header {
  background: var(--navy);
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar__card-body { padding: 1rem; }

.sidebar__country-link {
  display: block;
  font-size: 0.8125rem;
  color: var(--gray-700);
  padding: 0.25rem 0;
  transition: color var(--transition);
}

.sidebar__country-link:hover { color: var(--blue); }

.sidebar__view-all {
  display: block;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blue);
}

/* Account sidebar (logged-in) */
.account-sidebar__balance {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.account-sidebar__label {
  font-size: 0.75rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── 20. BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gray-500);
  padding: 0.875rem 0;
}

.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--blue); }

.breadcrumb__sep {
  color: var(--gray-400);
  font-size: 0.625rem;
}

.breadcrumb__current { color: var(--navy); font-weight: 500; }

/* ── 21. COUNTRY PAGE SPECIFIC ──────────────────────────────── */
.country-hero {
  background: var(--navy);
  padding: 2.5rem 0;
}

.country-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
}

.country-hero__heading { color: var(--white); margin-bottom: 0.625rem; }
.country-hero__sub { color: rgba(255,255,255,0.75); font-size: 1.0625rem; margin-bottom: 0; }

.country-fact-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.country-fact-card__row {
  display: flex;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.875rem;
  gap: 1rem;
}

.country-fact-card__row:last-child { border-bottom: none; }

.country-fact-card__key {
  font-weight: 600;
  color: var(--navy);
  min-width: 130px;
  flex-shrink: 0;
}

.country-fact-card__val { color: var(--gray-700); }

/* Country report pages — sub-section headings inside the 4-block feature grid.
   On desktop the blocks render as a 2x2 grid, so the row-2 headings sit just
   below row-1's last bullets and look cramped. On mobile all 4 stack and
   headings 2–4 are cramped under the previous list. This rule adds a small
   top margin to every sub-heading except the first one, fixing both layouts. */
.card .grid--2 > div:not(:first-child) h3.h4 { margin-top: 0.75rem; }

/* Country report pages — align fact-card rows with the title block above them.
   The card's title block uses 2rem horizontal padding (consistent with other
   boxes), but .country-fact-card__row defaults to 1rem. This override matches
   the row padding to the title block so keys/values align with the heading.
   Scoped to .card so the standalone fact-card layout is unaffected. */
.card .country-fact-card__row { padding-left: 2rem; padding-right: 2rem; }

/* ── 22. REPORT VIEW ────────────────────────────────────────── */
.report-header {
  background: var(--navy);
  padding: 1.5rem 0;
  margin-bottom: 2rem;
}

.report-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.report-header__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition);
}

.report-header__back:hover { color: var(--white); }

.report-header__back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.report-header__company {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
}

.report-header__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.report-section { margin-bottom: 2rem; }

/* ── 23. FOOTER ─────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  padding: 1rem 0;
  margin-top: auto;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;            /* allow copy + links to stack when space is tight */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer__copy {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;            /* wrap between links, never inside them */
  gap: 0.5rem 1.25rem;
}

.footer__link {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
  transition: color var(--transition);
  white-space: nowrap;        /* keep each link on one line (overrides inherited overflow-wrap) */
}

.footer__link:hover { color: rgba(255,255,255,0.75); }

/* ── 24. ALERTS & NOTICES ───────────────────────────────────── */
.alert {
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.alert--info    { background: var(--blue-light); color: #1A5276; border: 1px solid rgba(45,165,216,0.25); }
.alert--success { background: var(--risk-low-bg); color: var(--risk-low-text); }
.alert--warning { background: var(--risk-med-bg); color: var(--risk-med-text); }
.alert--error   { background: var(--risk-high-bg); color: var(--risk-high-text); }

/* ── 25. STAT/METRIC CARDS ──────────────────────────────────── */
.metric-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}

.metric-card__number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.375rem;
  letter-spacing: -0.03em;
}

.metric-card__label {
  font-size: 0.8125rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ── 26. ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-in-up { animation: fadeInUp 0.5s ease both; }
.animate-fade-in    { animation: fadeIn 0.4s ease both; }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* ── 27. MOBILE NAVIGATION ──────────────────────────────────── */
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__login { display: none; }

  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--navy);
    padding: 1rem;
    gap: 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 99;
  }

  .nav__links.is-open .nav__login {
    display: flex;
    margin-top: 0.5rem;
    justify-content: center;
  }
}

/* ── 28. RESPONSIVE BREAKPOINTS ─────────────────────────────── */
@media (max-width: 1024px) {
  .country-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__inner  { grid-template-columns: 1fr 280px; }
}

@media (max-width: 768px) {
  .hero__inner  { grid-template-columns: 1fr; }
  .hero__stats  { flex-wrap: wrap; gap: 1rem; }
  .trust-bar__inner { gap: 0.75rem; }
  .trust-bar__item:not(:last-child) { border-right: none; margin-right: 0; padding-right: 0; }
  .country-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .page-layout  { grid-template-columns: 1fr; }
  .sidebar      { position: static; }
  .client-banner__inner { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .section { padding: 2.5rem 0; }
  .country-hero__inner { grid-template-columns: 1fr; }
  .report-header__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .country-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__stats  { flex-direction: column; gap: 0.875rem; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  h1, .h1 { font-size: 1.625rem; }
}

/* ── 29. PRINT STYLES ───────────────────────────────────────── */
@media print {
  .nav, .trust-bar, .client-banner, .footer, .sidebar, .breadcrumb, .report-actions { display: none; }
  .page-layout { grid-template-columns: 1fr; }
  body { background: white; color: black; }
  .reporttable td, .reporttable th { border: 1px solid #ccc; }
}

/* ── 30. UTILITY OVERRIDES ──────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.hidden { display: none; }
.block  { display: block; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.w-full { width: 100%; }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.overflow-hidden { overflow: hidden; }

/* FormButton class (existing ASP.NET styling, restyled) */
.FormButton {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition);
}

.FormButton:hover { background: var(--navy-mid); }

/* ── 30. RELATED MARKETS (country page internal linking) ────── */
.related-markets {
  background: var(--white);
}

.related-markets__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.related-markets__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.related-markets__link:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  transform: translateY(-1px);
}

.related-markets__flag {
  font-size: 1.125rem;
  line-height: 1;
}

.related-markets__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .related-markets__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .related-markets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .related-markets__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── 31. REGISTRY DIRECTORY COMPONENTS (company-registry-directory) ─ */
/* Page-specific styles — brand tokens come from /style.css (single source of truth) */
/* Hero uses the shared .country-hero component from /style.css (house style) */
.dir-section{padding:1.75rem 0 3rem;}
.dir-controls{position:sticky;top:0;z-index:5;background:var(--gray-50);padding:1rem 0 .75rem;border-bottom:1px solid var(--gray-200);}
.dir-search{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}
.dir-search input{flex:1;min-width:220px;font:inherit;font-size:1rem;padding:.7rem .9rem;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:#fff;}
.dir-search input:focus{outline:2px solid var(--blue);border-color:var(--blue);}
.dir-search__count{color:var(--gray-600);font-size:.875rem;white-space:nowrap;}
.btn-mini{font:inherit;font-size:.8125rem;padding:.5rem .8rem;border:1px solid var(--gray-200);background:#fff;border-radius:var(--radius-lg);cursor:pointer;color:var(--gray-700);}
.btn-mini:hover{border-color:var(--blue);color:var(--blue-dark);}
.dir-legend{display:flex;gap:.5rem 1rem;flex-wrap:wrap;margin:1rem 0 1.25rem;font-size:.8125rem;color:var(--gray-600);}
.dir-legend .tier{margin-right:.35rem;}
.ctile{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);margin-bottom:.5rem;box-shadow:var(--shadow-sm);overflow:hidden;}
.ctile[open]{box-shadow:var(--shadow-md);border-color:var(--blue-light);}
.ctile>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 1.15rem;font-weight:600;}
.ctile>summary::-webkit-details-marker{display:none;}
.ctile>summary:hover{background:var(--gray-50);}
.ctile>summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.ctile__name{font-size:1.05rem;color:var(--navy);}
.ctile__meta{display:flex;align-items:center;gap:.85rem;color:var(--gray-500);font-size:.8125rem;font-weight:500;}
.ctile__chev{width:18px;height:18px;fill:none;stroke:var(--gray-500);stroke-width:2.2;transition:transform .2s;}
.ctile[open] .ctile__chev{transform:rotate(180deg);}
.src-tbl-wrap{overflow-x:auto;border-top:1px solid var(--gray-100);}
.src-tbl{width:100%;border-collapse:collapse;font-size:.875rem;}
.src-tbl thead th{text-align:left;background:var(--gray-50);color:var(--gray-600);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.02em;padding:.55rem .9rem;border-bottom:1px solid var(--gray-200);}
.src-tbl td,.src-tbl th.cat{padding:.6rem .9rem;border-bottom:1px solid var(--gray-100);vertical-align:top;}
.src-tbl th.cat{text-align:left;font-weight:600;color:var(--navy);white-space:nowrap;width:1%;}
.src-tbl th.cat--cont{color:var(--gray-400);font-weight:400;}
.src-tbl td.u{min-width:30ch;}
.src-tbl td.u a{color:var(--blue-dark);text-decoration:none;word-break:normal;overflow-wrap:anywhere;}
.src-tbl td.u a:hover{text-decoration:underline;}
.src-tbl td.t{white-space:nowrap;}
.src-tbl td.n{color:var(--gray-600);min-width:14ch;max-width:38ch;}
.src-muted{color:var(--gray-400);}
.tier{display:inline-block;min-width:1.4em;text-align:center;font-weight:700;font-size:.8125rem;padding:.05rem .45rem;border-radius:999px;}
.tier-1{background:#DCFCE7;color:#166534;} .tier-2{background:#D9EAD3;color:#375623;}
.tier-3{background:#FEF3C7;color:#92400E;} .tier-4{background:#FCE4D6;color:#833C00;}
.tier-5{background:#FECACA;color:#991B1B;} .tier-none{background:var(--gray-100);color:var(--gray-400);}
.ctile__cta{margin:0;padding:.55rem .9rem;border-top:1px solid var(--gray-100);font-size:.875rem;}
.ctile__cta a{color:var(--blue-dark);font-weight:600;text-decoration:none;}
.ctile__cta a:hover{text-decoration:underline;}
.dir-no-results{display:none;padding:2rem;text-align:center;color:var(--gray-500);}
.dir-search__hint{font-size:.8125rem;color:var(--gray-500);margin:.5rem 0 0;}
@media(max-width:640px){.ctile__count{display:none;}}

/* ── 32. COUNTRY INDEX COMPONENTS (international-company-credit-reports) ─ */
/* ── Page-specific styles ─────────────────────────────────── */

/* View toggle */
.index-controls {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.index-search__hint {
  font-size: 0.8125rem;
  color: var(--gray-600);
  margin: 0 0 0.625rem;
}

.index-search {
  flex: 1;
  min-width: 240px;
  position: relative;
}

.index-search__input {
  width: 100%;
  padding: 0.625rem 0.875rem 0.625rem 2.5rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--near-black);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.index-search__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(45,165,216,0.12);
}

.index-search__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--gray-400);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}

.index-search__clear {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background var(--transition);
  border: none;
}

.index-search__clear:hover { background: var(--gray-400); color: var(--white); }
.index-search.has-value .index-search__clear { display: flex; }

.view-toggle {
  display: flex;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.view-toggle__btn {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.view-toggle__btn:hover { color: var(--navy); }

.view-toggle__btn.is-active {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.index-count {
  font-size: 0.8125rem;
  color: var(--gray-500);
  white-space: nowrap;
}

.index-count strong { color: var(--navy); font-weight: 600; }

/* Filter pills */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 0.875rem 1rem;
  background: var(--blue-light);
  border: 1px solid rgba(45,165,216,0.2);
  border-radius: var(--radius-md);
  align-items: center;
}

.filter-bar__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1A5276;
  margin-right: 0.25rem;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: all var(--transition);
}

.filter-pill:hover { border-color: var(--blue); color: var(--blue); }
.filter-pill.is-active { background: var(--blue); color: var(--white); border-color: var(--blue); }

.filter-pill__count {
  font-size: 0.6875rem;
  opacity: 0.7;
  font-weight: 500;
}

/* A-Z jump bar */
.az-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  position: sticky;
  top: calc(var(--nav-height) + 0.75rem);
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.az-jump__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-500);
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}

.az-jump__link:hover {
  background: var(--blue-light);
  color: var(--blue);
}

.az-jump__link.is-disabled {
  color: var(--gray-200);
  pointer-events: none;
}

/* Country grid */
.countries-section { margin-bottom: 2rem; }

.countries-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--blue);
}

.countries-section__letter {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
}

.countries-section__count {
  font-size: 0.75rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.countries-section__region-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.countries-section__region-intro {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: 1rem;
  max-width: 720px;
  line-height: 1.65;
}

.countries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.country-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  text-decoration: none;
  color: var(--near-black);
  min-height: 44px;
  position: relative;
}

.country-link:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  transform: translateY(-1px);
  color: var(--navy);
}

.country-link__flag {
  font-size: 1.125rem;
  line-height: 1;
  flex-shrink: 0;
}

.country-link__name {
  font-size: 0.875rem;
  font-weight: 500;
  flex: 1;
  line-height: 1.3;
}

.country-link__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

.country-link__badge--instant {
  background: var(--blue-light);
  color: #1A5276;
}

.country-link__badge--restricted {
  background: #FEF3C7;
  color: #92400E;
}

/* Hide when filtered */
.country-link.is-hidden,
.countries-section.is-hidden {
  display: none;
}

/* Empty state */
.index-no-results {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--white);
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-lg);
  display: none;
}

.index-no-results.is-visible { display: block; }

.index-no-results__icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.4;
}

.index-no-results__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.375rem;
}

.index-no-results__text {
  color: var(--gray-500);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}

/* Legend */
.index-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.875rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.index-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Footer CTA card */
.index-footer-cta {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--navy);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.index-footer-cta__text {
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
  margin: 0;
}

.index-footer-cta__text strong { color: var(--white); }

/* Responsive */
@media (max-width: 1024px) {
  .countries-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .countries-grid { grid-template-columns: repeat(2, 1fr); }
  .index-controls { flex-direction: column; align-items: stretch; }
  .view-toggle { width: 100%; }
  .view-toggle__btn { flex: 1; }
  .az-jump { top: calc(var(--nav-height) + 0.5rem); padding: 0.5rem; }
  .az-jump__link { width: 24px; height: 24px; font-size: 0.6875rem; }
  .index-footer-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .countries-grid { grid-template-columns: 1fr; }
}

/* ── 33. KNOWLEDGE BASE COMPONENTS (knowledge-base) ─ */
/* ── Page-specific styles ─────────────────────────────────── */

.kb-category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.kb-category-header h2 {
  font-size: 1.375rem;
  margin: 0;
}

.kb-category-header__count {
  color: var(--gray-600, #6b7280);
  font-size: 0.875rem;
}

.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.kb-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);
}

.kb-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.kb-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}

.kb-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--near-black);
  margin-bottom: 0.625rem;
}

.kb-card__excerpt {
  font-size: 0.9375rem;
  color: var(--gray-700);
  line-height: 1.5;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.kb-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--gray-600, #6b7280);
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
}

.kb-card__read-more {
  color: var(--blue);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.kb-intro {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.kb-intro h2 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.kb-intro p {
  color: var(--gray-700);
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .kb-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 34. REPORT VIEWER COMPONENTS (view-report) ─ */
/* Report-specific styles */

/* Section dividers for CARSectionHead — restyled from plain text to navy-bordered dividers */
.report-shell .CARSectionHead {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 1.5rem 0 0.75rem;
  border-left: 3px solid var(--blue);
  padding-left: 0.875rem;
  margin: 2rem 0 1rem;
}

/*.report-shell .CARSectionHead:first-child { margin-top: 0; }
*/
/* Report-level container card */
.report-shell {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
}

/* Top action bar */
.report-actions {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.report-actions__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: color var(--transition);
}

.report-actions__back:hover { color: var(--blue); }

.report-actions__back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.report-actions__buttons {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

/* Report title block */
.report-title-block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.report-title-block__main { flex: 1; min-width: 280px; }

.report-title-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.report-title-block__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.report-title-block__meta-item strong {
  color: var(--navy);
  font-weight: 600;
}

/* Risk indicator pill */
.risk-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.risk-indicator__score {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-right:5px;
}

.risk-indicator__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
  display: block;
}

.risk-indicator__text { line-height: 1.2; }

.risk-indicator.risk-low {
  background: var(--risk-low-bg);
  color: var(--risk-low-text);
}

.risk-indicator.risk-medium {
  background: var(--risk-med-bg);
  color: var(--risk-med-text);
}

.risk-indicator.risk-high {
  background: var(--risk-high-bg);
  color: var(--risk-high-text);
}

.risk-indicator svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Wide financial table treatment — applies to .reporttable from style.css */
.financial-tables-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2rem; /* break out of card padding for wider view on tablet */
  padding: 0 2rem;
}

/* Local Financial Statements — de-emphasised */
.local-financial-statements {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.local-financial-statements__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  margin-bottom: 0.625rem;
}

.local-financial-statements__label svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2;
}

.local-financial-statements .CARSectionHead {
  font-size: 0.6875rem;
  margin-top: 0;
  padding-top: 0;
  border-left-color: var(--gray-400);
  color: var(--gray-600);
}

.local-financial-statements .reporttable td,
.local-financial-statements .reporttable th {
  font-size: 0.8125rem;
}

/* Report footer */
.report-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.75rem;
  color: var(--gray-500);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .report-shell { padding: 1.25rem; }
  .financial-tables-wrap { margin: 0 -1.25rem; padding: 0 1.25rem; }
  .report-title-block { flex-direction: column; }
  .report-actions { flex-direction: column; align-items: stretch; }
  .report-actions__buttons { width: 100%; }
  .report-actions__buttons .btn { flex: 1; }
}

@media print {
  /* .report-actions and .breadcrumb are hidden globally in section 29 */
  .report-shell { border: none; padding: 0; }
}

/* ── 35. ACCOUNT BALANCE COMPONENTS (account-balance) ─ */
.balance-card {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.balance-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,165,216,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.balance-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.5rem;
  position: relative;
}

.balance-card__icon-wrap {
  width: 64px;
  height: 64px;
  background: rgba(45,165,216,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  position: relative;
}

.balance-card__icon-wrap svg {
  width: 28px;
  height: 28px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
}

.balance-card__number {
  font-size: 4rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.375rem;
  position: relative;
  font-variant-numeric: tabular-nums;
}

.balance-card__unit {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  margin-bottom: 1.5rem;
  position: relative;
}

.balance-card__account {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.85);
  position: relative;
}

.balance-card__account strong {
  color: var(--white);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.balance-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  margin-top: 1.5rem;
}

/* Zero-balance state */
.zero-balance-prompt {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.zero-balance-prompt__icon {
  width: 48px;
  height: 48px;
  background: var(--blue-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.zero-balance-prompt__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
}

.zero-balance-prompt__text { flex: 1; }

/* Info cards */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.info-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.info-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}

.info-card__value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
}

@media (max-width: 768px) {
  .info-grid { grid-template-columns: 1fr; }
  .balance-card__number { font-size: 3rem; }
  .zero-balance-prompt { flex-direction: column; text-align: center; }
}

/* ── 36. ADD CREDITS COMPONENTS (add-credits) ─ */
/* Credit bundle radio cards */
.credit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

.credit-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.credit-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.credit-option__card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 0.875rem 0.75rem;
  text-align: center;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.credit-option:hover .credit-option__card {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.credit-option input[type="radio"]:checked + .credit-option__card {
  border-color: var(--blue);
  background: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(45,165,216,0.12);
}

.credit-option input[type="radio"]:focus-visible + .credit-option__card {
  box-shadow: 0 0 0 3px rgba(45,165,216,0.25);
}

.credit-option__count {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.credit-option__unit {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 0.125rem;
  margin-bottom: 0.5rem;
}

.credit-option__price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.credit-option__price-sub {
  font-size: 0.6875rem;
  color: var(--gray-500);
  margin-top: 0.125rem;
}

/* Payment method buttons */
.payment-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.payment-option {
  position: relative;
  cursor: pointer;
}

.payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-option__card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  transition: border-color var(--transition), background var(--transition);
}

.payment-option:hover .payment-option__card { border-color: var(--blue); }

.payment-option input[type="radio"]:checked + .payment-option__card {
  border-color: var(--blue);
  background: var(--blue-light);
}

.payment-option__icon {
  width: 36px;
  height: 36px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.payment-option__icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--navy);
  fill: none;
  stroke-width: 2;
}

.payment-option__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
}

.payment-option__sub {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.125rem;
}

/* Conditional card form */
.card-payment-form {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Summary panel */
.order-summary {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
}

.order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.order-summary__row:last-of-type { border-bottom: none; }

.order-summary__row--total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  padding-top: 1rem;
  border-top: 2px solid var(--navy);
  margin-top: 0.5rem;
  border-bottom: none;
}

.order-summary__row strong { font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .credit-grid { grid-template-columns: repeat(2, 1fr); }
  .payment-method-grid { grid-template-columns: 1fr; }
}

/* ── 37. REPORT HISTORY COMPONENTS (report-history) ─ */
/* Page-specific table styles */
.history-toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: none;
}

.history-search {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-width: 280px;
}

.history-search__input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--near-black);
  background: var(--white);
}

.history-search__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(45,165,216,0.12);
}

.history-actions { display: flex; gap: 0.5rem; }

.history-table-wrap {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow-x: auto;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.history-table th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 0.75rem 0.875rem;
  white-space: nowrap;
}

.history-table th a {
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.history-table th a:hover { color: var(--blue); }

.history-table > tbody > tr > td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

.history-table tr:hover td { background: var(--gray-50); }

.history-table__subject a {
  color: var(--navy);
  font-weight: 600;
  transition: color var(--transition);
}

.history-table__subject a:hover { color: var(--blue); }

.history-table__pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  background: var(--blue-light);
  color: #1A5276;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  transition: background var(--transition);
}

.history-table__pdf-btn:hover {
  background: var(--blue);
  color: var(--white);
}

.history-table__pdf-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.history-table__check {
  accent-color: var(--blue);
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.history-footer-bar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  margin-top: -1px;
}

.empty-state {
  text-align: center;
  padding: 3rem 2rem;
}

.empty-state__icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}
  
/* Stacked-card view: make the company name the card title (label above, left-aligned) */
@media (max-width: 768px) {
  .history-table.table--stack td.history-table__subject { display: block; text-align: left; }
  .history-table.table--stack td.history-table__subject::before { display: block; margin-bottom: 0.15rem; }
}

/* ── 38. LOGGED-IN CONTACT COMPONENTS (contact-logged-in) ─ */
/* File attachment dropzone */
.file-dropzone {
  display: block;                 /* ADDED - label defaults to inline, which fragments the panel */
  border: 1.5px dashed var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  text-align: center;
  background: var(--gray-50);
  transition: border-color var(--transition), background var(--transition);
  cursor: pointer;
}

.file-dropzone:hover, .file-dropzone.is-active {
  border-color: var(--blue);
  background: var(--blue-light);
}

.file-dropzone__icon {
  display: block;                 /* ADDED - label defaults to inline, which fragments the panel */
  width: 36px;
  height: 36px;
  margin: 0 auto 0.625rem;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
}

.file-dropzone__primary {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.file-dropzone__primary a { color: var(--blue); }

.file-dropzone__secondary {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.file-dropzone input[type="file"] { display: none; }

.file-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.file-list__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--gray-700);
}

/* Address card */
.address-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.address-card__row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.address-card__row:last-child { margin-bottom: 0; }

.address-card__icon {
  width: 18px;
  height: 18px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Help sections grid */
.help-section {
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.help-section__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.help-section__title svg {
  width: 16px;
  height: 16px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
}

/* ── 39. GROUPED STYLES (migrated from former inline style= attributes, 2026-06-16) ─────────
   One class per unique declaration set. Replaces 27,553 inline styles so all
   styling is single-source. Ordered by frequency. */

.s-001 { color:var(--blue); font-weight:700; }
.s-002 { font-size:0.875rem; display:flex; gap:0.5rem; }
.s-003 { margin:0; }
.s-004 { margin-bottom:0.625rem; }
.s-005 { display:flex; flex-direction:column; gap:0.4rem; }
.s-006 { font-size:1.5rem; margin-bottom:0.75rem; }
.s-007 { padding:2rem; margin-bottom:2rem; }
.s-008 { display:flex; flex-direction:column; gap:0.5rem; }
.s-009 { margin-bottom:1rem; }
.s-010 { padding:0; margin-bottom:2rem; overflow:hidden; }
.s-011 { padding:1.5rem 2rem 1rem; }
.s-012 { font-size:1.5rem; margin-bottom:0.25rem; }
.s-013 { color:var(--blue); margin-bottom:0.625rem; }
.s-014 { margin-bottom:0.75rem; }
.s-015 { color:var(--gray-700); margin-bottom:1.25rem; }
.s-016 { background:var(--gray-50); }
.s-017 { padding:2rem; }
.s-018 { color:var(--blue); margin-bottom:0.5rem; }
.s-019 { flex-shrink:0; }
.s-020 { color:rgba(255,255,255,0.7); font-size:0.9375rem; max-width:640px; }
.s-021 { color:var(--white); font-size:1.5rem; margin-bottom:0.75rem; }
.s-022 { display:flex; gap:0.875rem; flex-wrap:wrap; align-items:center; }
.s-023 { color:rgba(255,255,255,0.8); margin-bottom:1.5rem; }
.s-024 { font-size:1.25rem; margin-bottom:1rem; }
.s-025 { padding:1.75rem; margin-bottom:2rem; }
.s-026 { margin-right:0.5rem; }
.s-027 { border:none; border-top:1px solid var(--gray-200); border-radius:0; }
.s-028 { gap:1.25rem; margin-bottom:1.25rem; }
.s-029 { border-top:1px solid var(--gray-200); }
.s-030 { padding:1rem 2rem 1.5rem; }
.s-031 { flex-shrink:0; margin-top:2px; }
.s-032 { margin-bottom:0.5rem; }
.s-033 { color:var(--gray-700); margin-bottom:1rem; }
.s-034 { margin-bottom:0.4rem; }
.s-035 { color:var(--gray-700); margin-bottom:0; }
.s-036 { color:var(--blue); text-decoration:underline; }
.s-037 { color:var(--white); margin-bottom:0.5rem; }
.s-038 { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:1.5rem; }
.s-039 { font-size:0.875rem; color:rgba(255,255,255,0.65); margin:0; }
.s-040 { color:var(--gray-700); margin-bottom:1rem; padding-left:1.5rem; }
.s-041 { background:var(--white); }
.s-042 { gap:1rem; }
.s-043 { color:var(--gray-600); margin:0; }
.s-044 { color:var(--blue); font-weight:700; flex-shrink:0; }
.s-045 { width:36px; height:36px; background:var(--blue-light); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:0.125rem; }
.s-046 { margin-bottom:0.25rem; }
.s-047 { display:flex; gap:0.75rem; align-items:flex-start; font-size:0.9375rem; }
.s-048 { display:flex; gap:0.75rem; align-items:center; font-size:0.9375rem; }
.s-049 { color:var(--blue); font-weight:700; font-size:1rem; }
.s-050 { display:flex; gap:0.5rem; }
.s-051 { padding:2rem; margin-bottom:2rem; border-left:4px solid var(--blue); }
.s-052 { margin-bottom:0.375rem; }
.s-053 { text-align:center; max-width:680px; margin:0 auto 2.5rem; }
.s-054 { margin-top:0.75rem; }
.s-055 { margin-bottom:1.25rem; }
.s-056 { margin-top:2.5rem; margin-bottom:1rem; }
.s-057 { display:flex; gap:0.875rem; align-items:flex-start; }
.s-058 { display:flex; gap:0.625rem; align-items:center; margin-bottom:0.125rem; }
.s-059 { font-size:0.625rem; }
.s-060 { font-size:0.9375rem; color:var(--navy); }
.s-061 { margin:0 0 0 1.875rem; }
.s-062 { font-size:1.5rem; margin-bottom:0.875rem; }
.s-063 { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.s-064 { color:var(--blue); font-size:1.25rem; flex-shrink:0; }
.s-065 { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--gray-200); color:var(--gray-700); }
.s-066 { font-size:1.25rem; margin-bottom:0.25rem; }
.s-067 { display:flex; gap:0.5rem; font-size:0.8125rem; }
.s-068 { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.875rem; }
.s-069 { width:32px; height:32px; background:var(--blue); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.875rem; }
.s-070 { background:var(--blue-light); border-top:1px solid rgba(45,165,216,0.2); border-bottom:1px solid rgba(45,165,216,0.2); }
.s-071 { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.s-072 { display:flex; gap:0.875rem; flex-wrap:wrap; flex-shrink:0; }
.s-073 { display:flex; gap:1rem; align-items:flex-start; }
.s-074 { text-align:center; }
.s-075 { margin-bottom:1.5rem; }
.s-076 { margin-top:2.5rem; }
.s-077 { margin-bottom:0; }
.s-078 { font-weight:400; }
.s-079 { position:absolute; opacity:0; }
.s-080 { font-size:1.25rem; font-weight:700; color:var(--navy); }
.s-081 { margin-top:0.125rem; }
.s-082 { margin-top:1rem; }
.s-083 { margin-bottom:1.25rem; font-size:1rem; }
.s-084 { gap:1.5rem; }
.s-085 { background:var(--navy); }
.s-086 { margin-bottom:0.5rem; color:var(--blue); }
.s-087 { color:var(--white); }
.s-088 { text-align:center; max-width:600px; margin:0 auto 2.5rem; }
.s-089 { font-size:1.25rem; margin-bottom:0.5rem; }
.s-090 { color:var(--blue); margin-bottom:0.25rem; }
.s-091 { color:var(--gray-700); margin-bottom:0.75rem; }
.s-092 { margin-top:0.5rem; }
.s-093 { margin-bottom:0.875rem; }
.s-094 { display:flex; flex-direction:column; gap:0.625rem; }
.s-095 { background:var(--white); border-bottom:1px solid var(--gray-200); }
.s-096 { padding:2rem; margin-bottom:1.5rem; }
.s-097 { align-items:start; gap:4rem; }
.s-098 { color:var(--gray-600); margin-bottom:1rem; }
.s-099 { color:var(--gray-600); margin-bottom:1.5rem; }
.s-100 { flex-shrink:0; margin-top:0.125rem; }
.s-101 { display:flex; flex-direction:column; }
.s-102 { display:flex; align-items:center; gap:0.625rem; margin-bottom:0.75rem; }
.s-103 { margin-top:auto; }
.s-104 { color:var(--gray-600); margin-bottom:1.25rem; }
.s-105 { display:flex; flex-direction:column; gap:0.5rem; font-size:0.875rem; }
.s-106 { background: var(--white); }
.s-107 { text-align:center; margin-top:2rem; }
.s-108 { color:var(--blue-dark); }
.s-109 { text-align:center; margin-bottom:2rem; }
.s-110 { background:var(--gray-50); padding-top:2rem; }
.s-111 { padding-left:1.25rem; list-style:disc; color:var(--gray-700); display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; }
.s-112 { margin-left:0.5rem; }
.s-113 { color:var(--gray-700); margin-bottom:0; padding-left:1.5rem; }
.s-114 { padding:1.75rem; }
.s-115 { text-align:center; margin-top:1.5rem; }
.s-116 { background:var(--navy); padding:2rem 0; }
.s-117 { color:rgba(255,255,255,0.75); max-width:680px; margin:0; }
.s-118 { font-size:0.9375rem; font-weight:700; color:var(--navy); margin-bottom:0.75rem; }
.s-119 { display:flex; flex-direction:column; gap:1rem; }
.s-120 { font-size:0.9375rem; color:var(--navy); margin:1.75rem 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--gray-200); }
.s-121 { display:flex; gap:0.625rem; align-items:flex-start; }
.s-122 { margin-bottom:1.75rem; }
.s-123 { display:flex; align-items:center; gap:0.75rem; }
.s-124 { display:block; color:var(--navy); }
.s-125 { white-space:nowrap; }
.s-126 { font-variant-numeric:tabular-nums; color:var(--gray-600); }
.s-127 { text-align:right; font-variant-numeric:tabular-nums; }
.s-128 { display:flex; gap:0.625rem; }
.s-129 { color:var(--red); }
.s-130 { font-size:1.125rem; margin-bottom:0.25rem; }
.s-131 { display:none; }
.s-132 { text-align:center; margin-bottom:0; }
.s-133 { margin-top:0.75rem; margin-bottom:1.5rem; }
.s-134 { display:flex; flex-direction:column; gap:1rem; margin-bottom:3rem; }
.s-135 { font-size:1.25rem; margin-bottom:1.25rem; }
.s-136 { display:block; margin-top:0.5rem; font-weight:500; }
.s-137 { margin-top:1.5rem; text-align:center; }
.s-138 { display:flex; flex-direction:column; gap:0.875rem; }
.s-139 { color:rgba(255,255,255,0.7); margin-top:0.75rem; }
.s-140 { margin-bottom:0.5rem; text-align:center; }
.s-141 { text-align:center; margin-bottom:1.25rem; }
.s-142 { color:var(--gray-600); text-align:center; margin-bottom:2rem; }
.s-143 { background: var(--gray-50); }
.s-144 { align-items:center; gap:4rem; }
.s-145 { color:var(--gray-600); margin-bottom:2rem; }
.s-146 { display:flex; flex-direction:column; gap:1.25rem; }
.s-147 { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--gray-200); }
.s-148 { color:var(--blue); font-weight:700; font-size:1.125rem; flex-shrink:0; }
.s-149 { display:block; font-size:0.9375rem; color:var(--navy); margin-bottom:0.125rem; }
.s-150 { padding:0; }
.s-151 { margin-top:1rem; text-align:center; }
.s-152 { display:none; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--gray-200); }
.s-153 { text-align:center; margin-bottom:2.5rem; }
.s-154 { margin:0.5rem 0 0; }
.s-155 { padding:1.75rem; margin-bottom:1.25rem; }
.s-156 { display:flex; gap:0.75rem; flex-wrap:wrap; }
.s-157 { margin-top:0.25rem; flex-shrink:0; }
.s-158 { margin:2rem 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--gray-200); }
.s-159 { color:var(--blue); }
.s-160 { margin-top:2rem; }
.s-161 { color:var(--gray-700); margin-bottom:1rem; font-style:italic; }
.s-162 { padding-left:1.5rem; }
.s-163 { padding-left:3rem; }
.s-164 { border:none; border-top:1px solid var(--gray-200); margin:2rem 0; }
.s-165 { gap:0.75rem; }
.s-166 { margin:0 0 0.5rem; }
.s-167 { margin-top:0.5rem; padding-left:1.25rem; list-style:disc; }
.s-168 { margin-top:0; margin-bottom:1rem; }
.s-169 { margin-bottom:2rem; }
.s-170 { margin-top:1.5rem; }
.s-171 { display:flex; gap:0.625rem; align-items:flex-start; cursor:pointer; }
.s-172 { color:var(--gray-700); }
.s-173 { margin-top:1.5rem; display:flex; gap:0.875rem; flex-wrap:wrap; align-items:center; }
.s-174 { font-weight:600; }
.s-175 { padding:2rem 0; }
.s-176 { max-width:780px; }
.s-177 { max-width:440px; margin:0 auto; }
.s-178 { margin-top:0; margin-bottom:0.5rem; font-size:1.25rem; }
.s-179 { margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--gray-200); text-align:center; }
.s-180 { font-size:1.25rem; margin:2.5rem 0 0.25rem; }
.s-181 { text-align:center; position:relative; }
.s-182 { display:flex; align-items:center; gap:0.625rem; }
.s-183 { color:var(--blue); font-weight:600; }
.s-184 { gap:1rem; margin-bottom:1.25rem; }
.s-185 { padding:1.5rem; }
.s-186 { font-size:1.125rem; margin-bottom:0.75rem; }
.s-187 { display:flex; flex-direction:column; gap:0.625rem; font-size:0.9375rem; }
.s-188 { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--gray-200); }
.s-189 { margin-bottom:0; margin-top:0.5rem; }
.s-190 { min-height:80px; }
.s-191 { font-size:0.9375rem; margin-bottom:1rem; }
.s-192 { margin-bottom:0; max-width:400px; }
.s-193 { color:var(--gray-700); margin-top:1rem; margin-bottom:0; }
.s-194 { max-width:72ch; }
.s-195 { color:var(--gray-700); font-weight:600; }
.s-196 { margin-bottom:16px; }
.s-197 { font-size:1rem; margin-bottom:0.875rem; }
.s-198 { padding:1.75rem; margin-bottom:1.5rem; }
.s-199 { min-height:200px; }
.s-200 { font-size:0.8125rem; color:var(--blue); margin-bottom:0.5rem; display:inline-block; }
.s-201 { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.s-202 { margin-bottom:2.5rem; }
.s-203 { margin-bottom:0.5rem; font-size:1.25rem; }
.s-204 { color:var(--navy); margin-bottom:0.25rem; }
.s-205 { margin:0; color:var(--gray-700); }
.s-206 { margin-top:0; margin-bottom:0.5rem; font-size:1.125rem; }
.s-207 { font-size:0.9375rem; color:var(--navy); margin:0 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--gray-200); }
.s-208 { text-transform:uppercase; }
.s-209 { color:var(--gray-700); line-height:1.5; }
.s-210 { color:var(--risk-high-text); font-weight:600; }
.s-211 { margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--gray-200); }
.s-212 { font-weight:400; font-size:0.875rem; }
.s-213 { font-weight:600; display:inline-block; margin-top:0.25rem; }
.s-214 { margin-top:2rem; padding:1.75rem; }
.s-215 { color:rgba(255,255,255,0.8); font-size:0.9375rem; margin:0; }
.s-216 { padding:2.5rem; margin-top:1rem; }
.s-217 { display:flex; gap:2rem; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.s-218 { flex:1; min-width:280px; }
.s-219 { color:rgba(255,255,255,0.8); margin-bottom:0; }
.s-220 { padding:1.75rem; margin-top:2rem; }
.s-221 { margin-top:1rem; margin-bottom:0; font-size:0.9375rem; }
.s-222 { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.s-223 { color:var(--blue); white-space:nowrap; }
.s-224 { display:flex; gap:0.5rem; align-items:center; }
.s-225 { display:grid; grid-template-columns:repeat(4, 1fr); gap:0.625rem; }
.s-226 { position:absolute; top:-8px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.s-227 { text-align:center; grid-column: span 2; }
.s-228 { font-size:1.25rem; margin:2.5rem 0 1rem; }
.s-229 { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.s-230 { display:none; margin-top:1rem; padding:1.5rem; }
.s-231 { padding:2rem; display:none; }
.s-232 { display:flex; gap:0.875rem; align-items:flex-start; margin-bottom:1.25rem; }
.s-233 { flex-shrink:0; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--blue-light); display:flex; align-items:center; justify-content:center; color:var(--blue); }
.s-234 { margin:0 0 0.25rem; font-size:1.25rem; }
.s-235 { color:var(--gray-700); margin-bottom:1.5rem; }
.s-236 { width:36px; }
.s-237 { text-align:right; }
.s-238 { width:90px; text-align:center; }
.s-239 { margin:0; flex:1; }
.s-240 { color:rgba(255,255,255,0.9); text-decoration:underline; }
.s-241 { background:var(--blue-light); border:1px solid rgba(45,165,216,0.25); margin-bottom:2.5rem; }
.s-242 { padding-left:1.25rem; list-style:disc; color:var(--gray-700); display:flex; flex-direction:column; gap:0.5rem; }
.s-243 { margin-top:1rem; margin-bottom:0; }
.s-244 { margin-bottom:0.5rem; margin-top:0.5rem; }
.s-245 { background:var(--gray-50); padding-top:1rem; }
.s-246 { font-size:1.625rem; margin-bottom:0.25rem; }
.s-247 { font-weight:600; font-size:0.8125rem; }
.s-248 { gap:1rem; margin-bottom:1.5rem; }
.s-249 { max-width:320px; }
.s-250 { display:flex; gap:0.625rem; align-items:flex-start; font-size:0.9375rem; color:var(--gray-700); cursor:pointer; }
.s-251 { margin-top:0.25rem; accent-color:var(--blue); }

/* 39.1 specificity-preservation overrides: keep the former inline value where a
   higher-specificity rule above would otherwise win after de-inlining. */
.gridview_head th.s-237 { text-align: right; }
.gridview_head th.s-238 { text-align: center; }
.history-table th.s-237 { text-align: right; }
.history-table th.s-238 { text-align: center; }
p:last-child.s-033 { margin-bottom: 1rem; }

/* ── 40. LANGUAGE SWITCHER (shared component) ──────────────────────────────────
   Rendered client-side by /lang-switcher.js from /lang-map.json; belongs in the
   shared header. Hidden until JS populates it; shows nothing on pages with no
   localized equivalent. See developer documents/language-switcher-component.md. */
.lang-switcher { position: relative; display: inline-block; font-family: var(--font); }
.lang-switcher[hidden] { display: none; }
.lang-switcher__toggle {
  display: inline-flex; align-items: center; gap: 0.4rem; background: transparent;
  border: 1px solid var(--gray-200); border-radius: 6px; padding: 0.4rem 0.6rem;
  font-size: 0.875rem; font-weight: 600; color: var(--gray-700); cursor: pointer; line-height: 1;
}
.lang-switcher__toggle:hover { border-color: var(--blue); color: var(--blue-dark); }
.lang-switcher__flag { font-size: 1rem; line-height: 1; }
.lang-switcher__chev { width: 12px; height: 12px; transition: transform 0.15s ease; }
.lang-switcher__toggle[aria-expanded="true"] .lang-switcher__chev { transform: rotate(180deg); }
.lang-switcher__menu {
  position: absolute; right: 0; top: calc(100% + 4px); min-width: 168px; margin: 0;
  padding: 0.25rem; list-style: none; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11,31,58,0.12); z-index: 60;
}
.lang-switcher__menu[hidden] { display: none; }
.lang-switcher__item { display: block; }
.lang-switcher__link {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem;
  border-radius: 5px; font-size: 0.875rem; color: var(--gray-700); text-decoration: none;
}
.lang-switcher__link:hover { background: var(--blue-light); color: var(--blue-dark); }
.lang-switcher__link[aria-current="true"] { font-weight: 700; color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE FIX PATCH: logged-in pages (2026.07.21)
   Drop-in patch: paste this whole block at the END of style.css
   (or link it as a separate stylesheet AFTER style.css).
   Fixes:
   A. Logged-in navigation overflow on phones (account button +
      "Get a report" + burger forced the page wider than the screen
      on /your-account, /report-history, /account-balance,
      /add-credits and /contact when logged in).
   B. Report-history table: defensive rules so the stacked mobile
      layout also works with ASP.NET GridView markup that renders
      the header row as <tr><th>…</th></tr> inside <tbody>
      (no <thead>), which previously forced the page wide.
   ═══════════════════════════════════════════════════════════════ */

/* ── A. Logged-in nav: fit at phone widths ── */
@media (max-width: 768px) {
    .nav__inner {
        gap: 0.75rem;
    }

    .nav__right {
        gap: 0.5rem;
    }

    .nav__burger {
        margin-left: 0;
        flex-shrink: 0;
    }

    .nav__account-btn {
        padding: 0.375rem 0.625rem;
    }

    .nav__cta {
        padding: 0.4375rem 0.75rem;
    }
}

@media (max-width: 560px) {
    .nav__inner {
        gap: 0.5rem;
    }

    .nav__logo {
        font-size: 0.875rem;
    }

    .nav__account-btn {
        font-size: 0.75rem;
        padding: 0.3125rem 0.5rem;
        gap: 0.25rem;
    }

        .nav__account-btn svg {
            display: none;
        }

    .nav__cta {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }
}

@media (max-width: 400px) {
    .nav__inner {
        gap: 0.375rem;
    }

    .nav__right {
        gap: 0.375rem;
    }

    .nav__logo {
        font-size: 0.75rem;
    }

    .nav__account-btn {
        font-size: 0.6875rem;
        padding: 0.3125rem 0.375rem;
    }

        .nav__account-btn svg {
            display: none;
        }

    .nav__cta {
        font-size: 0.6875rem;
        padding: 0.375rem 0.5rem;
    }
}

/* Very small phones (≤340px): the top-bar CTA no longer fits on one
   row; hide it: "Get a report" remains available in the account
   sidebar quick links and in page content. */
@media (max-width: 340px) {
    .nav__cta {
        display: none;
    }
}

/* Report-history search bar: allow it to compress on small phones */
@media (max-width: 480px) {
    .history-search {
        min-width: 0;
    }

    .history-search__input {
        min-width: 0;
    }
}

/* ── B. Stacked tables: cover markup without <thead> ── */
@media (max-width: 768px) {
    /* GridView renders the header row inside <tbody>; hide any header
     cells and any row made only of header cells in stacked mode. */
    .table--stack th {
        display: none;
    }

    .table--stack tr:has(> th) {
        display: none;
    }
    /* A td without data-label gets no label; left-align its value so
     bare values read as a clean card while labels are being added. */
    .table--stack td:not([data-label]) {
        justify-content: flex-start;
        text-align: left;
    }
    /* Long unbroken values (registration numbers, company names) may
     wrap instead of widening the card. */
    .table--stack td {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* ── C. Stop wide content propagating page width on mobile ──
   On phones the main column must never be sized by its widest
   content (tables, long strings); clamp the grid track. */
@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── D. Tablet band (769–919px): logged-in nav also overflowed ──
   With the five main links plus the account button and CTA the
   logged-in bar needs ~900px; below that, collapse the links into
   the burger menu (logged-in pages only, detected via :has). */
@media (min-width: 769px) and (max-width: 919px) {
    .nav:has(.nav__account) .nav__links {
        display: none;
    }

    .nav:has(.nav__account) .nav__burger {
        display: flex;
        margin-left: 0;
        flex-shrink: 0;
    }

    .nav:has(.nav__account) .nav__links.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--navy);
        padding: 1rem;
        gap: 0.25rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        z-index: 99;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FIX PATCH 2 (2026.07.22)
   Drop-in patch: paste this whole block at the END of style.css,
   AFTER the Mobile Fix Patch of 2026.07.21.
   Fixes:
   A. "Client login" now available on phones: compact pill in the
      top bar on all public (logged-out) pages.
   B. Tablet band (769-919px): the link row + login + CTA needs
      ~900px; collapse links into the burger on ALL pages (patch 1
      did this for logged-in pages only).
   C. Account dropdown no longer hides behind the open burger menu.
   D. Open-account credits selector: responsive columns on phones.
   E. Small-phone polish: wide buttons and status badges/pills may
      wrap instead of overflowing the screen edge.
   ═══════════════════════════════════════════════════════════════ */

/* ── A. Client login pill on phones (public pages) ── */
@media (max-width: 768px) {
    .nav__login {
        display: flex;
        padding: 0.375rem 0.625rem;
    }
}

@media (max-width: 560px) {
    .nav__login {
        font-size: 0.75rem;
        padding: 0.3125rem 0.5rem;
        gap: 0.25rem;
    }

        .nav__login svg {
            display: none;
        }
}

@media (max-width: 400px) {
    .nav__login {
        font-size: 0.6875rem;
        padding: 0.3125rem 0.375rem;
    }
}

/* ── B. Tablet band: collapse links into burger on all pages ── */
@media (min-width: 769px) and (max-width: 919px) {
    .nav__links {
        display: none;
    }

    .nav__burger {
        display: flex;
        margin-left: 0;
        flex-shrink: 0;
    }

    .nav__links.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--navy);
        padding: 1rem;
        gap: 0.25rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        z-index: 99;
    }
}

/* ── C. Account dropdown vs burger menu ──
   The open burger menu (z-index 99) painted over the account
   dropdown (z-index auto). Two rules:
   1. dropdown always paints above the menu;
   2. while the account menu is open (button focused/tapped), the
      burger menu is hidden so only one menu shows at a time;
      tapping the burger refocuses away, which also closes the
      account dropdown. */
.nav__dropdown {
    z-index: 120;
}

.nav__inner:has(.nav__account:focus-within) .nav__links.is-open {
    display: none;
}

/* ── D. Open-account credits selector: responsive columns ──
   Same treatment as .credit-grid on add-credits (which already
   reflows); .s-225 was missed. */
@media (max-width: 768px) {
    .s-225 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 380px) {
    .s-225 {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Payment method selector: stack on small phones (.s-229 missed the
   rule that .payment-method-grid already has) */
@media (max-width: 480px) {
    .s-229 {
        grid-template-columns: 1fr;
    }
}

/* ── E. Small-phone polish ── */
@media (max-width: 768px) {
    /* Status pills / badges (e.g. "ACTIVE - ACCOUNTS FILED" on the
     get-report results) may wrap onto two lines rather than run
     past the screen edge. */
    .badge, .risk-badge, .risk-indicator {
        white-space: normal;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    /* Wide call-to-action buttons wrap their label on narrow phones */
    .btn {
        max-width: 100%;
        white-space: normal;
    }
}
/* CTA band button row: allow it to shrink and wrap on narrow phones
   (it is flex-shrink:0 for desktop alignment) */
@media (max-width: 360px) {
    .s-072 {
        flex-shrink: 1;
        min-width: 0;
    }
}
/* Hero sections: clamp the single mobile grid track so content
   (e.g. side-by-side hero buttons) wraps instead of widening the
   page; same clamp patch 1 applied to .page-layout. */
@media (max-width: 768px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .country-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   2026.07.24 FIX : account dropdown closes before it can be clicked
   Append this whole block to the END of the live style.css
   (after the mobile fix blocks of 2026.07.21 and 2026.07.22).
 
   CAUSE
   The dropdown (.nav__dropdown) sits 8px below the account button
   (top: calc(100% + 8px)) and is only kept open while the pointer is
   inside .nav__account (:hover). Moving from the button towards the
   menu crosses that 8px gap; the pointer is momentarily over nothing,
   :hover drops, and the menu disappears before it can be reached.
   Clicking the button works only because :focus-within also holds
   the menu open.
 
   FIX
   An invisible "hover bridge": an 8px-tall strip belonging to
   .nav__account that fills the gap, so :hover never drops while the
   pointer travels from the button onto the menu. Applied on
   hover-capable (mouse) devices only; no HTML or JavaScript changes;
   click and keyboard behaviour are unchanged.
   ═══════════════════════════════════════════════════════════════════ */

@media (hover: hover) {
    .nav__account::after {
        content: "";
        position: absolute;
        top: 100%; /* starts at the bottom edge of the button   */
        right: 0;
        height: 8px; /* exactly the gap set by top: calc(100%+8px) */
        width: 100%;
        min-width: 200px; /* matches .nav__dropdown min-width, so the
                           bridge also covers the part of the menu
                           that extends to the left of the button    */
    }
}









.pagination-ys table {
    width: auto;
    float: right;
}

.pagination-ys tr {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0.75rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    position: sticky;
    top: calc(var(--nav-height) + 0.75rem);
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.pagination-ys span {
    background: var(--blue-light);
    color: var(--blue);
}
    
.pagination-ys span, .pagination-ys a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    border-radius: 4px;
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
}

.pagination-ys a:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.pagination-ys a.is-disabled {
    color: var(--gray-200);
    pointer-events: none;
}



@media (max-width: 768px) {
	summary.s-102 {display:inline}
}

.risk-indicator.risk-info {
    background: #ade4e9;
    color: var(#000);
}



.modal-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: -1;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    pointer-events: auto;
}

    .modal-wrapper > div {
        width: 460px;
        height: 40%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        vertical-align: middle;
        border-radius: 6px;
        background: #fff;
        z-index: 1;
    }

.modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

.modal-content {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    outline: 0;
}

.modal-header {
    border-bottom: 1px solid #e5e5e5;
    background-color: #0B1F3A;
}

    .modal-header h4 {
        margin: 0;
        padding: 20px;
        color: #fff;
    }

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

.close {
    color: #fff;
    line-height: 25px;
    position: absolute;
    right: 12px;
    text-align: center;
    top: 10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
}

.close:hover {
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
}

.fancy {display:none}

.text-danger {
    color: #dc3545 !important;
}

/* Search-results layout: apply to YOUR results markup.
   Replace .your-result-row and .your-status-pill with the actual
   class names used in your server-rendered results. */
@media (max-width: 768px) {
  .your-result-row {          /* the row holding company name + status pill */
    display: flex;
    flex-wrap: wrap;          /* pill drops below the name when space runs out */
    gap: 0.5rem;
    align-items: flex-start;
  }
  .your-status-pill {         /* the status pill, e.g. ACTIVE - ACCOUNTS FILED */
    white-space: normal;      /* allow the text to wrap to two lines */
    max-width: 100%;
    text-align: left;
    float: none;              /* neutralise any float / absolute positioning */
    position: static;
  }
}


@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

/* ==========================================================================
   FLAG ICON FIX (2026.07.30): append-only block
   Paste at the VERY END of the live style.css, after the mobile-fix,
   mobile-fix-2 and account-menu-hover-fix blocks. Do not edit earlier rules.

   Problem: country flags on the site are emoji characters. Windows ships no
   flag glyphs in its system emoji font (Segoe UI Emoji), so Chrome and Edge
   on Windows desktop render two-letter codes (CN, DE, GB...) instead of
   flags. Firefox bundles its own emoji font (Twemoji Mozilla) and Android,
   macOS and iOS have flag glyphs in their system emoji fonts, which is why
   the flags appear to work everywhere except Chrome/Edge on Windows.

   Fix: a small (78 KB) self-hosted colour font containing ONLY flag glyphs:
   "Twemoji Country Flags" (COLR/CPAL format; supported by Chrome, Edge,
   Firefox and Safari). The unicode-range below restricts the font to flag
   codepoints, so ordinary text is untouched, and browsers download the font
   only on pages that actually contain a flag. As a side benefit, every
   browser now shows the SAME flag artwork, instead of each platform's own.

   Requires: TwemojiCountryFlags.woff2 uploaded to /fonts/ on the web server
   (same level as style.css), served with MIME type font/woff2.

   Attribution (required by licence): flag artwork from Twemoji
   (https://github.com/twitter/twemoji), CC-BY 4.0, packaged as
   "Twemoji Country Flags" by TalkJS (country-flag-emoji-polyfill, MIT).
   ========================================================================== */

@font-face {
    font-family: 'Twemoji Country Flags';
    src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0060-E007F;
}

/* Single source of control: every font-family rule in style.css resolves
   through var(--font). Prepending the flag font to that one variable fixes
   flags everywhere they appear, on every page, current and future, with no
   HTML changes. Because of the unicode-range above, this has no effect on
   any character other than flags. */
:root {
    --font: 'Twemoji Country Flags', 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* Server-rendered empty-state text ("No Information Available" etc.)
   outside .reporttable: match report data font size and row spacing */
.report-content p {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}