/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 1280px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 26px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #f8fefa;
  --accent-2: #f0fdf4;
  --accent-3: #cfffe1;
  --accent-4: #aefecf;
  --accent-5: #8ef8bc;
  --accent-6: #75ebab;
  --accent-7: #60d898;
  --accent-8: #45c082;
  --accent-9: #0a5c38;
  --accent-10: #004c29;
  --accent-11: #008248;
  --accent-12: #004926;

  --accent-a1: #00db4907;
  --accent-a2: #00dd440f;
  --accent-a3: #00ff6030;
  --accent-a4: #00fc6851;
  --accent-a5: #00f06871;
  --accent-a6: #00da648a;
  --accent-a7: #00c15a9f;
  --accent-a8: #00a954ba;
  --accent-a9: #005530f5;
  --accent-a10: #004c29;
  --accent-a11: #008248;
  --accent-a12: #004926;

  --accent-contrast: #fff;
  --accent-surface: #ecfdf1cc;
  --accent-indicator: #0a5c38;
  --accent-track: #0a5c38;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0085 157.6);
      --accent-2: oklch(98.2% 0.0177 157.6);
      --accent-3: oklch(95.9% 0.0636 157.6);
      --accent-4: oklch(93.3% 0.1013 157.6);
      --accent-5: oklch(89.8% 0.1304 157.6);
      --accent-6: oklch(85.5% 0.142 157.6);
      --accent-7: oklch(79.6% 0.142 157.6);
      --accent-8: oklch(72.2% 0.142 157.6);
      --accent-9: oklch(42% 0.0947 157.6);
      --accent-10: oklch(36.2% 0.0947 157.6);
      --accent-11: oklch(52.6% 0.142 157.6);
      --accent-12: oklch(35.1% 0.0947 157.6);

      --accent-a1: color(display-p3 0.0235 0.8392 0.1843 / 0.024);
      --accent-a2: color(display-p3 0.0039 0.8471 0.2314 / 0.051);
      --accent-a3: color(display-p3 0.0078 0.9765 0.2706 / 0.15);
      --accent-a4: color(display-p3 0.0039 0.9529 0.2902 / 0.248);
      --accent-a5: color(display-p3 0.0039 0.8863 0.2902 / 0.342);
      --accent-a6: color(display-p3 0.0039 0.7882 0.2706 / 0.424);
      --accent-a7: color(display-p3 0.0039 0.6667 0.2235 / 0.495);
      --accent-a8: color(display-p3 0 0.5608 0.2 / 0.589);
      --accent-a9: color(display-p3 0 0.2392 0.0902 / 0.844);
      --accent-a10: color(display-p3 0 0.2 0.0627 / 0.883);
      --accent-a11: color(display-p3 0 0.3608 0.1059 / 0.781);
      --accent-a12: color(display-p3 0 0.1922 0.0588 / 0.891);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9373 0.9922 0.9529 / 0.8);
      --accent-indicator: oklch(42% 0.0947 157.6);
      --accent-track: oklch(42% 0.0947 157.6);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfdfc;
  --grayscale-2: #f8faf8;
  --grayscale-3: #eff1ef;
  --grayscale-4: #e7e9e7;
  --grayscale-5: #dfe2df;
  --grayscale-6: #d7dad7;
  --grayscale-7: #cccfcc;
  --grayscale-8: #b9bcb8;
  --grayscale-9: #898e87;
  --grayscale-10: #7f847d;
  --grayscale-11: #60655f;
  --grayscale-12: #1d211c;

  --grayscale-a1: #00550003;
  --grayscale-a2: #00490007;
  --grayscale-a3: #00200010;
  --grayscale-a4: #00160018;
  --grayscale-a5: #00180020;
  --grayscale-a6: #00140028;
  --grayscale-a7: #000f0033;
  --grayscale-a8: #040f0047;
  --grayscale-a9: #050f0078;
  --grayscale-a10: #040e0082;
  --grayscale-a11: #020a00a0;
  --grayscale-a12: #010600e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #898e87;
  --grayscale-track: #898e87;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.989 0.992 0.989);
      --grayscale-2: color(display-p3 0.974 0.98 0.973);
      --grayscale-3: color(display-p3 0.939 0.945 0.937);
      --grayscale-4: color(display-p3 0.907 0.914 0.905);
      --grayscale-5: color(display-p3 0.878 0.885 0.875);
      --grayscale-6: color(display-p3 0.846 0.855 0.843);
      --grayscale-7: color(display-p3 0.803 0.812 0.8);
      --grayscale-8: color(display-p3 0.727 0.738 0.723);
      --grayscale-9: color(display-p3 0.541 0.556 0.532);
      --grayscale-10: color(display-p3 0.5 0.515 0.491);
      --grayscale-11: color(display-p3 0.38 0.395 0.374);
      --grayscale-12: color(display-p3 0.117 0.129 0.111);

      --grayscale-a1: #00550003;
      --grayscale-a2: #00490007;
      --grayscale-a3: #00200010;
      --grayscale-a4: #00160018;
      --grayscale-a5: #00180020;
      --grayscale-a6: #00140028;
      --grayscale-a7: #000f0033;
      --grayscale-a8: #040f0047;
      --grayscale-a9: #050f0078;
      --grayscale-a10: #040e0082;
      --grayscale-a11: #020a00a0;
      --grayscale-a12: #010600e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.541 0.556 0.532);
      --grayscale-track: color(display-p3 0.541 0.556 0.532);
    }
  }
}


.dark {
  --accent-1: #0c1310;
  --accent-2: #121c17;
  --accent-3: #122d21;
  --accent-4: #113b2a;
  --accent-5: #184834;
  --accent-6: #225640;
  --accent-7: #2c674e;
  --accent-8: #357d5e;
  --accent-9: #34d399;
  --accent-10: #1fc88e;
  --accent-11: #39d79c;
  --accent-12: #b1f0d1;

  --accent-a1: #00bb0003;
  --accent-a2: #4ffb170c;
  --accent-a3: #29ff6d1e;
  --accent-a4: #1bff832d;
  --accent-a5: #36ff953b;
  --accent-a6: #50ffa54a;
  --accent-a7: #5efdae5d;
  --accent-a8: #63ffb374;
  --accent-a9: #3cffb7d0;
  --accent-a10: #24feb1c5;
  --accent-a11: #42feb6d5;
  --accent-a12: #bcffdeef;

  --accent-contrast: #0d281c;
  --accent-surface: #15271780;
  --accent-indicator: #34d399;
  --accent-track: #34d399;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(17.8% 0.0131 163.2);
      --accent-2: oklch(21.3% 0.0168 163.2);
      --accent-3: oklch(27.1% 0.0398 163.2);
      --accent-4: oklch(31.7% 0.0555 163.2);
      --accent-5: oklch(36.3% 0.0626 163.2);
      --accent-6: oklch(41.1% 0.0674 163.2);
      --accent-7: oklch(46.8% 0.0748 163.2);
      --accent-8: oklch(53.4% 0.0871 163.2);
      --accent-9: oklch(77.3% 0.1535 163.2);
      --accent-10: oklch(73.9% 0.1535 163.2);
      --accent-11: oklch(78.4% 0.1535 163.2);
      --accent-12: oklch(90.3% 0.0765 163.2);

      --accent-a1: color(display-p3 0 0.9412 0 / 0.009);
      --accent-a2: color(display-p3 0.4784 0.9882 0.1725 / 0.047);
      --accent-a3: color(display-p3 0.4039 0.9961 0.502 / 0.114);
      --accent-a4: color(display-p3 0.3765 0.9961 0.5647 / 0.173);
      --accent-a5: color(display-p3 0.4549 1 0.6235 / 0.227);
      --accent-a6: color(display-p3 0.5137 1 0.6902 / 0.286);
      --accent-a7: color(display-p3 0.5529 1 0.7255 / 0.358);
      --accent-a8: color(display-p3 0.5608 1 0.7373 / 0.446);
      --accent-a9: color(display-p3 0.502 1 0.749 / 0.803);
      --accent-a10: color(display-p3 0.4706 1 0.7294 / 0.757);
      --accent-a11: color(display-p3 0.5059 1 0.7451 / 0.82);
      --accent-a12: color(display-p3 0.7961 1 0.8824 / 0.929);

      --accent-contrast: #0d281c;
      --accent-surface: color(display-p3 0.0941 0.1412 0.0941 / 0.5);
      --accent-indicator: oklch(77.3% 0.1535 163.2);
      --accent-track: oklch(77.3% 0.1535 163.2);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(10, 92, 56, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(227, 235, 230, 1);
  --sidebar-background: initial;
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(247, 251, 248, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(52, 211, 153, 1);
  --background: rgba(15, 17, 23, 1);
  --border: rgba(31, 38, 48, 1);
  --sidebar-background: initial;
  --header-background: rgba(15, 17, 23, 1);
  --card-background: rgba(22, 26, 34, 1);
  --theme-color: #0f1117;
}

/* Landing hero, reproduced from pharmetika.com/developers:
     eyebrow  h-0.5 w-12 bg-home-primary + text-xs font-bold tracking-[0.3em]
              uppercase text-home-secondary
     h1       text-6xl md:text-8xl font-black tracking-tighter leading-[0.9]
     sub      text-xl text-slate-400 max-w-2xl leading-relaxed
     cta      bg-home-primary px-6 py-3 font-bold text-sm tracking-widest
              uppercase, hover:bg-home-dark
   Brand tokens: primary #11995d · secondary #13b06b · dark #0a5c38
   The hero is a dark band in both themes, matching the brand site and the footer. */

/* Shared landing-page geometry: one gutter, inset from the content column, used by
   the hero, the body copy and the footer so all three share an edge.
   The column's own width is NOT hardcoded here. An earlier version pinned it to
   `content-width` from docs.yml (50rem) and was wrong by 400px — that variable does
   not govern a full-page-width overview layout. site.js measures the real box and
   publishes it as --pmk-prose-left / --pmk-prose-width for the footer, which is
   mounted outside <main> and so cannot inherit it. */
:root {
  --pmk-gutter: 1.5rem;
}
@media (min-width: 1024px) {

  :root { --pmk-gutter: 3rem; }

}

/* Landing page chrome: drop the left nav sidebar.
   `layout: custom` in the page frontmatter is silently ignored for a `landing-page`
   (verified on a fresh preview host: still fern-layout-overview with the sidebar),
   so this is done in CSS. Scoped with :has(.pmk-hero) so only the hero page loses
   its sidebar — every other page keeps navigation. */
main.fern-main:has(.pmk-hero) > aside,
main.fern-main:has(.pmk-hero) .fern-sidebar-desktop { display: none !important; }

/* Full bleed. This is only correct because the sidebar above is hidden: the article
   is `mx-auto` inside the content wrapper, so with no sidebar offsetting it, it is
   genuinely centred in the viewport and `calc(50% - 50vw)` resolves to the viewport
   edge. (With the sidebar visible the same math overshot, pulling the band under the
   sidebar and past the right edge — that was the blur + horizontal scroll.) */
.pmk-hero {
  margin: 0 calc(50% - 50vw) 3.5rem;
  padding: 4rem calc(50vw - 50%) 3.5rem;
  background: #0f1117;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}
@media (min-width: 1024px) {

  .pmk-hero {
    padding-top: 5rem;
    padding-bottom: 4.5rem;
  }

}

/* Inset the whole column, not the hero's siblings. <If> renders a display:contents
   wrapper, so a role-gated callout is not a sibling of the hero — a `.pmk-hero ~ *`
   selector silently skipped all three, leaving them a gutter wider per side than the
   cards around them. Padding the column catches everything regardless of nesting.
   The hero cancels this with its own full-bleed margin, then re-adds the same gutter
   as padding, so its text lands on the identical edge. */
.fern-prose:has(.pmk-hero) {
  padding-left: var(--pmk-gutter);
  padding-right: var(--pmk-gutter);
}

/* Fern turns every heading into a copy-link target: an inline cursor:pointer, a
   Radix tooltip on hover, and an anchor glyph. The hero headline is display type
   rather than a section someone would deep-link to, so drop the affordance.
   pointer-events is what actually suppresses it — the handler is bound to the <h1>
   itself, so hiding the glyph alone would leave the hover state and the click. */
.pmk-hero__title {
  cursor: default !important;
  pointer-events: none;
}
.pmk-hero__title a,
.pmk-hero__title svg { display: none !important; }

/* "Was this page helpful?" lives in Fern's own <footer> inside <main>. Useful on
   documentation pages, noise on a marketing landing page — and it rendered between
   the hero page's last card and the Pharmetika footer. Scoped with :has() so only
   the hero page loses it. */
main.fern-main:has(.pmk-hero) .fern-layout-footer { display: none !important; }

/* Nothing inside the hero may exceed its box (long unbroken strings, the CTA row). */
.pmk-hero > * { max-width: 100%; }

/* 50vw counts the scrollbar, so the bleed can overshoot by its width. Clip on the
   ancestors absorbs that instead of letting it become a horizontal scrollbar. */
.fern-layout-content-wrapper,
main.fern-main:has(.pmk-hero) { overflow-x: clip; }

.pmk-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;                 /* gap-3 */
  margin-bottom: 1.5rem;        /* mb-6 */
}
.pmk-hero__rule {
  display: block;
  height: 2px;                  /* h-0.5 */
  width: 3rem;                  /* w-12 */
  background: #11995d;
  flex: none;
}
.pmk-hero__kicker {
  font-size: 0.75rem;           /* text-xs */
  font-weight: 700;
  letter-spacing: 0.3em;        /* tracking-[0.3em] */
  text-transform: uppercase;
  color: #13b06b;               /* text-home-secondary */
}

.pmk-hero__title {
  /* pharmetika.com uses text-6xl -> md:text-8xl (3.75rem -> 6rem). Stepped here so a
     narrow content column cannot be overrun by a single long word like PRECISION. */
  font-size: 2.75rem;
  font-weight: 900;             /* font-black */
  letter-spacing: -0.05em;      /* tracking-tighter */
  line-height: 0.9;
  color: #fff;
  margin: 0 0 2rem;             /* mb-8 */
  overflow-wrap: break-word;
}
@media (min-width: 640px) {
 .pmk-hero__title { font-size: 3.75rem; } 
}
@media (min-width: 1024px) {
 .pmk-hero__title { font-size: 5rem; } 
}
@media (min-width: 1280px) {
 .pmk-hero__title { font-size: 6rem; } 
}
.pmk-hero__accent { color: #11995d; }

.pmk-hero__sub {
  font-size: 1.25rem;           /* text-xl */
  line-height: 1.625;           /* leading-relaxed */
  color: #94a3b8;               /* text-slate-400 */
  max-width: 42rem;             /* max-w-2xl */
  margin: 0;
}

.pmk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;                    /* gap-4 */
  margin-top: 2rem;             /* mt-8 */
}
.pmk-hero__cta {
  display: inline-flex;
  align-items: center;
  background: #11995d;
  color: #fff !important;
  padding: 0.5rem 1.125rem;     /* condensed from py-3 px-6 */
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid #11995d;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Fern wraps MDX link text in <p>, whose prose margins would inflate the button */
.pmk-hero__cta p { margin: 0 !important; }

/* Fern appends a lucide external-link glyph to any target="_blank" link; the CTA
   reads as a button, so drop it */
.pmk-hero__cta .external-link-icon,
.pmk-hero__cta svg { display: none !important; }
.pmk-hero__cta:hover { background: #0a5c38; border-color: #0a5c38; }
.pmk-hero__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #13b06b, 0 0 0 5px #0f1117;
}
/* secondary action stays on-site (their hero only has the sales CTA) */
.pmk-hero__cta--ghost {
  background: transparent;
  border-color: rgb(255 255 255 / 0.25);
  color: #fff !important;
}
.pmk-hero__cta--ghost:hover {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.5);
}
.pmk-hero__cta--ghost:focus-visible {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.5);
}

/* Fern renders its own <header> with an <h1 class="fern-page-heading"> from the
   frontmatter title, which would duplicate the hero's headline. Hide it, scoped
   with :has() so this only affects the page that actually contains a hero —
   other `layout: overview` pages keep their headings. */
.fern-layout-overview:has(.pmk-hero) > article > header { display: none !important; }

/* Pharmetika site footer — Tailwind classes from pharmetika.com translated to
   explicit values:
     bg-black border-t border-white/10 py-24 · max-w-[1400px] px-6 lg:px-12
     grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-12 mb-16
     tagline  text-base font-medium leading-relaxed text-white/60 max-w-xs
     heading  text-xs font-bold uppercase tracking-widest text-white
     links    text-base font-medium text-white/60, hover:text-home-primary
     bar      pt-8 border-t border-white/10 · text-xs font-mono text-white/30
   The footer stays black in both themes, matching the brand site. */

.pmk-footer {
  background: #000;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding: 6rem 0;              /* py-24 */
  width: 100%;
}

/* revealed only once the script has mounted it (avoids a late flash-in) */
html:not(.pmk-ready) .pmk-footer { visibility: hidden; }

.pmk-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;            /* px-6 */
}
@media (min-width: 1024px) {

  .pmk-footer__inner { padding: 0 3rem; }   /* lg:px-12 */

}

/* On the landing page, line the footer up with the hero. Its 1400px box is a
   full-bleed band carried over from pharmetika.com and starts well left of the hero
   text on a wide viewport.
   The column's left edge and width come from site.js, which measures the article at
   runtime — the footer mounts as a sibling of <main>, so no ancestor contains both it
   and the hero, and the width is not any value available in CSS. Adding --pmk-gutter
   as padding then puts its content on the hero's exact edge.
   Landing only: every other page has a sidebar, so the article is not centred in the
   viewport and this would line up with nothing. Falls back to the band above until
   the script has measured. */
html:has(.pmk-hero) .pmk-footer__inner {
  max-width: var(--pmk-prose-width, 1400px);
  margin-left: var(--pmk-prose-left, auto);
  margin-right: auto;
  padding: 0 var(--pmk-gutter);
}

.pmk-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;                    /* gap-12 */
  margin-bottom: 4rem;          /* mb-16 */
}
@media (min-width: 768px) {

  .pmk-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}
@media (min-width: 1024px) {

  .pmk-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

}

/* col-span-2 lg:col-span-1 */
.pmk-footer__brand { grid-column: span 2 / span 2; }
@media (min-width: 1024px) {

  .pmk-footer__brand { grid-column: span 1 / span 1; }

}

.pmk-footer__logo {
  display: inline-flex;
  margin-bottom: 1.5rem;        /* mb-6 */
  padding: 0.25rem;
  border-radius: 0.25rem;
  outline: none;
  transition: opacity 0.2s ease;
}
.pmk-footer__logo:hover { opacity: 0.8; }
.pmk-footer__logo:focus-visible {
  box-shadow: 0 0 0 2px #11995d, 0 0 0 6px #000;
}
.pmk-footer__logo svg {
  height: 1.75rem;              /* h-7 */
  width: auto;
  display: block;
}

.pmk-footer__tagline {
  font-size: 1rem;              /* text-base */
  font-weight: 500;
  line-height: 1.625;           /* leading-relaxed */
  color: rgb(255 255 255 / 0.6);
  max-width: 20rem;             /* max-w-xs */
  margin: 0;
}

.pmk-footer__col h4 {
  font-size: 0.75rem;           /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;        /* tracking-widest */
  color: #fff;
  margin: 0 0 1.5rem;           /* mb-6 */
}
.pmk-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pmk-footer__col li + li { margin-top: 1rem; }   /* space-y-4 */
.pmk-footer__col a {
  font-size: 1rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.6);
  text-decoration: none;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  transition: color 0.2s ease;
}
.pmk-footer__col a:hover { color: #11995d; }      /* hover:text-home-primary */
.pmk-footer__col a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #11995d, 0 0 0 4px #000;
}

.pmk-footer__bar {
  padding-top: 2rem;            /* pt-8 */
  border-top: 1px solid rgb(255 255 255 / 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 768px) {

  .pmk-footer__bar { flex-direction: row; }

}
.pmk-footer__copy {
  font-size: 0.75rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: rgb(255 255 255 / 0.3);
  margin: 0;
}