/* Figma Make article skin. Scoped to html.a-figma so other pages are untouched. */

html.a-figma {
  --a-paper: #f4f1e8;
  --a-ink: #17172c;
  --a-muted: rgba(23, 23, 44, 0.66);
  --a-muted-2: rgba(23, 23, 44, 0.62);
  --a-purple: #6046d7;
  --a-lime: #d9ff69;
  --a-coral: #ff826d;
  --a-lilac: #c9b8ff;
  --a-sky: #8fdcff;
  --a-sand: #f3cc7b;
  --a-pink: #f6b8d0;
  --a-line: rgba(23, 23, 44, 0.2);
  --a-serif: "Instrument Serif", "Times New Roman", serif;
  --a-sans: "DM Sans", "Helvetica Neue", sans-serif;
  --a-text: 1.0625rem;
  --a-measure: 45rem;
  --a-gutter: 1.25rem;
  --a-chrome: 5.5rem;
  --a-toc-bar: 3.25rem;
  --a-toc-sticky-top: calc(var(--a-chrome) + 16px);
  scroll-behavior: smooth;
  background: var(--a-paper);
  overflow-x: clip;
  overflow-y: visible;
}

@media (min-width: 768px) {
  html.a-figma {
    --a-text: 1.125rem;
    --a-gutter: 2rem;
  }
}

@media (min-width: 1280px) {
  html.a-figma {
    --a-gutter: 2.5rem;
  }
}

html.a-figma,
html.a-figma body.theme-light,
html.a-figma #page,
html.a-figma .page-content {
  background: radial-gradient(circle at 82% 6%, #c9b8ff38, transparent 24rem),
    var(--a-paper) !important;
  color: var(--a-ink) !important;
  font-family: var(--a-sans);
}

html.a-figma body {
  min-width: 320px;
  padding-bottom: 5.5rem;
  overflow-x: clip;
  overflow-y: visible;
}

html.a-figma #preloader {
  background: var(--a-paper) !important;
}

html.a-figma .page-content.d-article {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* overflow:hidden/auto on ancestors (template #page / .device-is-android /
   .page-content) creates a scroll containing block and kills position:sticky.
   clip on html/body still prevents sideways scroll without that side-effect. */
html.a-figma #page,
html.a-figma #page.device-is-android,
html.a-figma #page.device-is-ios,
html.a-figma .page-content,
html.a-figma .page-content.d-article,
html.a-figma main,
html.a-figma .a-figma-layout {
  overflow: visible !important;
}

html.a-figma .page-content {
  z-index: auto !important;
}

html.a-figma .d-article .card,
html.a-figma .d-article .card-style,
html.a-figma .d-article .container-fluid,
html.a-figma .d-article .container,
html.a-figma .d-article .content {
  overflow: visible !important;
}

html.a-figma .d-article a:not(.btn):not(.d-btn):not(.d-nav-item):not(.topic-card-link) {
  color: var(--a-purple);
  text-underline-offset: 0.15em;
}

/* —— Chrome —— */
html.a-figma .d-chrome,
html.a-figma .d-chrome::before {
  background: rgba(244, 241, 232, 0.92) !important;
  border-bottom: 1px solid var(--a-line);
}

html.a-figma .d-chrome-inner {
  max-width: 77.5rem;
  min-height: 5.375rem;
}

html.a-figma .d-brand {
  color: var(--a-ink) !important;
  font-family: var(--a-serif) !important;
  font-weight: 400 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.03em;
}

html.a-figma .d-nav-item,
html.a-figma .d-langs a {
  color: var(--a-ink) !important;
  font-weight: 600;
}

html.a-figma .d-nav-item:hover,
html.a-figma .d-nav-item.is-active {
  background: var(--a-lilac) !important;
  color: var(--a-ink) !important;
}

html.a-figma .d-nav-item--wa {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink);
  border-radius: 999px;
}

html.a-figma .d-menu-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--a-line);
  background: transparent;
}

html.a-figma .d-menu-btn span {
  background: var(--a-ink);
}

html.a-figma .d-sheet-panel {
  background: var(--a-paper);
  border-color: var(--a-ink);
}

html.a-figma .d-sheet-title {
  font-family: var(--a-serif);
  font-weight: 400;
  color: var(--a-ink);
}

html.a-figma .d-btn--primary {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink);
  box-shadow: 4px 4px 0 var(--a-ink);
  border-radius: 3px 18px;
}

html.a-figma .d-btn--secondary {
  background: transparent !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink);
  border-radius: 999px;
}

html.a-figma .d-footer {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  letter-spacing: 0.06em;
}

html.a-figma .d-footer h2,
html.a-figma .d-footer p,
html.a-figma .d-footer a {
  color: var(--a-ink) !important;
}

html.a-figma .d-footer h2 {
  font-family: var(--a-serif);
  font-weight: 400;
  font-size: 1.5rem !important;
  letter-spacing: -0.03em;
  text-transform: none;
}

html.a-figma .d-footer-grid {
  max-width: 77.5rem;
  margin: 0 auto;
  padding-left: var(--a-gutter);
  padding-right: var(--a-gutter);
}

html.a-figma .d-mobilebar {
  background: var(--a-ink) !important;
  border-top: 0;
  gap: 0.65rem;
  padding: 0.7rem 0.75rem calc(0.7rem + env(safe-area-inset-bottom));
}

html.a-figma .d-mobilebar-call,
html.a-figma .d-mobilebar-wa {
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  min-height: 44px;
  display: grid;
  place-items: center;
  text-decoration: none !important;
}

html.a-figma .d-mobilebar-call {
  background: transparent;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

html.a-figma .d-mobilebar-wa {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink);
}

/* —— Hero —— */
html.a-figma .a-figma-hero {
  width: min(100% - (var(--a-gutter) * 2), 77.5rem);
  margin: 0 auto;
  padding: 2.5rem 0 1.5rem;
}

html.a-figma .a-figma-hero .card-style,
html.a-figma .a-figma-hero .content,
html.a-figma .a-figma-hero-cta.card-style,
html.a-figma .a-figma-hero-cta .content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html.a-figma .a-figma-eyebrow {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.4rem !important;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  color: var(--a-ink);
  text-align: left !important;
}

html.a-figma .a-figma-eyebrow-dot {
  background: var(--a-coral);
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  box-shadow: 0 0 0 4px rgba(255, 130, 109, 0.2);
  flex: 0 0 auto;
}

html.a-figma .a-figma-hero h1,
html.a-figma .a-figma-hero h1.text-center {
  font-family: var(--a-serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 12vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  max-width: 14ch;
  margin: 0;
  text-align: left !important;
  color: var(--a-ink) !important;
}

html.a-figma .a-figma-hero h1 em,
html.a-figma .a-figma-hero h1 span.a-figma-em {
  color: var(--a-purple);
  font-style: italic;
  font-weight: 400;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

html.a-figma .a-figma-hero h1 em::after,
html.a-figma .a-figma-hero h1 span.a-figma-em::after {
  content: "";
  position: absolute;
  left: 0.2em;
  right: 0;
  bottom: -0.12em;
  height: 0.55rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 9C58 2 126 2 198 8' fill='none' stroke='%236046d7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

html.a-figma .a-figma-hero h2,
html.a-figma .a-figma-hero h2.text-center,
html.a-figma .a-figma-hero h2.color-aqua-light,
html.a-figma .a-figma-hero h2.h4,
html.a-figma .a-figma-hero h2.h3 {
  font-family: var(--a-sans);
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  letter-spacing: 0;
  max-width: 32rem;
  margin: 1.75rem 0 0 !important;
  text-align: left !important;
  color: var(--a-muted) !important;
}

html.a-figma .a-figma-hero .color-aqua-light {
  color: var(--a-muted) !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  max-width: 32rem !important;
  margin: 1.75rem 0 0 !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html.a-figma .a-figma-hero-cta {
  margin-top: 1.75rem !important;
}

html.a-figma .a-figma-hero-cta .cta-msg {
  text-align: left !important;
  color: var(--a-muted) !important;
  font-size: 0.85rem !important;
  margin-bottom: 1.1rem !important;
  max-width: 36rem;
}

html.a-figma .d-article a.bg-green-dark.btn {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink) !important;
  box-shadow: 5px 5px 0 var(--a-ink);
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.95rem 1.35rem !important;
  width: auto;
  max-width: 100%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

html.a-figma .d-article a.bg-green-dark.btn:hover {
  box-shadow: 2px 2px 0 var(--a-ink);
  transform: translate(3px, 3px);
}

html.a-figma .d-article a.bg-blue-dark.btn {
  background: transparent !important;
  color: var(--a-ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--a-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  padding: 0.5rem 0 0.25rem !important;
  width: auto;
  display: inline-flex !important;
}

html.a-figma .a-figma-hero-cta .content.py-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}

html.a-figma .a-figma-hero-cta .cta-msg {
  flex: 1 1 100%;
}

html.a-figma .a-figma-hero .d-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.25rem 0 0 !important;
  padding: 0.85rem 1rem !important;
  background: var(--a-lilac) !important;
  border: 1px solid var(--a-ink) !important;
  border-radius: 1.5rem 0.25rem 1.5rem 0.25rem;
  max-width: 28rem;
}

html.a-figma .a-figma-hero .d-author img {
  width: 4.5rem !important;
  height: 5.5rem !important;
  flex: 0 0 4.5rem;
  object-fit: cover;
  border-radius: 48% 48% 6px 6px !important;
  border: 1px solid var(--a-ink);
}

html.a-figma .a-figma-hero .d-author p {
  margin: 0 !important;
  text-align: left !important;
}

html.a-figma .a-figma-hero .d-author-name {
  font-family: var(--a-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--a-ink) !important;
}

html.a-figma .a-figma-hero .d-author-role,
html.a-figma .a-figma-hero .d-author-place {
  color: var(--a-muted) !important;
  font-size: 0.8rem;
  font-weight: 500;
}

/* —— Ticker —— */
html.a-figma .a-figma-ticker {
  background: var(--a-ink);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.85rem 0;
  margin: 1.5rem calc(var(--a-gutter) * -0.35) 2.5rem;
  transform: rotate(-1.2deg);
  font-family: var(--a-serif);
  font-size: 1.125rem;
}

html.a-figma .a-figma-ticker-track {
  display: inline-block;
  width: max-content;
  animation: a-figma-ticker 28s linear infinite;
}

html.a-figma .a-figma-ticker span {
  margin: 0 1.15rem;
}

html.a-figma .a-figma-ticker span[aria-hidden] {
  color: var(--a-lime);
}

@keyframes a-figma-ticker {
  to {
    transform: translateX(-50%);
  }
}

/* —— Layout + TOC —— */
html.a-figma .a-figma-layout {
  width: min(100% - (var(--a-gutter) * 2), 77.5rem);
  margin: 0 auto 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* Reading-column overflow: pages leave article blocks as siblings of the
   empty .a-figma-body, so containment has to live on .a-figma-layout. */
html.a-figma .a-figma-layout > *,
html.a-figma .a-figma-layout .a-figma-body,
html.a-figma .a-figma-layout section,
html.a-figma .a-figma-layout .container-fluid,
html.a-figma .a-figma-layout .container,
html.a-figma .a-figma-layout .row,
html.a-figma .a-figma-layout .col,
html.a-figma .a-figma-layout [class*="col-"],
html.a-figma .a-figma-layout .card,
html.a-figma .a-figma-layout .card-style,
html.a-figma .a-figma-layout .card-body,
html.a-figma .a-figma-layout .content,
html.a-figma .a-figma-layout .related-thumb-grid,
html.a-figma .a-figma-layout .d-flex,
html.a-figma .a-figma-layout .flex-fill,
html.a-figma .a-figma-layout .topic-card-link {
  min-width: 0;
  max-width: 100%;
}

html.a-figma .a-figma-layout .container-fluid,
html.a-figma .a-figma-layout .container,
html.a-figma .a-figma-layout .row {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

html.a-figma .a-figma-layout img,
html.a-figma .a-figma-layout video,
html.a-figma .a-figma-layout iframe,
html.a-figma .a-figma-layout figure,
html.a-figma .a-figma-layout .card {
  max-width: 100%;
  height: auto;
}

html.a-figma .a-figma-toc {
  position: sticky;
  top: var(--a-chrome);
  z-index: 30;
  background: rgba(244, 241, 232, 0.96);
  border: 1px solid var(--a-ink);
  border-radius: 1.15rem;
  padding: 0.7rem 1rem;
}

html.a-figma .a-figma-toc-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

html.a-figma .a-figma-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.85rem;
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--a-purple);
}

html.a-figma .a-figma-toc-current {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--a-ink);
}

html.a-figma .a-figma-toc-current:empty {
  display: none;
}

html.a-figma .a-figma-toc-toggle::after {
  content: "";
  flex-shrink: 0;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.2rem;
  border-right: 2px solid var(--a-ink);
  border-bottom: 2px solid var(--a-ink);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

html.a-figma .a-figma-toc-check:checked + .a-figma-toc-toggle::after {
  transform: rotate(225deg);
  margin-top: 0.25rem;
}

html.a-figma .a-figma-toc-list {
  display: none;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--a-line);
  max-height: 60vh;
  overflow-x: clip;
  overflow-y: auto;
}

html.a-figma .a-figma-toc-check:checked ~ .a-figma-toc-list {
  display: grid;
  gap: 0.35rem;
}

html.a-figma .a-figma-toc-list a {
  display: block;
  color: var(--a-ink) !important;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.35rem 0.55rem;
  border-radius: 0.4rem;
  border-left: 3px solid transparent;
}

html.a-figma .a-figma-toc-list a:hover {
  color: var(--a-purple) !important;
}

html.a-figma .a-figma-toc-list a.is-active,
html.a-figma .a-figma-toc-list a[aria-current="true"] {
  background: var(--a-lime);
  border-left-color: var(--a-ink);
  color: var(--a-ink) !important;
}

html.a-figma .a-figma-body {
  min-width: 0;
  max-width: var(--a-measure);
}

/* —— Article type —— */
html.a-figma .a-figma-body,
html.a-figma .a-figma-body p,
html.a-figma .a-figma-body li,
html.a-figma .a-figma-body .card-text {
  font-family: var(--a-sans);
  font-size: var(--a-text);
  line-height: 1.7;
  color: var(--a-ink);
  text-align: left !important;
}

html.a-figma .a-figma-body .justify-text {
  text-align: left !important;
}

html.a-figma .a-figma-body h2,
html.a-figma .a-figma-body h2.card-title,
html.a-figma .a-figma-body h2.text-white,
html.a-figma .a-figma-body h2.text-primary {
  font-family: var(--a-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.85rem, 5vw, 2.65rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em;
  color: var(--a-ink) !important;
  margin: 0 0 1rem !important;
  text-align: left !important;
}

html.a-figma .a-figma-body h3,
html.a-figma .a-figma-body h3.card-title,
html.a-figma .a-figma-body h4,
html.a-figma .a-figma-body h4.card-title {
  font-family: var(--a-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.35rem, 3.5vw, 1.85rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  color: var(--a-ink) !important;
  margin: 0 0 0.85rem !important;
}

html.a-figma .a-figma-body h2[id],
html.a-figma .a-figma-body [id] {
  scroll-margin-top: calc(var(--a-chrome) + var(--a-toc-bar) + 16px);
}

html.a-figma .a-figma-body p {
  margin: 0 0 1.05rem;
}

html.a-figma .a-figma-body ul,
html.a-figma .a-figma-body ol {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

html.a-figma .a-figma-body li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.35rem;
  border-bottom: 1px solid var(--a-line);
}

html.a-figma .a-figma-body ul li::before {
  content: "↳";
  position: absolute;
  left: 0;
  color: var(--a-purple);
}

html.a-figma .a-figma-body ol {
  counter-reset: a-item;
}

html.a-figma .a-figma-body ol li {
  counter-increment: a-item;
  padding-left: 2.4rem;
}

html.a-figma .a-figma-body ol li::before {
  content: counter(a-item, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--a-purple);
  font-family: var(--a-serif);
}

/* Flatten default cards into the reading column */
html.a-figma .a-figma-body .container-fluid,
html.a-figma .a-figma-body .container,
html.a-figma .a-figma-body .content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 2.25rem !important;
  padding: 0 !important;
}

html.a-figma .a-figma-body .card,
html.a-figma .a-figma-body .card-style {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 2.5rem !important;
  overflow: visible !important;
  float: none !important;
}

html.a-figma .a-figma-body .card-body,
html.a-figma .a-figma-body .content.py-3 {
  padding: 0 !important;
}

html.a-figma .a-figma-body .row,
html.a-figma .a-figma-body [class*="col-"] {
  display: block;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html.a-figma .a-figma-body .row:not(.a-figma-types):not(.a-figma-related):not(.a-figma-figures) [class*="col-"] + [class*="col-"] {
  margin-top: 1.5rem !important;
}

html.a-figma .a-figma-body .g-0,
html.a-figma .a-figma-body .m-0,
html.a-figma .a-figma-body .p-0,
html.a-figma .a-figma-body .p-2,
html.a-figma .a-figma-body .m-2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.a-figma .a-figma-body img,
html.a-figma .a-figma-body .img-fluid,
html.a-figma .a-figma-body .image-thumbnail,
html.a-figma .a-figma-body .image-thumbnail-alp {
  float: none !important;
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 0 1.15rem;
}

html.a-figma .a-figma-body .ratio {
  position: relative;
  width: 100%;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 0 1.5rem;
  padding: 0.7rem;
  background: #fff;
  border: 1px solid var(--a-ink);
}

html.a-figma .a-figma-body .ratio::before {
  display: none !important;
}

html.a-figma .a-figma-body .ratio img {
  position: static !important;
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  margin: 0;
}

html.a-figma .a-figma-body .card-style > img.img-fluid {
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.7rem;
  background: #fff;
  border: 1px solid var(--a-ink);
}

html.a-figma .a-figma-body .card-style > .p-2,
html.a-figma .a-figma-body .card-style > .p-2.mx-auto {
  margin: 0 0 2rem !important;
  padding: 0 0.15rem 0.25rem !important;
  color: var(--a-muted);
  font-size: 0.85rem !important;
}

/* Callout cards */
html.a-figma .a-figma-body .card-style[style*="fef3c7"] {
  background: var(--a-sand) !important;
  border: 1px solid var(--a-ink) !important;
  border-radius: 1.25rem !important;
  padding: 1.35rem 1.25rem !important;
  margin-bottom: 2.5rem !important;
}

html.a-figma .a-figma-body .bg-danger {
  background: var(--a-coral) !important;
  border: 1px solid var(--a-ink) !important;
  border-radius: 1.25rem !important;
  padding: 1.5rem 1.25rem !important;
  margin-bottom: 2.5rem !important;
}

html.a-figma .a-figma-body .bg-danger .text-white,
html.a-figma .a-figma-body .bg-danger .card-text,
html.a-figma .a-figma-body .bg-danger h2 {
  color: var(--a-ink) !important;
}

html.a-figma .a-figma-body .text-danger {
  color: var(--a-ink) !important;
  background: var(--a-pink);
  padding: 1rem 1.1rem;
  border: 1px solid var(--a-ink);
  border-radius: 1rem;
}

html.a-figma .a-figma-body .cta-box {
  background: var(--a-ink) !important;
  color: #fff !important;
  border-radius: 1.25rem !important;
  padding: 1.35rem 1.25rem !important;
  margin: 0 0 2.5rem !important;
}

html.a-figma .a-figma-body .cta-box .cta-msg,
html.a-figma .a-figma-body .cta-box .color-theme {
  color: rgba(255, 255, 255, 0.78) !important;
  text-align: left !important;
}

html.a-figma .a-figma-body .cta-box a.bg-green-dark.btn {
  margin-bottom: 0.85rem !important;
}

html.a-figma .a-figma-body .cta-box a.bg-blue-dark.btn {
  color: #fff !important;
  border-bottom-color: #fff !important;
}

/* Type / side-by-side figure grids */
html.a-figma .a-figma-types,
html.a-figma .a-figma-figures {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.15rem !important;
  margin: 0.5rem 0 2rem !important;
}

html.a-figma .a-figma-types {
  align-items: stretch;
}

html.a-figma .a-figma-figures {
  align-items: start;
}

html.a-figma .a-figma-types > [class*="col-"],
html.a-figma .a-figma-figures > [class*="col-"] {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

html.a-figma .a-figma-figures > [class*="col-"] {
  height: auto !important;
  min-height: 0 !important;
  align-self: start;
}

html.a-figma .a-figma-type {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: auto;
  min-height: 0;
  padding: 0.85rem 0.85rem 1.1rem;
  background: #fff;
  border: 1px solid var(--a-ink);
  border-radius: 0.35rem 1.35rem;
}

/* Equal-height type tiles only — do not stretch image cards beside text. */
html.a-figma .a-figma-types .a-figma-type {
  min-height: 100%;
}

html.a-figma .a-figma-type img,
html.a-figma .a-figma-type .image-thumbnail-alp,
html.a-figma .a-figma-types img,
html.a-figma .a-figma-figures img {
  width: 100%;
  max-height: none !important;
  height: auto !important;
  object-fit: contain;
  margin: 0;
  background: #fff;
}

html.a-figma .a-figma-type figcaption,
html.a-figma .a-figma-type p,
html.a-figma .a-figma-figures figcaption,
html.a-figma .a-figma-figures > [class*="col-"] > p {
  margin: 0 !important;
  padding: 0 0.15rem !important;
  color: var(--a-muted);
  font-size: 0.95rem !important;
  line-height: 1.6;
}

html.a-figma .a-figma-type strong {
  display: block;
  font-family: var(--a-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--a-ink) !important;
  margin-bottom: 0.35rem;
}

/*
  Solo text columns inside colored info boxes / leftover Bootstrap halves.
  .a-figma-figures is a 2-col grid; a lone .card-body or .col-md-6 sat in
  column 1 (~half / ~260px) with the sibling cell empty.
*/
html.a-figma .a-figma-body .row > [class*="col-"]:empty {
  display: none !important;
}

html.a-figma .a-figma-body .row > [class*="col-"]:only-child,
html.a-figma .a-figma-body .row > .card-body:only-child,
html.a-figma .a-figma-figures > :only-child,
html.a-figma .a-figma-body .row > [class*="col-"]:has(+ [class*="col-"]:empty),
html.a-figma .a-figma-body .row:has(> [class*="col-"] + [class*="col-"]:empty) > [class*="col-"]:not(:empty),
html.a-figma .a-figma-body .row:has(> [hidden], > .d-none:not([class*="d-sm-"]):not([class*="d-md-"]):not([class*="d-lg-"])) > [class*="col-"]:not([hidden]):not(.d-none) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1;
}

html.a-figma .a-figma-figures:has(> :only-child),
html.a-figma .a-figma-figures:has(> .card-body:only-child),
html.a-figma .a-figma-body .row:has(> [class*="col-"]:only-child),
html.a-figma .a-figma-body .row:has(> .card-body:only-child),
html.a-figma .a-figma-body .row:has(> [class*="col-"] + [class*="col-"]:empty),
html.a-figma .bg-danger .a-figma-figures,
html.a-figma .bg-fade-blue-dark .a-figma-figures,
html.a-figma .card-style[style*="background"] .a-figma-figures:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr) !important;
}

html.a-figma .a-figma-body .row > [class*="col-"]:only-child .card-body,
html.a-figma .a-figma-body .row > .card-body:only-child,
html.a-figma .a-figma-figures > :only-child,
html.a-figma .a-figma-figures > :only-child .card-body,
html.a-figma .bg-danger .card-body,
html.a-figma .bg-fade-blue-dark .card-body,
html.a-figma .card-style[style*="background"] .card-body {
  max-width: min(100%, 70ch);
}

/* Image card hugs the image; inner .ratio is not a second stretched panel. */
html.a-figma .a-figma-figures .a-figma-type {
  width: 100%;
  height: auto;
  min-height: 0;
  align-self: start;
}

html.a-figma .a-figma-figures .a-figma-type .ratio,
html.a-figma .a-figma-figures > [class*="col-"] > .ratio {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

html.a-figma .a-figma-figures .a-figma-type img,
html.a-figma .a-figma-figures > [class*="col-"] img {
  width: 100% !important;
  height: auto !important;
}

/* Cards / flex children in the reading column size to content, not stretch. */
html.a-figma .a-figma-body .card:not(:has(.topic-card-link)):not(.flex-fill),
html.a-figma .a-figma-body .card-style:not(:has(.topic-card-link)):not(.flex-fill),
html.a-figma .a-figma-body .card-body,
html.a-figma .a-figma-body figure,
html.a-figma .a-figma-layout .row:not(.a-figma-related):not(.a-figma-types) {
  height: auto;
  min-height: 0;
  align-self: start;
}

html.a-figma .a-figma-body .d-flex:not(.a-figma-related):not(:has(.topic-card-link)) {
  align-items: flex-start;
  height: auto;
}

/* Related topic cards */
html.a-figma .a-figma-related,
html.a-figma .related-thumb-grid .row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem !important;
  margin: 0 0 2.5rem !important;
}

html.a-figma .a-figma-related > [class*="col-"] {
  display: block !important;
  width: auto !important;
}

html.a-figma .a-figma-related .card-style {
  margin: 0 !important;
  height: 100%;
}

html.a-figma .topic-card-link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  text-decoration: none !important;
  color: var(--a-ink) !important;
  background: var(--a-lime);
  border: 1px solid var(--a-ink);
  border-radius: 0.35rem 1.35rem;
  overflow: hidden;
  transition: transform 0.18s;
}

html.a-figma .a-figma-related > :nth-child(2) .topic-card-link {
  background: var(--a-lilac);
}

html.a-figma .a-figma-related > :nth-child(3) .topic-card-link {
  background: var(--a-coral);
}

html.a-figma .a-figma-related > :nth-child(4) .topic-card-link {
  background: var(--a-sky);
}

html.a-figma .topic-card-link:hover {
  transform: translateY(-4px) rotate(-0.4deg);
}

html.a-figma img.topic-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 !important;
  border-bottom: 1px solid var(--a-ink);
}

html.a-figma .topic-card__title {
  display: block;
  padding: 0.85rem 0.9rem 1.1rem;
  font-family: var(--a-serif);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.15;
}

/* Video 16:9 — wrapper fills the box; media fills the wrapper. */
html.a-figma .video-responsive,
html.a-figma .responsive-iframe {
  position: relative !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  margin: 0 0 1.5rem;
  background: var(--a-ink);
  border: 1px solid var(--a-ink);
  border-radius: 0.85rem;
}

html.a-figma .video-responsive > .yt-facade,
html.a-figma .video-responsive .yt-facade,
html.a-figma .video-responsive .yt-facade__btn,
html.a-figma .video-responsive iframe,
html.a-figma .video-responsive video,
html.a-figma .responsive-iframe > .yt-facade,
html.a-figma .responsive-iframe .yt-facade,
html.a-figma .responsive-iframe .yt-facade__btn,
html.a-figma .responsive-iframe iframe,
html.a-figma .responsive-iframe video {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0;
}

html.a-figma .video-responsive img,
html.a-figma .video-responsive video,
html.a-figma .responsive-iframe img,
html.a-figma .responsive-iframe video,
html.a-figma .yt-facade__btn img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.a-figma .a-figma-body video,
html.a-figma .a-figma-figures video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: var(--a-ink);
}

/* FAQ accordion */
html.a-figma .accordion.faq-zebra,
html.a-figma .accordion {
  --bs-accordion-border-color: transparent;
  display: grid;
  gap: 0.75rem;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

html.a-figma .accordion-item {
  background: #fff !important;
  border: 1px solid var(--a-ink) !important;
  border-radius: 1.1rem !important;
  overflow: hidden;
}

html.a-figma .accordion-item + .accordion-item {
  margin: 0;
}

html.a-figma .accordion-header {
  margin: 0;
}

html.a-figma .accordion-button {
  background: transparent !important;
  color: var(--a-ink) !important;
  font-family: var(--a-serif);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: none !important;
  padding: 1rem 1.1rem;
}

html.a-figma .accordion-button::after {
  background-image: none !important;
  content: "+" !important;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--a-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--a-serif);
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  transform: none !important;
}

html.a-figma .accordion-button:not(.collapsed)::after {
  content: "−" !important;
  transform: none !important;
}

html.a-figma .accordion-body {
  color: var(--a-muted);
  font-size: 1rem;
  line-height: 1.7;
  padding: 0 1.1rem 1.15rem;
}

/* Author / byline card */
html.a-figma .a-figma-byline {
  background: var(--a-lilac) !important;
  border: 1px solid var(--a-ink) !important;
  border-radius: 1.25rem !important;
  padding: 1.35rem 1.25rem !important;
}

html.a-figma .a-figma-byline p {
  margin: 0 0 0.35rem !important;
  font-size: 0.92rem !important;
}

html.a-figma .a-figma-byline p:last-child {
  margin-bottom: 0 !important;
  color: var(--a-muted) !important;
}

/* 768 */
@media (min-width: 768px) {
  html.a-figma .a-figma-types {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem !important;
  }

  html.a-figma .a-figma-related,
  html.a-figma .related-thumb-grid .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem !important;
  }

  html.a-figma .a-figma-hero .d-author img {
    width: 5.5rem !important;
    height: 6.75rem !important;
    flex-basis: 5.5rem;
  }
}

/* Text + image figure rows: two columns from 992px; stack below. */
@media (min-width: 992px) {
  html.a-figma .a-figma-figures {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1.25rem !important;
  }

  html.a-figma .a-figma-figures:has(> :only-child),
  html.a-figma .a-figma-figures:has(> .card-body:only-child),
  html.a-figma .bg-danger .a-figma-figures,
  html.a-figma .bg-fade-blue-dark .a-figma-figures {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.a-figma .a-figma-figures:has(> [class*="col-"] .card-body):has(> [class*="col-"] :is(figure, img, .ratio)) > [class*="col-"]:has(figure, img, .ratio) {
    position: sticky;
    top: calc(var(--a-chrome) + var(--a-toc-bar) + 16px);
    align-self: start;
  }
}

/* 1024: sticky TOC rail beside the article */
@media (min-width: 1024px) {
  html.a-figma {
    --a-toc-bar: 0px;
  }

  html.a-figma .a-figma-layout {
    grid-template-columns: 15.5rem minmax(0, var(--a-measure));
    justify-content: center;
    align-items: start;
    gap: 3rem;
  }

  html.a-figma .a-figma-toc {
    position: sticky;
    top: var(--a-toc-sticky-top);
    z-index: 2;
    max-height: calc(100vh - var(--a-toc-sticky-top) - 24px);
    overflow-x: clip;
    overflow-y: auto;
    padding: 1.15rem 1rem 1.35rem;
  }

  html.a-figma .a-figma-toc-toggle {
    cursor: default;
    pointer-events: none;
  }

  html.a-figma .a-figma-toc-toggle::after,
  html.a-figma .a-figma-toc-current {
    display: none;
  }

  html.a-figma .a-figma-toc-list,
  html.a-figma .a-figma-toc-check:not(:checked) ~ .a-figma-toc-list {
    display: grid !important;
    gap: 0.4rem;
    max-height: none;
    overflow: visible;
  }

  html.a-figma .a-figma-types,
  html.a-figma .a-figma-figures {
    grid-template-columns: 1fr 1fr;
  }

  html.a-figma .a-figma-figures:has(> :only-child),
  html.a-figma .bg-danger .a-figma-figures,
  html.a-figma .bg-fade-blue-dark .a-figma-figures {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.a-figma {
    scroll-behavior: auto;
  }

  html.a-figma .a-figma-ticker-track,
  html.a-figma .topic-card-link,
  html.a-figma .d-article a.bg-green-dark.btn,
  html.a-figma .a-figma-toc-toggle::after {
    animation: none;
    transition: none;
  }
}

/* Long single-word titles (e.g. Lipomyelomeningosel) must wrap on phones */
html.a-figma h1,
html.a-figma h1 .a-figma-em {
  overflow-wrap: anywhere;
  hyphens: auto;
}
html.a-figma h1 .a-figma-em {
  white-space: normal;
  max-width: 100%;
}

/* Desktop: on pages whose article blocks are siblings of .a-figma-body
   (unbalanced legacy markup), grid auto-placement alternated blocks
   between the TOC column and the reading column. Pin the TOC to column 1
   across all rows and every other block to column 2. Row gap is replaced
   by block margins so the TOC's row span adds no empty space. */
@media (min-width: 1024px) {
  html.a-figma .a-figma-layout {
    row-gap: 0;
  }
  html.a-figma .a-figma-layout > .a-figma-toc {
    grid-column: 1;
    grid-row: 1 / span 400;
  }
  html.a-figma .a-figma-layout > :not(.a-figma-toc) {
    grid-column: 2;
  }
  html.a-figma .a-figma-layout > :not(.a-figma-toc) + :not(.a-figma-toc) {
    margin-top: 1.5rem;
  }
}

/* Article headings that live outside .a-figma-body (h2.card-title etc.)
   get the same treatment as headings inside it. */
html.a-figma .a-figma-layout > :not(.a-figma-toc) h2,
html.a-figma .a-figma-layout > :not(.a-figma-toc) h2.card-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--a-ink, #17172c);
  margin: 0 0 0.75rem;
}

/* Card captions under topic thumbnails: larger and bold (DM Sans, since
   Instrument Serif has no bold weight) */
html.a-figma .topic-card__title {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
}

/* —— Utility / content page template (html.a-figma.a-figma--page) ——
   Lighter than the article skin: no TOC rail unless the page opts in
   with .a-figma-toc. Existing article pages do not use --page. */

html.a-figma.a-figma--page {
  --a-measure: 46rem;
}

html.a-figma.a-figma--page .a-figma-hero {
  padding-top: 2rem;
  padding-bottom: 0.75rem;
}

html.a-figma.a-figma--page .a-figma-hero h1,
html.a-figma.a-figma--page .a-figma-hero h1.text-center,
html.a-figma.a-figma--page .a-figma-hero h1.font-700,
html.a-figma.a-figma--page .a-figma-hero h1.font-40,
html.a-figma.a-figma--page .a-figma-hero h1.font-20 {
  font-size: clamp(2.35rem, 9vw, 4.75rem);
  max-width: 16ch;
  line-height: 0.92;
}

html.a-figma.a-figma--page .a-figma-hero--center,
html.a-figma.a-figma--page .a-figma-hero--center .a-figma-eyebrow {
  justify-content: center;
  text-align: center;
}

html.a-figma.a-figma--page .a-figma-hero--center h1 {
  margin-inline: auto;
  text-align: center !important;
}

html.a-figma.a-figma--page .a-figma-layout {
  display: block;
  width: min(100% - (var(--a-gutter) * 2), 48rem);
  margin: 0 auto 3.5rem;
  padding: 0;
}

html.a-figma.a-figma--page .a-figma-layout--wide {
  width: min(100% - (var(--a-gutter) * 2), 72rem);
}

html.a-figma.a-figma--page .a-figma-body {
  max-width: none;
}

html.a-figma.a-figma--page .page-content.d-article,
html.a-figma.a-figma--page .page-content {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 2rem !important;
}

@media (min-width: 1024px) {
  html.a-figma.a-figma--page .a-figma-layout {
    display: block;
    grid-template-columns: none;
    width: min(100% - (var(--a-gutter) * 2), 48rem);
  }

  html.a-figma.a-figma--page .a-figma-layout--wide {
    width: min(100% - (var(--a-gutter) * 2), 72rem);
  }

  html.a-figma.a-figma--page .a-figma-layout:has(> .a-figma-toc) {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, var(--a-measure));
    justify-content: center;
    align-items: start;
    gap: 3rem;
    width: min(100% - (var(--a-gutter) * 2), 77.5rem);
  }
}

/* Readable column + card grid */
html.a-figma.a-figma--page .a-figma-cards,
html.a-figma.a-figma--page .a-figma-body .a-figma-cards {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
}

@media (min-width: 768px) {
  html.a-figma.a-figma--page .a-figma-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.a-figma.a-figma--page .a-figma-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

html.a-figma.a-figma--page .a-figma-card,
html.a-figma.a-figma--page .a-figma-body > .card,
html.a-figma.a-figma--page .a-figma-body > .card-style,
html.a-figma.a-figma--page .a-figma-body > .d-video-block,
html.a-figma.a-figma--page .a-figma-body > section.card {
  background: #fff;
  border: 1px solid var(--a-ink);
  border-radius: 1.6rem;
  box-shadow: 6px 6px 0 var(--a-ink);
  overflow-x: clip;
  overflow-y: visible;
  margin: 0 0 1.15rem;
  padding: 1.25rem 1.3rem 1.35rem;
}

html.a-figma.a-figma--page .a-figma-card--lilac,
html.a-figma.a-figma--page .a-figma-body > .card:nth-of-type(5n + 1),
html.a-figma.a-figma--page .a-figma-body > .d-video-block:nth-of-type(5n + 1) {
  background: var(--a-lilac);
}

html.a-figma.a-figma--page .a-figma-card--lime,
html.a-figma.a-figma--page .a-figma-body > .card:nth-of-type(5n + 2),
html.a-figma.a-figma--page .a-figma-body > .d-video-block:nth-of-type(5n + 2) {
  background: var(--a-lime);
}

html.a-figma.a-figma--page .a-figma-card--coral,
html.a-figma.a-figma--page .a-figma-body > .card:nth-of-type(5n + 3),
html.a-figma.a-figma--page .a-figma-body > .d-video-block:nth-of-type(5n + 3) {
  background: var(--a-coral);
}

html.a-figma.a-figma--page .a-figma-card--sky,
html.a-figma.a-figma--page .a-figma-body > .card:nth-of-type(5n + 4) {
  background: var(--a-sky);
}

html.a-figma.a-figma--page .a-figma-card--sand,
html.a-figma.a-figma--page .a-figma-body > .card:nth-of-type(5n + 5) {
  background: var(--a-sand);
}

html.a-figma.a-figma--page .a-figma-card--map {
  background: #fff;
  padding: 0.55rem;
}

html.a-figma.a-figma--page .a-figma-card h2,
html.a-figma.a-figma--page .a-figma-body > .card h2,
html.a-figma.a-figma--page .a-figma-body > .d-video-block h2,
html.a-figma.a-figma--page .a-figma-body h2 {
  font-family: var(--a-serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 1rem + 1.4vw, 2.1rem);
  letter-spacing: -0.03em;
  color: var(--a-ink) !important;
  margin: 0 0 0.65rem;
}

html.a-figma.a-figma--page .a-figma-body p,
html.a-figma.a-figma--page .a-figma-card p {
  color: var(--a-ink);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Forms — restyle fields only; markup stays as-is */
html.a-figma.a-figma--page form input[type="text"],
html.a-figma.a-figma--page form input[type="email"],
html.a-figma.a-figma--page form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
html.a-figma.a-figma--page form textarea,
html.a-figma.a-figma--page .d-contact-form .input-style,
html.a-figma.a-figma--page .contact-form input,
html.a-figma.a-figma--page .contact-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--a-ink) !important;
  border-radius: 1.15rem !important;
  background: #fff !important;
  color: var(--a-ink) !important;
  padding: 0.85rem 1rem !important;
  min-height: 3rem;
  box-shadow: none !important;
}

html.a-figma.a-figma--page form textarea,
html.a-figma.a-figma--page .d-contact-form textarea,
html.a-figma.a-figma--page .contact-form textarea {
  min-height: 8.5rem;
  resize: vertical;
}

html.a-figma.a-figma--page form label,
html.a-figma.a-figma--page .d-contact-form label,
html.a-figma.a-figma--page .contact-form label {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
  color: var(--a-ink);
}

html.a-figma.a-figma--page form input[type="submit"],
html.a-figma.a-figma--page .contactSubmitButton,
html.a-figma.a-figma--page .form-button input[type="submit"] {
  appearance: none;
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink) !important;
  border-radius: 999px !important;
  box-shadow: 5px 5px 0 var(--a-ink);
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0.95rem 1.6rem !important;
  width: auto;
  min-width: 10rem;
  cursor: pointer;
}

html.a-figma.a-figma--page form input[type="submit"]:hover,
html.a-figma.a-figma--page .contactSubmitButton:hover {
  box-shadow: 2px 2px 0 var(--a-ink);
  transform: translate(3px, 3px);
}

/* Contact / info cards */
html.a-figma.a-figma--page iframe[src*="maps"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 16rem;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 1.25rem;
}

html.a-figma.a-figma--page .a-figma-body a.d-btn--primary,
html.a-figma.a-figma--page .a-figma-result .d-btn--primary,
html.a-figma.a-figma--page .a-figma-body a.bg-highlight.btn,
html.a-figma.a-figma--page .a-figma-body a.bg-green-dark.btn {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink) !important;
  border-radius: 999px !important;
  box-shadow: 5px 5px 0 var(--a-ink);
  font-weight: 700;
  text-decoration: none !important;
}

/* Reviews — static cards, JS-injected [data-review-card], load-error */
html.a-figma.a-figma--page [data-review-card],
html.a-figma.a-figma--page #reviews-load-error,
html.a-figma.a-figma--page .a-figma-body .card-style:has(.fa-star) {
  background: #fff;
  border: 1px solid var(--a-ink);
  border-radius: 1.6rem;
  box-shadow: 5px 5px 0 var(--a-ink);
  padding: 1.15rem 1.2rem;
  margin: 0 0 1rem;
}

html.a-figma.a-figma--page [data-review-card]:nth-of-type(3n + 1) {
  background: var(--a-lilac);
}

html.a-figma.a-figma--page [data-review-card]:nth-of-type(3n + 2) {
  background: #fff;
}

html.a-figma.a-figma--page [data-review-card]:nth-of-type(3n + 3) {
  background: var(--a-sand);
}

html.a-figma.a-figma--page #reviews-load-error {
  background: var(--a-coral);
}

html.a-figma.a-figma--page #reviews-load-error a.btn,
html.a-figma.a-figma--page #reviews-load-error a.bg-highlight {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink) !important;
  border-radius: 999px !important;
}

html.a-figma.a-figma--page .fa-star.color-yellow-dark {
  color: var(--a-purple) !important;
}

html.a-figma.a-figma--page .fa-star.color-gray-dark {
  color: rgba(23, 23, 44, 0.28) !important;
}

html.a-figma.a-figma--page .a-figma-body .bg-red-dark,
html.a-figma.a-figma--page .a-figma-body .card.bg-red-dark {
  background: var(--a-coral) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink);
  border-radius: 1.6rem;
  box-shadow: 6px 6px 0 var(--a-ink);
}

html.a-figma.a-figma--page .a-figma-body .bg-red-dark h2,
html.a-figma.a-figma--page .a-figma-body .bg-red-dark .h5 {
  color: var(--a-ink) !important;
}

/* 16:9 embeds + local videos */
html.a-figma.a-figma--page .d-video-block video,
html.a-figma.a-figma--page .a-figma-body video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1.1rem;
  background: var(--a-ink);
}

html.a-figma.a-figma--page .responsive-iframe,
html.a-figma.a-figma--page .a-figma-body .yt-facade {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.1rem;
  overflow-x: clip;
  overflow-y: hidden;
  background: var(--a-ink);
}

html.a-figma.a-figma--page .a-figma-body .bg-dark,
html.a-figma.a-figma--page .a-figma-body .card-style.bg-dark {
  background: var(--a-ink) !important;
  color: #fff !important;
}

html.a-figma.a-figma--page .a-figma-body .bg-dark h2,
html.a-figma.a-figma--page .a-figma-body .bg-dark a,
html.a-figma.a-figma--page .a-figma-body .bg-dark p {
  color: #fff !important;
}

html.a-figma.a-figma--page .a-figma-body img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
}

html.a-figma.a-figma--page .a-figma-body .card-custom img,
html.a-figma.a-figma--page .a-figma-portrait {
  width: 100%;
  max-width: 22rem;
  border-radius: 1.6rem;
  border: 1px solid var(--a-ink);
  box-shadow: 7px 7px 0 var(--a-ink);
}

/* Centered result / utility message */
html.a-figma.a-figma--page .a-figma-result,
html.a-figma.a-figma--page .a-figma-body .a-figma-result,
html.a-figma.a-figma--page .a-figma-body .bg-blue-dark.card,
html.a-figma.a-figma--page .a-figma-body .card.bg-blue-dark {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink);
  border-radius: 1.75rem;
  box-shadow: 7px 7px 0 var(--a-ink);
  text-align: center;
  padding: 1.75rem 1.4rem 1.85rem;
  max-width: 32rem;
  margin: 1rem auto 2rem;
}

html.a-figma.a-figma--page .a-figma-result h1,
html.a-figma.a-figma--page .a-figma-body .bg-blue-dark h1,
html.a-figma.a-figma--page .a-figma-result p,
html.a-figma.a-figma--page .a-figma-body .bg-blue-dark p,
html.a-figma.a-figma--page .a-figma-body .bg-blue-dark .color-white {
  color: var(--a-ink) !important;
  text-align: center;
}

html.a-figma.a-figma--page .a-figma-result .d-btn,
html.a-figma.a-figma--page .a-figma-result .d-btn--primary,
html.a-figma.a-figma--page .a-figma-body .a-figma-result a.btn {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink) !important;
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--a-ink);
}

/* About accordion + social tiles */
html.a-figma.a-figma--page .accordion-btn {
  width: 100%;
  text-align: left;
  background: var(--a-ink) !important;
  color: #fff !important;
  border: 0;
  border-radius: 1.15rem;
  padding: 0.95rem 1.1rem;
  font-weight: 700;
}

html.a-figma.a-figma--page .accordion .card.bg-green-dark {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

html.a-figma.a-figma--page .a-figma-body .bg-instagram,
html.a-figma.a-figma--page .a-figma-body .bg-twitter,
html.a-figma.a-figma--page .a-figma-body .bg-facebook,
html.a-figma.a-figma--page .a-figma-body .bg-red-dark.p-3 {
  border-radius: 1.4rem;
  border: 1px solid var(--a-ink);
  box-shadow: 5px 5px 0 var(--a-ink);
}

html.a-figma.a-figma--page .alp-project-badge {
  border: 1px solid var(--a-ink);
  border-radius: 1.35rem;
  box-shadow: 4px 4px 0 var(--a-ink);
  background: #fff;
}

/* Radiology / background-image slides */
html.a-figma.a-figma--page [data-card-height][style*="background-image"] {
  min-height: 18rem;
  background-size: cover;
  background-position: center;
  border-radius: 1.5rem;
  border: 1px solid var(--a-ink);
  box-shadow: 5px 5px 0 var(--a-ink);
}

/* Portfolio app shell sits under the same chrome */
html.a-figma.a-figma--page #root {
  background: transparent;
  overflow-x: clip;
}

html.a-figma.a-figma--page #root .site-header {
  display: none;
}

html.a-figma.a-figma--page #root h1 {
  font-family: var(--a-serif);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--a-ink);
}

html.a-figma.a-figma--page #root h1 .a-figma-em {
  color: var(--a-purple);
  font-style: italic;
}

/* Email-like invite tables (utility pages) */
html.a-figma.a-figma--page .invite,
html.a-figma.a-figma--page .invite .wrapper {
  background: transparent !important;
  overflow-x: clip;
}

html.a-figma.a-figma--page .invite .main {
  background: #fff;
  border: 1px solid var(--a-ink);
  border-radius: 1.6rem;
  box-shadow: 7px 7px 0 var(--a-ink);
  overflow-x: clip;
}

html.a-figma.a-figma--page .invite h1 {
  font-family: var(--a-serif);
  font-weight: 400;
}

html.a-figma.a-figma--page .invite .btn {
  background: var(--a-lime) !important;
  color: var(--a-ink) !important;
  border: 1px solid var(--a-ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--a-ink);
}

/* No sideways scroll; never overflow:hidden on sticky ancestors */
html.a-figma.a-figma--page #page,
html.a-figma.a-figma--page .page-content,
html.a-figma.a-figma--page .a-figma-layout,
html.a-figma.a-figma--page .a-figma-body,
html.a-figma.a-figma--page main {
  overflow-x: clip;
  overflow-y: visible;
}

/* Author card placed in the page body (not in the hero): keep the photo small
   so the text column is not pushed outside the screen. */
html.a-figma .a-figma-layout .d-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
}
html.a-figma .a-figma-layout .d-author img {
  flex: 0 0 auto;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 1rem;
}
html.a-figma .a-figma-layout .d-author > div {
  min-width: 0;
}

/* E-mail style invitation page (cerebrologInvitation): a percentage-width image
   inside an auto-layout table made the table as wide as the image (1024px).
   A fixed table layout takes the column width from the table instead. */
html.a-figma .invite table.main {
  table-layout: fixed;
  width: 100%;
  max-width: 600px;
}
html.a-figma .invite table.main img {
  max-width: 100%;
  height: auto;
}
html.a-figma .invite table.main td,
html.a-figma .invite table.main p,
html.a-figma .invite table.main a {
  overflow-wrap: anywhere;
}

/* ===== Article polish: one text face, related-card grid, section colour ===== */

/* Related pages: same 4-up (2-up on phones) grid on every page, whatever the legacy wrapper is */
html.a-figma .a-figma-related,
html.a-figma .related-thumb-grid .row,
html.a-figma .related-thumb-grid .a-figma-related {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  margin: 0 0 2rem !important;
  padding: 0 !important;
}

html.a-figma .a-figma-related > *,
html.a-figma .related-thumb-grid .row > * {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 600px) {
  html.a-figma .a-figma-related,
  html.a-figma .related-thumb-grid .row,
  html.a-figma .related-thumb-grid .a-figma-related {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html.a-figma .a-figma-related:has(> :nth-child(5)),
  html.a-figma .related-thumb-grid .row:has(> :nth-child(5)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

html.a-figma .related-thumb-grid {
  width: 100%;
  max-width: none;
  margin: 0 0 1rem !important;
  padding: 0 !important;
}

/* One text face (DM Sans) for body copy, hero copy and buttons */
html.a-figma :is(.a-figma-body, .a-figma-layout > :not(.a-figma-toc)) :is(p, li, td, th, dd, blockquote, .card-text, .accordion-body, small) {
  font-family: var(--a-sans) !important;
  color: var(--a-ink);
}

html.a-figma .a-figma-hero :is(p, h2, .d-author-name, .d-author-role, .d-author-place),
html.a-figma .btn {
  font-family: var(--a-sans) !important;
}

html.a-figma .accordion-body {
  color: var(--a-ink);
}

/* Section colour: each block carries a accent that headings, bullets and highlights share */
html.a-figma:not(.a-figma--page) .a-figma-layout {
  counter-reset: a-sec;
}

html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout) > .container-fluid:nth-child(4n + 1) { --sec-c: var(--a-lime); }
html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout) > .container-fluid:nth-child(4n + 2) { --sec-c: var(--a-lilac); }
html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout) > .container-fluid:nth-child(4n + 3) { --sec-c: var(--a-sky); }
html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout) > .container-fluid:nth-child(4n + 4) { --sec-c: var(--a-sand); }

html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout > :not(.a-figma-toc)) h2.card-title::before {
  counter-increment: a-sec;
  content: counter(a-sec, decimal-leading-zero);
  display: block;
  width: fit-content;
  margin: 0 0 0.7rem;
  padding: 0.22rem 0.7rem;
  border: 1px solid var(--a-ink);
  border-radius: 999px;
  background: var(--sec-c, var(--a-lime));
  color: var(--a-ink);
  font-family: var(--a-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout > :not(.a-figma-toc)) h2.card-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 0.3rem;
  margin-top: 0.8rem;
  border-radius: 999px;
  background: var(--sec-c, var(--a-lime));
  box-shadow: 0 0 0 1px var(--a-ink);
}

html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout > :not(.a-figma-toc)) :is(h3, h4).card-title {
  padding-left: 0.85rem;
  border-left: 0.35rem solid var(--sec-c, var(--a-lilac));
}

html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout > :not(.a-figma-toc)) ul li::before {
  content: "";
  top: 1.05rem;
  left: 0.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--a-ink);
  background: var(--sec-c, var(--a-lime));
  transform: rotate(45deg);
}

html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout > :not(.a-figma-toc)) :is(p, li, .card-text) strong {
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--sec-c, var(--a-lime)) 58%);
  color: var(--a-ink);
}

html.a-figma:not(.a-figma--page) :is(.a-figma-body, .a-figma-layout > :not(.a-figma-toc)) h2.card-title + p {
  font-size: calc(var(--a-text) * 1.05);
  font-weight: 500;
}

/* Related pages block that sits outside the article layout (after </main>):
   keep it inside the page gutters, left-aligned with the content, thumbnails compact */
html.a-figma .d-article > .related-thumb-grid,
html.a-figma .d-article > .container-fluid:has(+ .related-thumb-grid) {
  width: calc(100% - 2 * var(--a-gutter)) !important;
  max-width: 77.5rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

html.a-figma .d-article > .container-fluid:has(+ .related-thumb-grid) .card,
html.a-figma .d-article > .container-fluid:has(+ .related-thumb-grid) .card-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.a-figma .d-article > .container-fluid:has(+ .related-thumb-grid) h2 {
  margin: 2rem 0 0.5rem !important;
  font-family: var(--a-serif) !important;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--a-ink) !important;
}

html.a-figma .d-article > .related-thumb-grid .row {
  max-width: 46rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* FAQ accordion: question and +/- icon share one centred row; open row is highlighted */
html.a-figma .accordion-button {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  text-align: left;
  font-size: 1.3rem;
  padding: 1.15rem 1.1rem 0.95rem !important;
}

html.a-figma .accordion-button::after {
  flex: 0 0 auto;
  margin-left: auto !important;
}

html.a-figma .accordion-button:not(.collapsed) {
  background: var(--a-lime) !important;
}

html.a-figma .accordion-body {
  padding-top: 1rem;
}