/* =========================================================================
   MedOps — global.css
   GLOBAL COLOUR THEME + design tokens + animations.

   This is the single source of truth for the look & feel. Change the brand
   by editing the variables in :root below — every button, gradient, badge and
   Tailwind colour utility (bg-brand, text-ink, border-line, ...) updates with
   it, in both light and dark mode.

   Colours are stored as space-separated RGB channels ("13 148 136") rather
   than hex so that Tailwind opacity modifiers keep working, e.g. bg-brand/60.

   Loaded AFTER dist/output.css so these tokens and helpers win.
   ========================================================================= */

/* ----------------------------------------------------------------------- *
 * 1. THEME TOKENS — light theme (default)
 * ----------------------------------------------------------------------- */


@layer base {
  :root {
    --background: 200 20% 99%;
    --foreground: 200 16% 10%;
    --card: 200 20% 99%;
    --card-foreground: 200 16% 10%;
    --popover: 200 20% 99%;
    --popover-foreground: 200 16% 10%;
    --primary: 200 64% 30%;
    --primary-foreground: 0 0% 100%;
    --secondary: 200 16% 95%;
    --secondary-foreground: 200 16% 17%;
    --muted: 200 16% 95%;
    --muted-foreground: 200 10% 46%;
    --accent: 200 50% 92%;
    --accent-foreground: 200 64% 20%;
    --destructive: 0 76% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 200 14% 87%;
    --input: 200 14% 87%;
    --ring: 200 64% 30%;
    --radius: 0.375rem;
  }
  .dark {
    --background: 200 22% 7%;
    --foreground: 200 20% 94%;
    --card: 200 22% 9%;
    --card-foreground: 200 20% 94%;
    --popover: 200 22% 9%;
    --popover-foreground: 200 20% 94%;
    --primary: 200 64% 50%;
    --primary-foreground: 200 22% 7%;
    --secondary: 200 16% 15%;
    --secondary-foreground: 200 20% 94%;
    --muted: 200 16% 15%;
    --muted-foreground: 200 10% 62%;
    --accent: 200 50% 18%;
    --accent-foreground: 200 64% 80%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 200 14% 20%;
    --input: 200 14% 20%;
    --ring: 200 64% 50%;
  }
}

:root {
  /* Surfaces & text — hue-200 (cyan-blue) palette.
     Stored as R G B channels (converted from the HSL design tokens shown in the
     comments) so Tailwind opacity modifiers keep working, e.g. bg-brand/60. */
  --c-bg: 252 253 253; /* hsl(200 20% 99%)  background */
  --c-surface: 255 255 255; /* hsl(200 20% 100%) card */
  --c-surface-2: 240 243 244; /* hsl(200 16% 95%) muted/secondary */
  --c-border: 217 223 226; /* hsl(200 14% 87%) border */
  --c-text: 21 27 30; /* hsl(200 16% 10%) foreground */
  --c-muted: 106 121 129; /* hsl(200 10% 46%) muted-foreground */

  /* Brand — primary */
  --c-brand: 28 93 125; /* hsl(200 64% 30%) primary */
  --c-brand-strong: 18 72 100; /* hsl(200 70% 23%) primary (hover) */
  --c-brand-soft: 224 238 245; /* hsl(200 50% 92%) accent tint */

  /* Accent — same hue family, used for gradients */
  --c-accent: 18 130 186; /* hsl(200 82% 40%) */
  --c-accent-2: 19 176 216; /* hsl(192 84% 46%) */

  /* Semantic status */
  --c-success: 24 149 108;
  --c-warning: 235 141 10;
  --c-danger: 224 31 31; /* hsl(0 76% 50%) destructive */

  /* Effects */
  --grid-line: 21 27 30;
  --grid-alpha: 0.04;
  --halo-1: 25 161 230;
  --halo-2: 44 198 237;
  --halo-3: 58 154 223;
  --halo-alpha: 0.16;

  color-scheme: light;
}

/* ----------------------------------------------------------------------- *
 * 2. THEME TOKENS — dark theme
 * ----------------------------------------------------------------------- */
[data-theme="dark"] {
  --c-bg: 14 19 22; /* hsl(200 22% 7%) */
  --c-surface: 18 25 28; /* hsl(200 22% 9%) */
  --c-surface-2: 32 40 44; /* hsl(200 16% 15%) */
  --c-border: 44 53 58; /* hsl(200 14% 20%) */
  --c-text: 237 241 243; /* hsl(200 20% 94%) */
  --c-muted: 148 161 168; /* hsl(200 10% 62%) */

  --c-brand: 46 155 209; /* hsl(200 64% 50%) */
  --c-brand-strong: 85 182 231; /* hsl(200 75% 62%) brighter hover */
  --c-brand-soft: 23 54 69; /* hsl(200 50% 18%) */

  --c-accent: 66 182 240; /* hsl(200 85% 60%) */
  --c-accent-2: 52 206 244; /* hsl(192 90% 58%) */

  --c-success: 43 202 149;
  --c-warning: 246 168 35;
  --c-danger: 226 80 80;

  --grid-line: 237 241 243;
  --grid-alpha: 0.05;
  --halo-1: 48 171 232;
  --halo-2: 58 202 238;
  --halo-3: 68 161 228;
  --halo-alpha: 0.22;

  color-scheme: dark;
}

/* ----------------------------------------------------------------------- *
 * 3. BASE
 * ----------------------------------------------------------------------- */
html {
  scroll-padding-top: 6rem; /* offset for the sticky navbar on anchor jumps */
}

body {
  background-color: rgb(var(--c-bg));
  color: rgb(var(--c-text));
  transition: background-color 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}

/* Smoother focus ring */
:focus-visible {
  outline: none;
}

/* Themed scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--c-brand) / 0.5) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgb(var(--c-brand) / 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--c-brand) / 0.7);
  background-clip: content-box;
}

/* ----------------------------------------------------------------------- *
 * 4. DECORATIVE HELPERS
 * ----------------------------------------------------------------------- */

/* Animated gradient text */
.text-gradient {
  background-image: linear-gradient(
    100deg,
    rgb(var(--c-brand)),
    rgb(var(--c-accent-2)),
    rgb(var(--c-accent)),
    rgb(var(--c-brand))
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-pan 7s linear infinite;
}

/* Brand gradient fill (buttons / accents) */
.bg-grad-brand {
  background-image: linear-gradient(
    120deg,
    rgb(var(--c-brand)),
    rgb(var(--c-accent-2)) 55%,
    rgb(var(--c-accent))
  );
}

/* Faint dotted/grid backdrop */
.bg-grid {
  background-image: linear-gradient(
      rgb(var(--grid-line) / var(--grid-alpha)) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgb(var(--grid-line) / var(--grid-alpha)) 1px,
      transparent 1px
    );
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 50%, transparent 100%);
}

/* Soft glowing colour blobs for section backgrounds */
.halo {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.halo-a {
  background: radial-gradient(circle at center, rgb(var(--halo-1) / var(--halo-alpha)), transparent 70%);
}
.halo-b {
  background: radial-gradient(circle at center, rgb(var(--halo-2) / var(--halo-alpha)), transparent 70%);
}
.halo-c {
  background: radial-gradient(circle at center, rgb(var(--halo-3) / var(--halo-alpha)), transparent 70%);
}

/* Gradient hairline divider */
.divider-grad {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--c-border)),
    rgb(var(--c-brand) / 0.5),
    rgb(var(--c-border)),
    transparent
  );
}

/* Gradient-border card: a 1px conic/linear border that reacts to hover */
.grad-border {
  position: relative;
  isolation: isolate;
}
.grad-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    140deg,
    rgb(var(--c-brand) / 0.55),
    rgb(var(--c-accent) / 0.15) 40%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  transition: opacity 0.35s ease;
  z-index: -1;
}
.grad-border:hover::before {
  opacity: 1;
}

/* ----------------------------------------------------------------------- *
 * 5. SCROLL-REVEAL (driven by IntersectionObserver in js/main.js)
 * ----------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"] {
  transform: translateX(-32px);
}
[data-reveal="right"] {
  transform: translateX(32px);
}
[data-reveal="scale"] {
  transform: scale(0.94);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------------- *
 * 6. NAVBAR scrolled state
 * ----------------------------------------------------------------------- */
.nav-shell {
  transition: background-color 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.nav-shell.is-scrolled {
  background-color: rgb(var(--c-surface) / 0.82);
  backdrop-filter: blur(14px);
  border-color: rgb(var(--c-border));
  box-shadow: 0 8px 30px -16px rgb(15 23 42 / 0.35);
}

/* Active animated underline for desktop nav links */
.nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: rgb(var(--c-brand));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

/* ----------------------------------------------------------------------- *
 * 7. SCROLL PROGRESS + BACK TO TOP
 * ----------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgb(var(--c-brand)), rgb(var(--c-accent)));
  z-index: 70;
}

.to-top {
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.to-top.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ----------------------------------------------------------------------- *
 * 8. THEME TOGGLE icon swap
 * ----------------------------------------------------------------------- */
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* ----------------------------------------------------------------------- *
 * 9. MARQUEE (trusted-by row)
 * ----------------------------------------------------------------------- */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ----------------------------------------------------------------------- *
 * 10. HERO DASHBOARD MOCKUP bits
 * ----------------------------------------------------------------------- */
/* Animated bars in the mock chart (height set inline, animated up on reveal) */
.mock-bar {
  transform: scaleY(0.04);
  transform-origin: bottom;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bar-delay, 0ms);
}
.is-visible .mock-bar,
.mock-chart.is-visible .mock-bar {
  transform: scaleY(1);
}

/* Floating side cards */
.floaty {
  animation: float var(--float-dur, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

/* Live status dot with pulsing ring */
.live-dot {
  position: relative;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 2px solid rgb(var(--c-success) / 0.7);
  animation: pulse-ring 2s ease-out infinite;
}

/* Animated ECG / heartbeat line */
.ecg path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: ecg 2.6s ease-in-out infinite;
}

/* ----------------------------------------------------------------------- *
 * 11. FAQ accordion
 * ----------------------------------------------------------------------- */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
}
.faq-panel > div {
  overflow: hidden;
}
.faq-item .faq-chevron {
  transition: transform 0.35s ease;
}
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}
.faq-item.is-open .faq-q {
  color: rgb(var(--c-brand));
}

/* ----------------------------------------------------------------------- *
 * 12. MISC interactive
 * ----------------------------------------------------------------------- */
.tilt {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
  transform-style: preserve-3d;
}

.feature-card:hover .feature-icon {
  transform: translateY(-3px) scale(1.06) rotate(-3deg);
  background-color: rgb(var(--c-brand));
  color: #fff;
}

/* Count-up numbers shouldn't reflow layout while ticking */
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------- *
 * 13. KEYFRAMES
 * ----------------------------------------------------------------------- */
@keyframes text-pan {
  to {
    background-position: 220% center;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes pulse-ring {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes ecg {
  0% {
    stroke-dashoffset: 320;
  }
  60%,
  100% {
    stroke-dashoffset: -320;
  }
}
@keyframes blob-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(24px, -18px) scale(1.08);
  }
  66% {
    transform: translate(-18px, 14px) scale(0.96);
  }
}
.animate-blob {
  animation: blob-drift 18s ease-in-out infinite;
}

@keyframes shimmer {
  to {
    background-position: 200% center;
  }
}

/* ----------------------------------------------------------------------- *
 * 14. REDUCED MOTION — honour user preference
 * ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .mock-bar {
    transform: scaleY(1) !important;
  }
}

/* ----------------------------------------------------------------------- *
 * 15. ARTICLE / PROSE (blog posts, privacy, terms)
 *     A lightweight typographic system — no Tailwind typography plugin.
 * ----------------------------------------------------------------------- */
.article {
  color: rgb(var(--c-text));
  font-size: 1.0625rem;
  line-height: 1.75;
}
.article > *:first-child {
  margin-top: 0;
}
.article p,
.article ul,
.article ol,
.article blockquote,
.article pre,
.article table,
.article figure {
  margin: 1.15em 0;
}
.article .lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgb(var(--c-muted));
}
.article h2 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 2.2em 0 0.7em;
  scroll-margin-top: 6rem;
}
.article h3 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1.8em 0 0.5em;
  scroll-margin-top: 6rem;
}
.article h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.5em 0 0.4em;
}
.article a {
  color: rgb(var(--c-brand));
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(var(--c-brand) / 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.article a:hover {
  text-decoration-color: rgb(var(--c-brand));
}
.article strong {
  color: rgb(var(--c-text));
  font-weight: 700;
}
.article ul,
.article ol {
  padding-left: 1.4em;
}
.article ul {
  list-style: none;
}
.article ul > li {
  position: relative;
  padding-left: 1.4em;
}
.article ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(var(--c-brand));
}
.article ol {
  list-style: decimal;
}
.article li {
  margin: 0.4em 0;
}
.article li::marker {
  color: rgb(var(--c-brand));
  font-weight: 700;
}
.article blockquote {
  border-left: 3px solid rgb(var(--c-brand));
  background: rgb(var(--c-brand) / 0.06);
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 0.9em 1.2em;
  font-size: 1.15rem;
  font-weight: 600;
  color: rgb(var(--c-text));
}
.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: rgb(var(--c-brand) / 0.1);
  color: rgb(var(--c-brand-strong));
  padding: 0.15em 0.4em;
  border-radius: 0.4rem;
}
[data-theme="dark"] .article code {
  color: rgb(var(--c-brand));
}
.article pre {
  background: rgb(var(--c-surface-2));
  border: 1px solid rgb(var(--c-border));
  border-radius: 0.9rem;
  padding: 1.1em 1.3em;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}
.article pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}
.article hr {
  border: 0;
  height: 1px;
  background: rgb(var(--c-border));
  margin: 2.4em 0;
}
.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.article th,
.article td {
  border: 1px solid rgb(var(--c-border));
  padding: 0.6em 0.8em;
  text-align: left;
}
.article th {
  background: rgb(var(--c-surface-2));
  font-weight: 700;
}
.article .callout {
  border: 1px solid rgb(var(--c-brand) / 0.3);
  background: rgb(var(--c-brand) / 0.06);
  border-radius: 1rem;
  padding: 1.1em 1.3em;
  font-size: 0.95rem;
}

/* On-this-page / table of contents */
.toc a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.875rem;
  color: rgb(var(--c-muted));
  transition: color 0.2s ease;
}
.toc a:hover {
  color: rgb(var(--c-brand));
}

/* Clamp helper for blog card excerpts */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------------- *
 * 16. HOME SECTIONS — bento pillars, journey stepper, role explorer, CTA
 * ----------------------------------------------------------------------- */

/* Bento card cursor-follow spotlight (--mx/--my set by js/main.js) */
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    440px circle at var(--mx, 50%) var(--my, 0%),
    rgb(var(--c-brand) / 0.1),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}
.bento-card:hover::after {
  opacity: 1;
}

/* Patient-journey stepper */
.journey-step {
  position: relative;
  text-align: center;
}
.journey-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 1.1rem;
  color: #fff;
  background-image: linear-gradient(135deg, rgb(var(--c-brand)), rgb(var(--c-accent-2)));
  box-shadow: 0 14px 30px -14px rgb(var(--c-brand) / 0.7);
  outline: 4px solid rgb(var(--c-bg));
}
.journey-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(var(--c-brand));
}
.journey-title {
  margin-top: 0.15rem;
  font-weight: 700;
}
.journey-text {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgb(var(--c-muted));
  max-width: 16rem;
  margin-left: auto;
  margin-right: auto;
}
.journey-track,
.journey-progress {
  display: none;
}
@media (min-width: 1024px) {
  .journey-track,
  .journey-progress {
    display: block;
    position: absolute;
    top: 1.75rem; /* node vertical centre */
    left: 8.33%;
    right: 8.33%;
    height: 2px;
    border-radius: 2px;
  }
  .journey-track {
    background: rgb(var(--c-border));
  }
  .journey-progress {
    background: linear-gradient(90deg, rgb(var(--c-brand)), rgb(var(--c-accent)));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }
  .journey.is-visible .journey-progress {
    transform: scaleX(1);
  }
}

/* Interactive role explorer */
.role-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  border-radius: 0.9rem;
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--c-muted));
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease,
    box-shadow 0.25s ease, transform 0.25s ease;
}
.role-tab:hover {
  color: rgb(var(--c-text));
  border-color: rgb(var(--c-brand) / 0.4);
}
.role-tab.is-active {
  color: #fff;
  border-color: transparent;
  background-image: linear-gradient(120deg, rgb(var(--c-brand)), rgb(var(--c-accent-2)));
  box-shadow: 0 12px 30px -14px rgb(var(--c-brand) / 0.7);
}
.role-tab-ico {
  display: inline-grid;
  place-items: center;
}
.role-panel {
  display: none;
}
.role-panel.is-active {
  display: block;
  animation: role-fade 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes role-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.role-cap {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.875rem;
  color: rgb(var(--c-muted));
}
.role-cap::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.28em;
  width: 0.4rem;
  height: 0.72rem;
  border: solid rgb(var(--c-brand));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* CTA rotating ring */
.cta-ring {
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent, rgb(255 255 255 / 0.55), transparent 38%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin-slow 16s linear infinite;
}
@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}