/* ==========================================================================
   Pure Marketing Design System — Shared components (atoms & molecules)
   Every block in components/ is built from these. If a block needs something
   that is not here, it defines it in its own scoped <style> — do not grow this
   file for a one-off.
   Depends on: tokens.css, base.css
   ========================================================================== */

/* ==========================================================================
   Button
   .pm-btn                       primary (solid, scheme-aware)
   .pm-btn--secondary            outlined
   .pm-btn--tertiary             ghost, bordered on hover
   .pm-btn--link                 text link with chevron
   .pm-btn--link-alt             underlined text link
   .pm-btn--sm / --lg            sizes  (default is md)
   .pm-btn--icon                 square icon-only
   .pm-btn--full                 100% width
   ========================================================================== */

.pm-btn {
  --_btn-bg: var(--pm-btn-bg);
  --_btn-fg: var(--pm-btn-fg);
  --_btn-border: var(--pm-btn-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pm-space-2);
  padding: var(--pm-space-2) var(--pm-space-6);
  min-height: 2.75rem;
  border: var(--pm-border-width) solid var(--_btn-border);
  border-radius: var(--pm-radius-button);
  background-color: var(--_btn-bg);
  color: var(--_btn-fg);
  font-size: var(--pm-text-base);
  font-weight: var(--pm-weight-medium);
  line-height: var(--pm-leading-relaxed);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pm-duration-fast) var(--pm-ease),
    color var(--pm-duration-fast) var(--pm-ease),
    border-color var(--pm-duration-fast) var(--pm-ease),
    opacity var(--pm-duration-fast) var(--pm-ease);
}

.pm-btn:hover {
  opacity: 0.88;
}

.pm-btn:focus-visible {
  outline: 2px solid var(--pm-fg);
  outline-offset: 2px;
}

.pm-btn[disabled],
.pm-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pm-btn--secondary {
  --_btn-bg: transparent;
  --_btn-fg: var(--pm-fg);
  --_btn-border: var(--pm-border-color);
}
.pm-btn--secondary:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--pm-fg) 8%, transparent);
}

.pm-btn--tertiary {
  --_btn-bg: transparent;
  --_btn-fg: var(--pm-fg);
  --_btn-border: transparent;
  padding-inline: var(--pm-space-4);
}
.pm-btn--tertiary:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--pm-fg) 8%, transparent);
}

.pm-btn--accent {
  --_btn-bg: var(--pm-accent);
  --_btn-fg: var(--pm-on-accent);
  --_btn-border: var(--pm-accent);
}

.pm-btn--link,
.pm-btn--link-alt {
  --_btn-bg: transparent;
  --_btn-fg: var(--pm-fg);
  --_btn-border: transparent;
  padding: 0;
  min-height: 0;
  gap: var(--pm-space-2);
}
.pm-btn--link-alt {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pm-btn--link:hover,
.pm-btn--link-alt:hover {
  opacity: 0.7;
  background-color: transparent;
}

.pm-btn--sm {
  padding: var(--pm-space-1) var(--pm-space-5);
  min-height: 2.25rem;
  font-size: var(--pm-text-sm);
}
.pm-btn--lg {
  padding: var(--pm-space-3) var(--pm-space-8);
  min-height: 3.25rem;
  font-size: var(--pm-text-md);
}
.pm-btn--icon {
  padding: 0;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
}
.pm-btn--icon.pm-btn--sm {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
}
.pm-btn--icon.pm-btn--lg {
  width: 3.25rem;
  min-width: 3.25rem;
  height: 3.25rem;
}
.pm-btn--full {
  width: 100%;
}

/* Size modifiers come later in the cascade than the link variants, so they
   would otherwise put padding back on a text link. */
.pm-btn--link.pm-btn--sm,
.pm-btn--link.pm-btn--lg,
.pm-btn--link-alt.pm-btn--sm,
.pm-btn--link-alt.pm-btn--lg {
  padding: 0;
  min-height: 0;
}
.pm-btn--round {
  border-radius: var(--pm-radius-full);
}

.pm-btn .pm-icon {
  flex: none;
}

/* A pair/row of buttons under a heading. */
.pm-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pm-space-4);
  margin-top: var(--pm-space-6);
}
.pm-btn-group--center { justify-content: center; }
@media (min-width: 768px) {
  .pm-btn-group { margin-top: var(--pm-space-8); }
}

/* ==========================================================================
   Icon
   Inline SVGs sized by a single class. Stroke/fill inherit currentColor.
   ========================================================================== */

.pm-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  vertical-align: middle;
  /* fill/stroke come from the SVG's own attributes so stroke icons and solid
     glyphs can share one class. Use --solid only if the markup omits them. */
}
.pm-icon--solid { fill: currentColor; stroke: none; }
.pm-icon--stroke { fill: none; stroke: currentColor; }
.pm-icon--xs { width: 0.75rem; height: 0.75rem; }
.pm-icon--sm { width: 1rem; height: 1rem; }
.pm-icon--md { width: 1.25rem; height: 1.25rem; }
.pm-icon--lg { width: 2rem; height: 2rem; }
.pm-icon--xl { width: 3rem; height: 3rem; }
.pm-icon--2xl { width: 4rem; height: 4rem; }

/* Icon inside a tinted square/circle. */
.pm-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--pm-radius-card);
  background-color: var(--pm-surface-raised);
  color: var(--pm-fg);
  flex: none;
}
.pm-icon-tile--round { border-radius: var(--pm-radius-full); }
.pm-icon-tile--sm { width: 2.5rem; height: 2.5rem; }
.pm-icon-tile--lg { width: 4.5rem; height: 4.5rem; }
.pm-icon-tile--outline {
  background-color: transparent;
  border: var(--pm-border-width) solid var(--pm-border-color);
}
.pm-icon-tile--accent {
  background-color: var(--pm-accent);
  color: var(--pm-on-accent);
}

/* ==========================================================================
   Card
   ========================================================================== */

.pm-card {
  display: flex;
  flex-direction: column;
  background-color: var(--pm-surface);
  color: var(--pm-fg);
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-card);
  overflow: hidden;
}
.pm-card--soft {
  border-color: transparent;
  background-color: var(--pm-surface-raised);
}
.pm-card--ghost {
  border-color: transparent;
  background-color: transparent;
}
.pm-card--raised {
  border-color: transparent;
  box-shadow: var(--pm-shadow-lg);
}
.pm-card--pad {
  padding: var(--pm-space-6);
}
@media (min-width: 768px) {
  .pm-card--pad { padding: var(--pm-space-8); }
}
.pm-card__body {
  padding: var(--pm-space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (min-width: 768px) {
  .pm-card__body { padding: var(--pm-space-8); }
}
.pm-card__media {
  width: 100%;
  overflow: hidden;
}
.pm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-card__title {
  font-size: var(--pm-text-h6);
  font-weight: var(--pm-weight-bold);
  line-height: var(--pm-leading-normal);
}
.pm-card__text {
  color: var(--pm-fg-muted);
  margin-top: var(--pm-space-3);
}
.pm-card__footer {
  margin-top: auto;
  padding-top: var(--pm-space-5);
}
/* .pm-card and .pm-card__body are column flexboxes, so a bare button or badge
   would stretch edge to edge with its label centred. Only --full asks for that. */
.pm-card > .pm-btn,
.pm-card__body > .pm-btn,
.pm-card__footer > .pm-btn,
.pm-card > .pm-badge,
.pm-card__body > .pm-badge,
.pm-card__footer > .pm-badge,
.pm-card > .pm-rating,
.pm-card__body > .pm-rating {
  align-self: flex-start;
}
.pm-card > .pm-btn--full,
.pm-card__body > .pm-btn--full,
.pm-card__footer > .pm-btn--full {
  align-self: stretch;
}

/* Whole-card link affordance. */
.pm-card--link {
  transition: transform var(--pm-duration) var(--pm-ease),
    box-shadow var(--pm-duration) var(--pm-ease);
}
.pm-card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-shadow-lg);
}

/* ==========================================================================
   Badge / tag / pill
   ========================================================================== */

.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-2);
  padding: var(--pm-space-1) var(--pm-space-2);
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-badge);
  background-color: transparent;
  font-size: var(--pm-text-sm);
  font-weight: var(--pm-weight-semibold);
  line-height: var(--pm-leading-relaxed);
  white-space: nowrap;
}
.pm-badge--solid {
  background-color: var(--pm-fg);
  color: var(--pm-bg);
}
.pm-badge--soft {
  background-color: var(--pm-surface-raised);
  border-color: transparent;
}
.pm-badge--accent {
  background-color: var(--pm-accent);
  border-color: var(--pm-accent);
  color: var(--pm-on-accent);
}
.pm-badge--round { border-radius: var(--pm-radius-full); }
.pm-badge--sm {
  font-size: var(--pm-text-xs);
  padding: 0.125rem var(--pm-space-2);
}

.pm-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-2);
}

/* ==========================================================================
   Avatar
   ========================================================================== */

.pm-avatar {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: var(--pm-radius-avatar);
  object-fit: cover;
  overflow: hidden; /* so <span class="pm-avatar"><img></span> clips too */
  flex: none;
}
.pm-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-avatar--xs { width: 2rem; height: 2rem; }
.pm-avatar--sm { width: 2.5rem; height: 2.5rem; }
.pm-avatar--lg { width: 4rem; height: 4rem; }
.pm-avatar--xl { width: 5rem; height: 5rem; }
.pm-avatar--2xl { width: 8rem; height: 8rem; }
.pm-avatar--square { border-radius: var(--pm-radius-image); }

.pm-avatar-group {
  display: flex;
  align-items: center;
}
.pm-avatar-group .pm-avatar {
  border: 2px solid var(--pm-bg);
}
.pm-avatar-group .pm-avatar + .pm-avatar {
  margin-left: -0.75rem;
}

/* Avatar + name + role, the testimonial/author lockup. */
.pm-person {
  display: flex;
  align-items: center;
  gap: var(--pm-space-4);
}
.pm-person__name {
  font-weight: var(--pm-weight-semibold);
}
.pm-person__role {
  color: var(--pm-fg-muted);
  font-size: var(--pm-text-sm);
}

/* ==========================================================================
   Star rating
   ========================================================================== */

.pm-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-1);
  color: var(--pm-fg);
}
.pm-rating .pm-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.pm-rating__label {
  margin-left: var(--pm-space-2);
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}

/* ==========================================================================
   Form controls
   ========================================================================== */

.pm-field {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-2);
}
.pm-label {
  font-size: var(--pm-text-sm);
  font-weight: var(--pm-weight-medium);
}
.pm-hint {
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}

.pm-input,
.pm-select,
.pm-textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--pm-space-2) var(--pm-space-3);
  background-color: transparent;
  color: var(--pm-fg);
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-form);
  font-size: var(--pm-text-base);
  line-height: var(--pm-leading-relaxed);
  transition: border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-input::placeholder,
.pm-textarea::placeholder {
  color: var(--pm-fg-muted);
}
.pm-input:focus,
.pm-select:focus,
.pm-textarea:focus {
  outline: none;
  border-color: var(--pm-fg);
  box-shadow: var(--pm-shadow-focus);
}
.pm-textarea {
  min-height: 11.25rem;
  padding: var(--pm-space-3);
  resize: vertical;
}
.pm-select {
  appearance: none;
  padding-right: var(--pm-space-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 1.35rem, calc(100% - 0.9rem) 1.35rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.pm-check {
  display: flex;
  align-items: flex-start;
  gap: var(--pm-space-2);
  font-size: var(--pm-text-base);
  cursor: pointer;
}
.pm-check input[type="checkbox"],
.pm-check input[type="radio"] {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  flex: none;
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-checkbox);
  background-color: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.pm-check input[type="radio"] {
  border-radius: var(--pm-radius-full);
}
.pm-check input[type="checkbox"]::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  transform: scale(0);
  transition: transform var(--pm-duration-fast) var(--pm-ease);
  box-shadow: inset 1em 1em var(--pm-bg);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.pm-check input[type="radio"]::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--pm-radius-full);
  transform: scale(0);
  transition: transform var(--pm-duration-fast) var(--pm-ease);
  box-shadow: inset 1em 1em var(--pm-bg);
}
.pm-check input:checked {
  background-color: var(--pm-fg);
  border-color: var(--pm-fg);
}
.pm-check input:checked::before {
  transform: scale(1);
}
.pm-check input:focus-visible {
  outline: 2px solid var(--pm-fg);
  outline-offset: 2px;
}

/* Inline email-capture row. */
.pm-inline-form {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-4);
  max-width: 30rem;
}
@media (min-width: 480px) {
  .pm-inline-form {
    flex-direction: row;
    align-items: center;
  }
  .pm-inline-form .pm-input { flex: 1; }
}
.pm-inline-form__note {
  font-size: var(--pm-text-xs);
  color: var(--pm-fg-muted);
}

/* ==========================================================================
   Accordion  (JS: data-pm-accordion)
   ========================================================================== */

.pm-accordion {
  border-top: var(--pm-border-width) solid var(--pm-border-color);
}
.pm-accordion__item {
  border-bottom: var(--pm-border-width) solid var(--pm-border-color);
}
.pm-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-4);
  width: 100%;
  padding: var(--pm-space-4) 0;
  text-align: left;
  font-size: var(--pm-text-md);
  font-weight: var(--pm-weight-semibold);
  color: inherit;
}
@media (min-width: 768px) {
  .pm-accordion__trigger {
    padding: var(--pm-space-5) 0;
    font-size: var(--pm-text-lg);
  }
}
.pm-accordion__icon {
  transition: transform var(--pm-duration) var(--pm-ease);
  flex: none;
}
.pm-accordion__trigger[aria-expanded="true"] .pm-accordion__icon {
  transform: rotate(180deg);
}
.pm-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pm-duration) var(--pm-ease);
}
.pm-accordion__panel[data-pm-open="true"] {
  grid-template-rows: 1fr;
}
.pm-accordion__panel > div {
  overflow: hidden;
}
.pm-accordion__content {
  padding-bottom: var(--pm-space-5);
  color: var(--pm-fg-muted);
}
/* Boxed variant */
.pm-accordion--boxed {
  border-top: 0;
  display: grid;
  gap: var(--pm-space-4);
}
.pm-accordion--boxed .pm-accordion__item {
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-card);
  padding-inline: var(--pm-space-5);
}

/* ==========================================================================
   Tabs  (JS: data-pm-tabs)
   ========================================================================== */

.pm-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-2);
  border-bottom: var(--pm-border-width) solid var(--pm-border-soft);
}
.pm-tabs__tab {
  padding: var(--pm-space-3) var(--pm-space-4);
  font-weight: var(--pm-weight-medium);
  color: var(--pm-fg-muted);
  border-bottom: var(--pm-border-width-thick) solid transparent;
  margin-bottom: -1px;
  transition: color var(--pm-duration-fast) var(--pm-ease),
    border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-tabs__tab[aria-selected="true"] {
  color: var(--pm-fg);
  border-bottom-color: var(--pm-fg);
}
.pm-tabs__panel[hidden] { display: none; }
.pm-tabs__panel { padding-top: var(--pm-space-8); }

/* Pill variant */
.pm-tabs--pills .pm-tabs__list {
  border-bottom: 0;
  gap: var(--pm-space-2);
}
.pm-tabs--pills .pm-tabs__tab {
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-full);
  padding: var(--pm-space-2) var(--pm-space-5);
  margin-bottom: 0;
}
.pm-tabs--pills .pm-tabs__tab[aria-selected="true"] {
  background-color: var(--pm-fg);
  color: var(--pm-bg);
}

/* ==========================================================================
   Dropdown / mega menu  (JS: data-pm-dropdown)
   ========================================================================== */

.pm-dropdown {
  position: relative;
}
.pm-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-2);
  color: inherit;
  font-size: inherit;
}
.pm-dropdown__chevron {
  transition: transform var(--pm-duration) var(--pm-ease);
}
.pm-dropdown[data-pm-open="true"] > .pm-dropdown__trigger .pm-dropdown__chevron,
.pm-dropdown__trigger[aria-expanded="true"] .pm-dropdown__chevron {
  transform: rotate(180deg);
}
.pm-dropdown__menu {
  display: none;
  background-color: var(--pm-bg);
  color: var(--pm-fg);
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-dropdown);
  padding: var(--pm-space-2);
  min-width: 12rem;
}
.pm-dropdown[data-pm-open="true"] > .pm-dropdown__menu {
  display: block;
}
@media (min-width: 992px) {
  .pm-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--pm-z-dropdown);
    box-shadow: var(--pm-shadow-lg);
  }
  .pm-dropdown__menu--right { left: auto; right: 0; }
  .pm-dropdown__menu--center { left: 50%; transform: translateX(-50%); }
}
.pm-dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--pm-space-3);
  padding: var(--pm-space-2) var(--pm-space-4);
  border-radius: var(--pm-radius-xs);
  transition: background-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-dropdown__link:hover {
  background-color: color-mix(in srgb, var(--pm-fg) 8%, transparent);
}
.pm-dropdown__link-title { font-weight: var(--pm-weight-medium); }
.pm-dropdown__link-desc {
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}

/* ==========================================================================
   Navbar shell  (JS: data-pm-nav)
   Shared chrome. Individual navbar blocks lay out on top of this.
   ========================================================================== */

.pm-nav {
  position: relative;
  z-index: var(--pm-z-navbar);
  display: flex;
  width: 100%;
  align-items: center;
  background-color: var(--pm-bg);
  color: var(--pm-fg);
  border-bottom: var(--pm-border-width) solid var(--pm-border-soft);
}
@media (min-width: 992px) {
  .pm-nav {
    min-height: var(--pm-nav-height);
    padding-inline: var(--pm-gutter);
  }
}
.pm-nav__inner {
  width: 100%;
  height: 100%;
}
@media (min-width: 992px) {
  .pm-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.pm-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--pm-nav-height-mobile);
  padding-inline: var(--pm-gutter);
}
@media (min-width: 992px) {
  .pm-nav__bar {
    min-height: 100%;
    padding-inline: 0;
  }
}
.pm-nav__logo img,
.pm-nav__logo svg {
  height: 2rem;
  width: auto;
}
.pm-nav__menu {
  padding-inline: var(--pm-gutter);
  overflow: hidden;
  height: 0;
  transition: height var(--pm-duration) var(--pm-ease);
}
.pm-nav__menu[data-pm-open="true"] {
  height: auto;
  max-height: calc(100dvh - var(--pm-nav-height-mobile));
  overflow-y: auto;
  padding-bottom: var(--pm-space-8);
}
@media (min-width: 992px) {
  .pm-nav__menu,
  .pm-nav__menu[data-pm-open="true"] {
    display: flex;
    align-items: center;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-inline: 0;
    padding-bottom: 0;
  }
}
.pm-nav__link {
  display: block;
  padding: var(--pm-space-3) 0;
  font-size: var(--pm-text-base);
}
.pm-nav__link:first-child { padding-top: var(--pm-space-6); }
@media (min-width: 992px) {
  .pm-nav__link,
  .pm-nav__link:first-child {
    padding: var(--pm-space-2) var(--pm-space-4);
  }
}
.pm-nav__actions {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-4);
  margin-top: var(--pm-space-6);
}
.pm-nav__actions > .pm-btn { width: 100%; }
@media (min-width: 992px) {
  .pm-nav__actions {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    margin-left: var(--pm-space-4);
  }
  .pm-nav__actions > .pm-btn { width: auto; }
}

/* Hamburger */
.pm-burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-right: -0.5rem;
}
@media (min-width: 992px) {
  .pm-burger--hide-desktop { display: none; }
}
.pm-burger__line {
  display: block;
  width: 1.5rem;
  height: 2px;
  margin: 3px 0;
  background-color: currentColor;
  transition: transform var(--pm-duration) var(--pm-ease),
    width var(--pm-duration-fast) var(--pm-ease),
    opacity var(--pm-duration-fast) var(--pm-ease);
}
.pm-burger[aria-expanded="true"] .pm-burger__line:nth-child(1) {
  transform: translateY(8px) rotate(-45deg);
}
.pm-burger[aria-expanded="true"] .pm-burger__line:nth-child(2) {
  width: 0;
  opacity: 0;
}
.pm-burger[aria-expanded="true"] .pm-burger__line:nth-child(3) {
  transform: translateY(-8px) rotate(45deg);
}

/* ==========================================================================
   Modal / dialog / lightbox  (JS: data-pm-modal)
   ========================================================================== */

.pm-modal {
  position: fixed;
  inset: 0;
  z-index: var(--pm-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pm-gutter);
}
.pm-modal[data-pm-open="true"] { display: flex; }
.pm-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--pm-color-overlay);
}
.pm-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  max-height: 90dvh;
  overflow-y: auto;
  background-color: var(--pm-color-page);
  color: var(--pm-color-text);
  border: var(--pm-border-width) solid var(--pm-color-border);
  border-radius: var(--pm-radius-card);
  padding: var(--pm-space-6);
}
@media (min-width: 768px) {
  .pm-modal__panel { padding: var(--pm-space-8); }
}
.pm-modal__panel--wide { max-width: 60rem; }
.pm-modal__panel--video {
  max-width: 60rem;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.pm-modal__close {
  position: absolute;
  top: var(--pm-space-4);
  right: var(--pm-space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
}
.pm-modal__panel--video .pm-modal__close {
  top: -3rem;
  right: 0;
  color: #fff;
}

/* Play button overlay for video blocks. */
.pm-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgb(0 0 0 / 0.25);
  transition: background-color var(--pm-duration) var(--pm-ease);
}
.pm-play:hover { background-color: rgb(0 0 0 / 0.4); }
.pm-play__icon {
  width: 4rem;
  height: 4rem;
}
@media (min-width: 768px) {
  .pm-play__icon { width: 5rem; height: 5rem; }
}

/* ==========================================================================
   Carousel / slider  (JS: data-pm-carousel)
   Scroll-snap track with prev/next buttons and dots.
   ========================================================================== */

.pm-carousel { position: relative; }
.pm-carousel__viewport {
  overflow: hidden;
}
.pm-carousel__track {
  display: flex;
  gap: var(--pm-space-6);
  transition: transform var(--pm-duration-slow) var(--pm-ease);
  will-change: transform;
}
.pm-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .pm-carousel--2 .pm-carousel__slide { flex-basis: calc(50% - (var(--pm-space-6) / 2)); }
}
@media (min-width: 992px) {
  .pm-carousel--3 .pm-carousel__slide { flex-basis: calc(33.3333% - (var(--pm-space-6) * 2 / 3)); }
  .pm-carousel--4 .pm-carousel__slide { flex-basis: calc(25% - (var(--pm-space-6) * 3 / 4)); }
}
.pm-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-4);
  margin-top: var(--pm-space-8);
}
.pm-carousel__nav {
  display: flex;
  gap: var(--pm-space-3);
}
.pm-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--pm-space-2);
}
.pm-carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--pm-radius-full);
  background-color: color-mix(in srgb, var(--pm-fg) 25%, transparent);
  transition: background-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-carousel__dot[aria-current="true"] {
  background-color: var(--pm-fg);
}
.pm-carousel__arrow[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ==========================================================================
   Table
   ========================================================================== */

.pm-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-card);
}
.pm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pm-text-sm);
  text-align: left;
}
.pm-table th,
.pm-table td {
  padding: var(--pm-space-4);
  border-bottom: var(--pm-border-width) solid var(--pm-border-soft);
  vertical-align: middle;
}
.pm-table thead th {
  background-color: var(--pm-surface-raised);
  font-weight: var(--pm-weight-semibold);
  white-space: nowrap;
}
.pm-table tbody tr:last-child td { border-bottom: 0; }
.pm-table--center th:not(:first-child),
.pm-table--center td:not(:first-child) { text-align: center; }

/* ==========================================================================
   Breadcrumb / pagination
   ========================================================================== */

.pm-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pm-space-2);
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}
.pm-breadcrumb a:hover { color: var(--pm-fg); }
.pm-breadcrumb [aria-current="page"] { color: var(--pm-fg); }

.pm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-4);
  padding-top: var(--pm-space-8);
  border-top: var(--pm-border-width) solid var(--pm-border-soft);
  margin-top: var(--pm-space-12);
}
.pm-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--pm-space-1);
}
.pm-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--pm-radius-button);
  font-size: var(--pm-text-sm);
}
.pm-pagination__page[aria-current="page"] {
  background-color: var(--pm-surface-raised);
  font-weight: var(--pm-weight-semibold);
}

/* ==========================================================================
   Small recurring molecules
   ========================================================================== */

/* Feature/benefit row with a leading icon. */
.pm-feature-row {
  display: flex;
  align-items: flex-start;
  gap: var(--pm-space-4);
}
.pm-feature-row__body > p {
  color: var(--pm-fg-muted);
  margin-top: var(--pm-space-2);
}

/* Tick list. */
.pm-ticks {
  display: grid;
  gap: var(--pm-space-3);
}
.pm-ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--pm-space-3);
  list-style: none;
}
.pm-ticks .pm-icon { margin-top: 0.15rem; }

/* Stat block. */
.pm-stat__value {
  font-size: var(--pm-text-h3);
  font-weight: var(--pm-weight-bold);
  line-height: var(--pm-leading-tight);
  letter-spacing: var(--pm-tracking-tight);
}
.pm-stat__label {
  color: var(--pm-fg-muted);
  margin-top: var(--pm-space-2);
}

/* Logo wall item. */
.pm-logo {
  max-height: 3rem;
  width: auto;
  object-fit: contain;
}

/* Divider. */
.pm-divider {
  border: 0;
  border-top: var(--pm-border-width) solid var(--pm-border-soft);
  margin-block: var(--pm-space-8);
}

/* Blockquote used by testimonial blocks. */
.pm-quote {
  font-size: var(--pm-text-lg);
  font-weight: var(--pm-weight-medium);
  line-height: var(--pm-leading-relaxed);
}
@media (min-width: 768px) {
  .pm-quote { font-size: var(--pm-text-xl); }
}

/* Social icon row. */
.pm-social {
  display: flex;
  align-items: center;
  gap: var(--pm-space-3);
}
.pm-social a {
  display: inline-flex;
  transition: opacity var(--pm-duration-fast) var(--pm-ease);
}
.pm-social a:hover { opacity: 0.6; }

/* Footer link column. */
.pm-footer-col__title {
  font-size: var(--pm-text-sm);
  font-weight: var(--pm-weight-semibold);
  margin-bottom: var(--pm-space-3);
}
.pm-footer-col ul {
  display: grid;
  gap: var(--pm-space-2);
  list-style: none;
}
.pm-footer-col a {
  font-size: var(--pm-text-sm);
  transition: opacity var(--pm-duration-fast) var(--pm-ease);
}
.pm-footer-col a:hover { opacity: 0.65; }

/* Bottom bar of a footer. */
.pm-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-6);
  padding-top: var(--pm-space-8);
  border-top: var(--pm-border-width) solid var(--pm-border-soft);
  margin-top: var(--pm-space-12);
  font-size: var(--pm-text-sm);
}
@media (min-width: 768px) {
  .pm-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--pm-space-20);
  }
}
.pm-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-6);
}
.pm-footer-legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Banner / announcement strip. */
.pm-banner {
  background-color: var(--pm-bg);
  color: var(--pm-fg);
  padding: var(--pm-space-3) var(--pm-gutter);
  font-size: var(--pm-text-sm);
}
.pm-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pm-space-4);
}
.pm-banner__close {
  display: inline-flex;
  margin-left: auto;
}

/* Loading spinner. */
.pm-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid color-mix(in srgb, var(--pm-fg) 20%, transparent);
  border-top-color: var(--pm-fg);
  border-radius: var(--pm-radius-full);
  animation: pm-spin 0.8s linear infinite;
}
@keyframes pm-spin {
  to { transform: rotate(360deg); }
}

/* Progress bar. */
.pm-progress {
  width: 100%;
  height: 0.25rem;
  background-color: color-mix(in srgb, var(--pm-fg) 15%, transparent);
  border-radius: var(--pm-radius-full);
  overflow: hidden;
}
.pm-progress__bar {
  height: 100%;
  background-color: var(--pm-fg);
  border-radius: inherit;
  transition: width var(--pm-duration) var(--pm-ease);
}

/* Infinite marquee (logo strips). */
.pm-marquee {
  display: flex;
  overflow: hidden;
  gap: var(--pm-space-12);
  mask-image: linear-gradient(90deg, transparent, #000 12.5%, #000 87.5%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12.5%, #000 87.5%, transparent);
}
.pm-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--pm-space-12);
  flex: none;
  padding-right: var(--pm-space-12);
  animation: pm-marquee 30s linear infinite;
}
.pm-marquee:hover .pm-marquee__group {
  animation-play-state: paused;
}
@keyframes pm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Timeline spine. */
.pm-timeline {
  position: relative;
  display: grid;
  gap: var(--pm-space-12);
}
.pm-timeline::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--pm-border-soft);
}
.pm-timeline__item {
  position: relative;
  padding-left: var(--pm-space-10);
}
.pm-timeline__dot {
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: var(--pm-radius-full);
  background-color: var(--pm-fg);
}