/* Layout only: fonts, colors, and buttons come from the site's shared stylesheet. */
[hidden] { display: none !important; }
body.card-page {
  min-height: 100svh;
  padding: clamp(16px, 4vw, 48px) 16px;
  background: var(--gray-soft);
}
.card {
  width: min(100%, 560px);
  margin: auto;
  background: var(--white);
  border: 1px solid #d3dadd;
  border-radius: 4px;
  overflow: hidden;
}
.card .brand { display: block; padding: 24px 28px; background: var(--white); }
.card .brand img { width: min(100%, 280px); height: auto; margin: auto; }
.card-identity {
  padding: 30px clamp(20px, 5vw, 36px);
  color: var(--white);
  background: linear-gradient(115deg, #050708 40%, #063042);
  border-bottom: 4px solid var(--blue);
}
.card h1 {
  margin: 0 0 14px;
  font-size: clamp(2.5rem, 10vw, 3.7rem);
  font-weight: 900;
  line-height: .95;
}
.card .role { margin: 0; font-size: 1.1rem; color: rgba(255,255,255,.86); }
.card .specialties { margin: 16px 0 0; font-size: .85rem; color: #c7eafb; }
.card-content { padding: 26px clamp(20px, 5vw, 36px); }
.card .actions { display: grid; gap: 12px; }
.card a { overflow-wrap: anywhere; text-underline-offset: 4px; }
.card button { font-family: inherit; font-size: inherit; cursor: pointer; }
.card .actions .button { justify-content: space-between; gap: 12px; text-align: left; }
.card .button > span:first-child { min-width: 0; }
.card small { display: block; font-size: .8rem; font-weight: 400; overflow-wrap: anywhere; }
.card .links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 18px; }
.card .links a { display: inline-flex; align-items: center; min-height: 44px; }
.card .links a, .card #card-url { color: var(--blue-deep); font-weight: 700; }
.card .share { margin-top: 20px; padding-top: 22px; border-top: 1px solid #d3dadd; }
.card h2 { margin: 0; font-size: 1.1rem; font-weight: 900; }
.card .share p { margin: 6px 0; color: #51565b; }
.card .share-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.card #card-status { font-size: .875rem; }
.card #card-status:empty { display: none; }
.card .footnote { color: #51565b; font-size: .75rem; margin: 22px 0 0; }
.card :focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .card .button { transition: none; }
  .card .button:hover, .card .button:focus-visible { transform: none; }
}