/* ==========================================================================
   Webstuffguy Labs — single stylesheet
   Every style for the site lives in this file. No frameworks, no imports,
   no external fonts. Brand colors are sampled from the logo artwork.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Brand — sampled from the logo */
  --brand-purple: #513278;
  --brand-purple-deep: #3b2459;
  --brand-magenta: #a04d8c;
  --brand-orange: #f56b33;
  --brand-orange-deep: #d4531e;

  /* Semantic color */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f5fa;
  --color-surface: #ffffff;
  --color-text: #1c1a22;
  --color-text-muted: #5c5768;
  --color-heading: var(--brand-purple-deep);
  --color-border: #e2ddea;
  --color-border-strong: #cfc7db;
  --color-accent: var(--brand-purple);
  --color-accent-hover: var(--brand-purple-deep);
  --color-on-accent: #ffffff;
  --color-success-bg: #e8f4ec;
  --color-success-text: #1f6b3d;
  --color-soon-bg: #fdeee6;
  --color-soon-text: var(--brand-orange-deep);
  --color-accent-soft: #ede6f7;
  --color-accent-strong: var(--brand-purple);
  --color-error-bg: #fdecea;
  --color-error-text: #9b1c16;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  /* Type scale (1.25 ratio) */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.78rem;
  --text-s: 0.875rem;
  --text-base: 1rem;
  --text-m: 1.125rem;
  --text-l: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.125rem;
  --text-3xl: 2.75rem;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;

  /* Layout */
  --measure: 68ch;
  --content-width: 70rem;
  --radius: 8px;
  --radius-s: 4px;
  --shadow: 0 1px 2px rgb(28 26 34 / 6%), 0 4px 12px rgb(28 26 34 / 5%);

  /* This is a light-only design — the header is a fixed white band and the
     palette below it is built to match. Declaring the scheme keeps native
     controls (form fields, scrollbars, the contact form's inputs) light on a
     device set to dark mode, instead of the browser painting them dark
     against a light page. To reintroduce dark mode, restore a
     prefers-color-scheme block overriding the semantic --color-* tokens and
     drop this line. */
  color-scheme: light;
}

/* --- Reset -------------------------------------------------------------- */

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

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
fieldset {
  margin: 0;
}

ul,
ol {
  padding-left: var(--space-m);
}

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

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

/* --- Base --------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  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;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--color-heading);
  line-height: var(--leading-tight);
  text-wrap: balance;
  font-weight: 700;
}

h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-m);
  line-height: var(--leading-snug);
}

h4 {
  font-size: var(--text-base);
}

p,
li {
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  color: var(--color-accent-hover);
}

strong {
  font-weight: 650;
}

:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* --- Skip link ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 10;
  padding: var(--space-2xs) var(--space-s);
  background: var(--brand-purple);
  color: #fff;
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

main:focus {
  outline: none;
}

/* --- Layout containers -------------------------------------------------- */

.site-header__inner,
.site-footer__inner,
.site-footer__legal,
main {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

main {
  flex: 1;
  padding-block: var(--space-xl) var(--space-3xl);
}

/* Consecutive paragraphs sitting directly in page content — the intro block on a
   plugin detail page, for instance — are not inside a .section and so need their
   own flow spacing. Scoped rather than global so cards and the footer keep the
   tighter rhythm they set themselves. */
.page > p + p,
.hero p + p {
  margin-top: var(--space-s);
}

.section {
  margin-top: var(--space-2xl);
}

.section > * + * {
  margin-top: var(--space-s);
}

.section > h2 + * {
  margin-top: var(--space-m);
}

.section__intro {
  color: var(--color-text-muted);
}

/* --- Header ------------------------------------------------------------- */

/* The header is a white band. The wordmark is dark purple on a transparent
   background, so white is the ground it was drawn for — giving it a light
   plate on a dark header instead made it read as a white block sitting on the
   page. The --header-* tokens are declared here rather than reusing the global
   ones so the band stays white if a dark palette is ever reintroduced. */
.site-header {
  --header-bg: #ffffff;
  --header-text: #1c1a22;
  --header-accent: var(--brand-purple);
  --header-border: #e2ddea;
  --header-border-strong: #cfc7db;

  position: relative;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  padding-block: var(--space-s);
}

.site-header__brand {
  display: block;
  flex: none;
  line-height: 0;
  border-radius: var(--radius-s);
}

.site-header__brand img {
  width: auto;
  height: 76px;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav li {
  max-width: none;
}

.site-nav a {
  display: block;
  padding-block: var(--space-3xs);
  color: var(--header-text);
  font-size: var(--text-s);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--header-accent);
  border-bottom-color: var(--header-border-strong);
}

.site-nav a[aria-current="page"] {
  color: var(--header-accent);
  border-bottom-color: var(--brand-orange);
}

/* --- Submenus ----------------------------------------------------------- */

.site-nav__item {
  max-width: none;
  position: relative;
}

/* The top-level control for a submenu is a button, not a link, so it works
   with a keyboard and announces its expanded state. It is styled to sit
   alongside the plain nav links without looking like a form control. */
.site-nav__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--header-text);
  font-size: var(--text-s);
  font-weight: 600;
  cursor: pointer;
}

.site-nav__button:hover,
.site-nav__button:focus-visible {
  color: var(--header-accent);
  border-bottom-color: var(--header-border-strong);
}

/* Marks the section the current page belongs to, the same way aria-current
   marks an exact page match. */
.site-nav__button[data-section-current="true"] {
  color: var(--header-accent);
  border-bottom-color: var(--brand-orange);
}

.site-nav__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 120ms ease;
}

.site-nav__item--open .site-nav__caret {
  transform: rotate(180deg);
}

.site-submenu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-submenu__label {
  margin: 0 0 var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-submenu__note {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}

.site-submenu__overview {
  font-weight: 700;
}

/* Desktop: the submenu is a panel anchored under its button. */
@media (min-width: 52rem) {
  .site-nav--enhanced .site-submenu {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--space-2xs));
    left: 0;
    min-width: 16rem;
    padding: var(--space-s);
    background: var(--header-bg);
    border: 1px solid var(--header-border);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgb(28 26 34 / 12%);
  }

  .site-nav--enhanced .site-nav__item--open .site-submenu {
    display: block;
  }

  /* The docs menu carries 12 links in four groups, so it lays them out in
     columns rather than one very long list. */
  .site-nav--enhanced #menu-docs {
    right: 0;
    left: auto;
    min-width: 34rem;
  }

  .site-submenu__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s) var(--space-m);
    margin-top: var(--space-2xs);
  }

  .site-submenu a {
    display: block;
    padding: var(--space-3xs) var(--space-2xs);
    margin-inline: calc(var(--space-2xs) * -1);
    border-radius: var(--radius-s);
    color: var(--header-text);
    font-size: var(--text-s);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 0;
  }

  .site-submenu a:hover,
  .site-submenu a:focus-visible {
    background: var(--color-bg-alt);
    color: var(--header-accent);
  }

  .site-submenu a[aria-current="page"] {
    color: var(--header-accent);
    box-shadow: inset 3px 0 0 var(--brand-orange);
  }

  .site-submenu__overview {
    padding-bottom: var(--space-2xs);
    margin-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--header-border);
  }
}

/* --- Mobile nav toggle -------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  background: transparent;
  color: var(--header-text);
  border: 1px solid var(--header-border-strong);
  border-radius: var(--radius-s);
  font-size: var(--text-s);
  font-weight: 650;
  cursor: pointer;
}

.nav-toggle:hover {
  color: var(--header-accent);
  border-color: var(--header-accent);
}

/* Three bars from one element: the middle is the box, the outer two are its
   pseudo-elements. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

/* Open state: the middle bar disappears and the outer two cross. */
.site-nav--open .nav-toggle__bars {
  background: transparent;
}

.site-nav--open .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.site-nav--open .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Below this width the nav does not fit beside a 316px-wide logo, so it
   collapses behind the toggle. The rules are scoped to .site-nav--enhanced,
   which only exists once nav.js has run — without it the list stays visible
   and wraps, exactly as it did before. */
@media (max-width: 51.999rem) {
  /* Logo and toggle must stay on one row. Left to wrap, the toggle drops onto
     a line of its own and the header becomes a tall white strip with almost
     nothing in it. The logo is sized by width and allowed to shrink so it can
     never push the toggle down, however narrow the screen gets. */
  .site-header__inner {
    flex-wrap: nowrap;
    gap: var(--space-s);
  }

  .site-header__brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-header__brand img {
    width: 100%;
    max-width: 230px;
    height: auto;
  }

  .nav-toggle {
    flex: none;
  }

  .site-nav--enhanced .nav-toggle {
    display: inline-flex;
  }

  .site-nav--enhanced .site-nav__list {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2xs) var(--space-m) var(--space-s);
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: 0 8px 16px rgb(28 26 34 / 8%);

    /* With a submenu expanded the drawer is taller than a phone screen, so it
       scrolls inside itself rather than running off the bottom. overscroll
       containment stops the page behind scrolling once it hits the end. */
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav--enhanced.site-nav--open .site-nav__list {
    display: flex;
  }

  .site-nav--enhanced .site-nav__list a {
    padding-block: var(--space-xs);
    border-bottom: 1px solid var(--header-border);
    border-left: 3px solid transparent;
    padding-left: var(--space-2xs);
    font-size: var(--text-base);
  }

  .site-nav--enhanced .site-nav__list li:last-child a {
    border-bottom: 0;
  }

  .site-nav--enhanced .site-nav__list a[aria-current="page"] {
    border-left-color: var(--brand-orange);
  }

  /* Submenus expand inline rather than floating — a floating panel inside a
     drawer has nowhere to go on a phone. */
  .site-nav--enhanced .site-nav__button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-xs) var(--space-2xs);
    border-bottom: 1px solid var(--header-border);
    border-left: 3px solid transparent;
    font-size: var(--text-base);
  }

  .site-nav--enhanced .site-nav__button[data-section-current="true"] {
    border-left-color: var(--brand-orange);
  }

  .site-nav--enhanced .site-submenu {
    display: none;
    padding: var(--space-2xs) 0 var(--space-2xs) var(--space-s);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--header-border);
  }

  .site-nav--enhanced .site-nav__item--open .site-submenu {
    display: block;
  }

  .site-nav--enhanced .site-submenu a {
    display: block;
    padding: var(--space-2xs) var(--space-2xs);
    color: var(--header-text);
    font-size: var(--text-s);
    font-weight: 600;
    text-decoration: none;
    border: 0;
  }

  .site-nav--enhanced .site-submenu a[aria-current="page"] {
    color: var(--header-accent);
    box-shadow: inset 3px 0 0 var(--brand-orange);
  }

  .site-nav--enhanced .site-submenu__group {
    margin-top: var(--space-2xs);
  }

  .site-nav--enhanced .site-submenu__label {
    padding-inline: var(--space-2xs);
  }
}

/* --- Page header -------------------------------------------------------- */

.page__header {
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-l);
  border-bottom: 1px solid var(--color-border);
}

.page__header h1 {
  font-size: var(--text-2xl);
}

.lede {
  margin-top: var(--space-s);
  font-size: var(--text-m);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  max-width: 60ch;
}

.meta-line {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-block: var(--space-l) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.hero h1 {
  max-width: 20ch;
}

.hero .lede {
  margin-top: var(--space-m);
  font-size: var(--text-m);
  color: var(--color-text);
  max-width: 62ch;
}

/* --- Buttons ------------------------------------------------------------ */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-l);
  max-width: none;
}

.button {
  display: inline-block;
  padding: var(--space-2xs) var(--space-m);
  min-height: 44px;
  line-height: 28px;
  border: 2px solid var(--brand-purple);
  border-radius: var(--radius);
  background: var(--brand-purple);
  color: #fff;
  font-size: var(--text-s);
  font-weight: 650;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.button:hover,
.button:focus-visible {
  background: var(--brand-purple-deep);
  border-color: var(--brand-purple-deep);
  color: #fff;
}

.button--ghost {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-border-strong);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  background: transparent;
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
}

.link-arrow {
  display: inline-block;
  font-weight: 600;
  font-size: var(--text-s);
  text-decoration: none;
}

.link-arrow::after {
  content: " \2192";
}

.link-arrow:hover,
.link-arrow:focus-visible {
  text-decoration: underline;
}

/* --- Grid and cards ----------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-m);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.card {
  padding: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card > * + * {
  margin-top: var(--space-2xs);
}

.card h3 {
  color: var(--color-heading);
}

.card h3 + p {
  margin-top: var(--space-2xs);
}

.card p:last-child {
  max-width: none;
}

/* --- Plugin list -------------------------------------------------------- */

.plugin-list {
  list-style: none;
  padding: 0;
  margin: var(--space-m) 0 0;
  display: grid;
  gap: var(--space-m);
}

.plugin-card {
  max-width: none;
  padding: var(--space-l);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--brand-orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.plugin-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-s);
}

.plugin-card__head h2,
.plugin-card__head h3 {
  font-size: var(--text-l);
  margin: 0;
}

.plugin-card__head a {
  text-decoration: none;
}

.plugin-card__head a:hover,
.plugin-card__head a:focus-visible {
  text-decoration: underline;
}

.plugin-card__tagline {
  margin-top: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--text-m);
  line-height: var(--leading-snug);
}

.plugin-card__tagline + p {
  margin-top: var(--space-s);
}

.plugin-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  align-items: center;
  margin-top: var(--space-m);
  max-width: none;
}

/* --- Badges ------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px var(--space-2xs);
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.badge--available {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge--soon {
  background: var(--color-soon-bg);
  color: var(--color-soon-text);
}

/* --- Definition lists --------------------------------------------------- */

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-m);
  padding: var(--space-s) 0;
  border-block: 1px solid var(--color-border);
}

.meta dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.meta dd {
  margin: 0;
  font-weight: 600;
}

.feature-list {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-m);
}

.feature-list__item {
  padding-left: var(--space-s);
  border-left: 3px solid var(--color-border-strong);
}

.feature-list dt {
  font-weight: 700;
  color: var(--color-heading);
  font-size: var(--text-m);
}

.feature-list dd {
  margin: var(--space-3xs) 0 0;
  max-width: var(--measure);
}

/* --- Lists -------------------------------------------------------------- */

.tick-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-s);
  display: grid;
  gap: var(--space-2xs);
}

.tick-list li {
  position: relative;
  padding-left: var(--space-m);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand-orange);
}

.steps {
  list-style: none;
  padding: 0;
  margin-top: var(--space-l);
  counter-reset: step;
  display: grid;
  gap: var(--space-l);
}

.steps > li {
  position: relative;
  max-width: none;
  padding-left: var(--space-xl);
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand-purple);
  color: #fff;
  font-size: var(--text-s);
  font-weight: 700;
  line-height: 1;
}

.steps h3 {
  margin-bottom: var(--space-3xs);
}

/* --- Callout ------------------------------------------------------------ */

.callout {
  padding: var(--space-l);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--brand-orange);
  border-radius: var(--radius);
}

.callout > h2 {
  font-size: var(--text-l);
}

.note {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: var(--text-s);
  max-width: var(--measure);
}

.note .badge {
  margin-right: var(--space-3xs);
}

/* --- Prose -------------------------------------------------------------- *
   Wrapper for imported WordPress content. The markup inside is whatever the
   importer produced — headings, lists, tables, code — so it is styled by
   element rather than by class. */

.prose {
  margin-top: var(--space-l);
}

.prose > * + * {
  margin-top: var(--space-s);
}

.prose h2 {
  margin-top: var(--space-xl);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
}

.prose h3 {
  margin-top: var(--space-l);
  font-size: var(--text-m);
}

.prose h4 {
  margin-top: var(--space-m);
}

.prose ul,
.prose ol {
  padding-left: var(--space-m);
}

.prose li + li {
  margin-top: var(--space-3xs);
}

.prose hr {
  margin-block: var(--space-l);
  border: 0;
  border-top: 1px solid var(--color-border);
}

.prose code {
  padding: 0.1em 0.35em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  word-break: break-word;
}

.prose pre {
  overflow-x: auto;
  padding: var(--space-s);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.prose pre code {
  padding: 0;
  background: none;
  border: 0;
  white-space: pre;
  word-break: normal;
}

/* Tables can be wider than the measure, so they scroll inside their own box
   rather than pushing the page sideways. */
.prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
}

.prose th,
.prose td {
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.prose thead th {
  background: var(--color-bg-alt);
  color: var(--color-heading);
  white-space: nowrap;
}

.prose tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-bg-alt) 55%, transparent);
}

/* --- Docs --------------------------------------------------------------- */

.breadcrumb {
  margin-bottom: var(--space-s);
  font-size: var(--text-s);
}

.breadcrumb a {
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb a::before {
  content: "\2190  ";
}

.doc-group + .doc-group {
  margin-top: var(--space-xl);
}

.doc-index {
  list-style: none;
  padding: 0;
  margin-top: var(--space-m);
  counter-reset: docitem;
  display: grid;
  gap: var(--space-2xs);
}

.doc-index li {
  max-width: none;
  counter-increment: docitem;
}

.doc-index a {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
}

.doc-index a:hover,
.doc-index a:focus-visible {
  border-color: var(--color-accent);
}

.doc-index__title {
  font-weight: 650;
  color: var(--color-heading);
}

.doc-index__desc {
  font-size: var(--text-s);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.doc-pager {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.doc-pager__link {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 650;
  color: var(--color-heading);
}

.doc-pager__link span {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.doc-pager__link:hover,
.doc-pager__link:focus-visible {
  border-color: var(--color-accent);
}

.doc-pager__link--next {
  text-align: right;
  grid-column: -2;
}

.badge--pro {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.badge--price {
  background: var(--color-soon-bg);
  color: var(--color-soon-text);
}

.page__header .badge {
  margin-bottom: var(--space-2xs);
}

.plugin-card--paid {
  border-top-color: var(--brand-purple);
}

.note--purchase {
  margin-top: var(--space-l);
  padding: var(--space-s);
  padding-top: var(--space-s);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text);
}

/* --- Coming-soon notice ------------------------------------------------- */

/* Sits at the top of a page documenting a feature that has not shipped. Loud
   on purpose — someone landing here from the plugin needs to know before they
   read a page of behaviour that does not exist yet. */
.notice--coming-soon {
  margin-bottom: var(--space-l);
  padding: var(--space-m);
  background: var(--color-soon-bg);
  color: var(--color-soon-text);
  border: 1px solid currentColor;
  border-left: 4px solid var(--brand-orange);
  border-radius: var(--radius);
  max-width: none;
}

.notice--coming-soon strong {
  color: inherit;
}

/* Badge sitting next to a feature name inside imported prose. */
.prose .badge {
  vertical-align: middle;
}

/* --- Buy buttons -------------------------------------------------------- */

.buy-form {
  margin-top: var(--space-l);
  max-width: none;
}

.buy-form--inline {
  display: inline;
  margin-top: 0;
}

/* The primary action on a paid page, so it carries the accent rather than the
   brand purple the secondary buttons use. */
.button--buy {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
  font-size: var(--text-base);
}

.button--buy:hover,
.button--buy:focus-visible {
  background: var(--brand-orange-deep);
  border-color: var(--brand-orange-deep);
  color: #fff;
}

.button--buy[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.buy-form__status:empty {
  display: none;
}

.buy-form__status {
  display: block;
  margin-top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  font-size: var(--text-s);
  max-width: 34rem;
}

.buy-form__status--error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid currentColor;
}

/* --- Form --------------------------------------------------------------- */

.form {
  margin-top: var(--space-l);
  max-width: 34rem;
  display: grid;
  gap: var(--space-m);
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field label {
  font-weight: 650;
  font-size: var(--text-s);
}

.field__optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.field input,
.field textarea {
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  min-height: 44px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-s);
}

.field textarea {
  min-height: auto;
  resize: vertical;
  line-height: var(--leading-normal);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 1px;
  border-color: var(--brand-orange);
}

.field__hint {
  font-size: var(--text-s);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.form .button {
  justify-self: start;
}

.form .button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Honeypot. Off-canvas rather than display:none — some bots skip fields that
   are explicitly hidden, but fill anything they can find in the DOM. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status line under the form. Empty until the script writes to it, so it
   must not reserve space or announce itself when blank. */
.form__status:empty {
  display: none;
}

.form__status {
  margin-top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  font-size: var(--text-s);
  max-width: 34rem;
}

.form__status--pending {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.form__status--error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid currentColor;
}

/* Replaces the form once the message is away. */
.form-success {
  margin-top: var(--space-l);
  padding: var(--space-l);
  max-width: 34rem;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid currentColor;
  border-radius: var(--radius);
}

.form-success:focus {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

.form-success h2 {
  color: inherit;
  font-size: var(--text-l);
}

.form-success p {
  margin-top: var(--space-2xs);
  color: inherit;
}

/* Turnstile in interaction-only mode renders nothing until a challenge is
   needed; this keeps the gap sane when it does appear. */
.cf-turnstile:not(:empty) {
  margin-block: var(--space-2xs);
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  margin-top: auto;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-block: var(--space-xl) var(--space-l);
}

.site-footer h2 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3xs);
}

.site-footer a {
  font-size: var(--text-s);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
}

.site-footer__about p {
  font-size: var(--text-s);
  color: var(--color-text-muted);
  max-width: 30ch;
}

.site-footer__name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-heading);
  margin-bottom: var(--space-3xs);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  padding-block: var(--space-s);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.site-footer__legal ul {
  display: flex;
  gap: var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__legal p {
  margin: 0;
  max-width: none;
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 34rem) {
  :root {
    --text-3xl: 2rem;
    --text-2xl: 1.75rem;
    --text-xl: 1.5rem;
  }

  /* Logo sizing at this width is handled by the 52rem block above, which sizes
     it by width so it can shrink rather than wrap the toggle. Setting a height
     here would override that and bring the wrapping back. */

  .plugin-card {
    padding: var(--space-m);
  }

  .button-row .button {
    flex: 1 1 100%;
  }
}