/* ==========================================================================
   Pure Marketing Design System — Base
   Reset, element defaults, page furniture (container / section / heading).
   Depends on: tokens.css
   Breakpoints used across the whole system:
     sm 480px · md 768px · lg 992px · xl 1280px
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background-color: var(--pm-color-page);
  color: var(--pm-color-text);
  font-family: var(--pm-font-sans);
  font-size: var(--pm-text-base);
  font-weight: var(--pm-weight-body);
  line-height: var(--pm-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

:where(ul, ol) {
  /* :where() keeps this at zero specificity so the heading-rhythm rule below
     can still give a list its top margin. */
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

address {
  font-style: normal;
}

hr {
  border: 0;
  border-top: var(--pm-border-width) solid var(--pm-border-soft);
  margin: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

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

::selection {
  background-color: var(--pm-color-primary);
  color: var(--pm-color-on-primary);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--pm-font-display);
  font-weight: var(--pm-weight-heading);
  letter-spacing: var(--pm-tracking-heading);
  color: inherit;
  text-wrap: balance;
}

h1,
.pm-h1 {
  font-size: var(--pm-text-h1);
  line-height: var(--pm-leading-tight);
}

h2,
.pm-h2 {
  font-size: var(--pm-text-h2);
  line-height: var(--pm-leading-tight);
}

h3,
.pm-h3 {
  font-size: var(--pm-text-h3);
  line-height: var(--pm-leading-tight);
}

h4,
.pm-h4 {
  font-size: var(--pm-text-h4);
  line-height: var(--pm-leading-snug);
}

h5,
.pm-h5 {
  font-size: var(--pm-text-h5);
  line-height: var(--pm-leading-normal);
}

h6,
.pm-h6 {
  font-size: var(--pm-text-h6);
  line-height: var(--pm-leading-normal);
}

.pm-text-xl {
  font-size: var(--pm-text-xl);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-lg {
  font-size: var(--pm-text-lg);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-md {
  font-size: var(--pm-text-md);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-base {
  font-size: var(--pm-text-base);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-sm {
  font-size: var(--pm-text-sm);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-xs {
  font-size: var(--pm-text-xs);
  line-height: var(--pm-leading-relaxed);
}

.pm-muted {
  color: var(--pm-fg-muted);
}

/* Heading rhythm.
   Headings carry no bottom margin of their own, so a paragraph placed straight
   after one used to weld to it. This gives the *following* element the gap
   instead, at zero specificity — any block rule, and any .pm-stack/.pm-grid gap,
   still wins, and in normal flow the two margins collapse rather than stack. */
:where(h1, h2, h3, h4, h5, h6, .pm-h1, .pm-h2, .pm-h3, .pm-h4, .pm-h5, .pm-h6)
  + :where(p, ul, ol, blockquote, figure, dl, .pm-lede, .pm-prose) {
  margin-top: var(--pm-space-5);
}

@media (min-width: 768px) {
  :where(h1, h2, h3, h4, h5, h6, .pm-h1, .pm-h2, .pm-h3, .pm-h4, .pm-h5, .pm-h6)
    + :where(p, ul, ol, blockquote, figure, dl, .pm-lede, .pm-prose) {
    margin-top: var(--pm-space-6);
  }
}

/* An eyebrow sits tight above its heading, never pushed off by the rule above. */
:where(.pm-eyebrow) + :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

.pm-lede {
  font-size: var(--pm-text-md);
  line-height: var(--pm-leading-loose);
  color: var(--pm-fg-muted);
  max-width: var(--pm-measure);
}

/* An eyebrow: the small label that sits above a heading. */
.pm-eyebrow {
  display: inline-block;
  font-size: var(--pm-text-base);
  font-weight: var(--pm-weight-semibold);
  line-height: var(--pm-leading-relaxed);
  margin-bottom: var(--pm-space-4);
}

.pm-eyebrow--mono {
  font-family: var(--pm-font-mono);
  font-size: var(--pm-text-xs);
  font-weight: var(--pm-weight-medium);
  letter-spacing: var(--pm-tracking-widest);
  text-transform: uppercase;
  color: var(--pm-accent);
}

/* Rich-text defaults for long-form content blocks. */
.pm-prose > * + * {
  margin-top: var(--pm-space-5);
}
.pm-prose h2 {
  font-size: var(--pm-text-h4);
  margin-top: var(--pm-space-10);
}
.pm-prose h3 {
  font-size: var(--pm-text-h5);
  margin-top: var(--pm-space-8);
}
.pm-prose h4 {
  font-size: var(--pm-text-h6);
  margin-top: var(--pm-space-6);
}
.pm-prose p,
.pm-prose li {
  color: var(--pm-fg-muted);
  line-height: var(--pm-leading-loose);
}
.pm-prose ul,
.pm-prose ol {
  padding-left: var(--pm-space-6);
  display: grid;
  gap: var(--pm-space-2);
}
.pm-prose ul {
  list-style: disc;
}
.pm-prose ol {
  list-style: decimal;
}
.pm-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pm-prose blockquote {
  border-left: var(--pm-border-width-thick) solid var(--pm-border-color);
  padding-left: var(--pm-space-5);
  font-size: var(--pm-text-lg);
}
.pm-prose img {
  width: 100%;
  border-radius: var(--pm-radius-image);
}
.pm-prose figcaption {
  margin-top: var(--pm-space-3);
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}
.pm-prose code {
  font-family: var(--pm-font-mono);
  font-size: 0.9em;
  background-color: var(--pm-surface-raised);
  padding: 0.15em 0.4em;
  border-radius: var(--pm-radius-xs);
}
.pm-prose pre {
  font-family: var(--pm-font-mono);
  background-color: var(--pm-surface-raised);
  padding: var(--pm-space-5);
  border-radius: var(--pm-radius-card);
  overflow-x: auto;
}

/* ==========================================================================
   Layout furniture
   ========================================================================== */

/* The outer wrapper for every block. Owns the horizontal gutter, the colour
   scheme background and the vertical rhythm. */
.pm-section {
  background-color: var(--pm-bg);
  color: var(--pm-fg);
  padding-inline: var(--pm-gutter);
  padding-block: var(--pm-section-py);
  position: relative;
}

.pm-section--tight {
  padding-block: var(--pm-space-12);
}

.pm-section--flush {
  padding-block: 0;
}

.pm-section--hero {
  padding-block: var(--pm-space-16);
}

@media (min-width: 768px) {
  .pm-section {
    padding-block: var(--pm-space-24);
  }
  .pm-section--tight {
    padding-block: var(--pm-space-16);
  }
  .pm-section--flush {
    padding-block: 0;
  }
  .pm-section--hero {
    padding-block: var(--pm-space-24);
  }
}

@media (min-width: 992px) {
  .pm-section {
    padding-block: var(--pm-section-py-lg);
  }
  .pm-section--tight {
    padding-block: var(--pm-space-20);
  }
  .pm-section--flush {
    padding-block: 0;
  }
  .pm-section--hero {
    padding-block: var(--pm-space-28);
  }
}

.pm-container {
  width: 100%;
  max-width: var(--pm-container);
  margin-inline: auto;
}

.pm-container--narrow {
  max-width: var(--pm-container-narrow);
}

.pm-container--wide {
  max-width: var(--pm-container-wide);
}

.pm-container--full {
  max-width: none;
}

/* The standard centred section heading block. */
.pm-section-head {
  max-width: 48rem;
  margin-bottom: var(--pm-space-12);
}

.pm-section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* :not(.pm-eyebrow) matters — an eyebrow is a <p> too, and without this the
   section-head rule (higher specificity) would repaint it muted and resize it. */
.pm-section-head > p:not(.pm-eyebrow) {
  color: var(--pm-fg-muted);
  font-size: var(--pm-text-md);
  margin-top: var(--pm-space-5);
}

@media (min-width: 768px) {
  .pm-section-head {
    margin-bottom: var(--pm-space-20);
  }
  .pm-section-head > p:not(.pm-eyebrow) {
    margin-top: var(--pm-space-6);
  }
}

.pm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.pm-scroll-locked {
  overflow: hidden;
}