/* ==========================================================================
   Gladding Digital global classes for Core
   GeneratePress child theme, gladdingdigital.com

   Every class here is also registered by name in GenerateBlocks (wp gd-theme
   sync-classes) so the editor can pick it. This file is the only place the
   rules live. Values come from tokens.css, never from raw numbers in patterns.

   Contents
     1. Section rhythm and wrappers
     2. Surface helpers (Paper, Cloud, dark)
     3. Type: display, headline, mono labels
     4. Buttons
     5. Cards
     6. Chips, placeholder, status
     7. Stat tile, numbered step, service row
     8. Dot grid, arc band, avatar, tick list, FAQ
     9. Focus and motion
   ========================================================================== */

/* 0. Links ----------------------------------------------------------------- */
/* GeneratePress paints links in the accent by default. Orange on a light
   surface is 3.1:1, so text links use brand-2 and darken on hover. */
a { color: var(--link); }
a:is(:hover, :focus-visible) { color: var(--link-hover); }

/* 1. Section rhythm and wrappers ------------------------------------------ */
.section-xs, .section-sm, .section-md, .section-lg, .section-xl {
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.section-xs { padding-block: var(--section-xs); }
.section-sm { padding-block: var(--section-sm); }
.section-md { padding-block: var(--section-md); }
.section-lg { padding-block: var(--section-lg); }
.section-xl { padding-block: var(--section-xl); }

.wrapper-xs, .wrapper-sm, .wrapper-md, .wrapper-lg, .wrapper-xl, .wrapper-full {
  width: 100%;
  margin-inline: auto;
}
.wrapper-xs { max-width: var(--wrapper-xs); }
.wrapper-sm { max-width: var(--wrapper-sm); }
.wrapper-md { max-width: var(--wrapper-md); }
.wrapper-lg { max-width: var(--wrapper-lg); }
.wrapper-xl { max-width: var(--wrapper-xl); }
.wrapper-full { max-width: none; }

/* 2. Surface helpers -------------------------------------------------------
   The brief stacks sections Paper, Cloud, Paper, Pine. Put one of these on the
   section so text colours follow without per-block settings. */
.bg-paper { background-color: var(--surface-page); color: var(--text-primary); }
.bg-cloud { background-color: var(--surface-alt); color: var(--text-primary); }
.bg-dark  { background-color: var(--surface-dark); color: var(--text-on-dark); }
.bg-dark :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.bg-dark a:not([class]) { color: inherit; }
.bg-dark .card-text,
.bg-dark .stat__note,
.bg-dark .step__text,
.bg-dark .lede,
.bg-dark .text-muted { color: var(--text-on-dark-muted); }

.text-muted { color: var(--text-secondary); }
.text-mono { font-family: var(--font-mono); }

/* 3. Type ------------------------------------------------------------------ */
.display {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--spacing-md);
}
.headline {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-md);
}
.lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
}

/* The label maker: mono, uppercase, tracked. tagline is the same rule so
   older content keeps working. stat__label and step__number share it. */
.tagline, .label-mono, .stat__label, .step__number {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--brand-2);
}
.tagline, .label-mono { margin: 0 0 var(--spacing-xs); }
.tagline--dark, .label-mono--dark,
.bg-dark .tagline, .bg-dark .label-mono, .bg-dark .stat__label { color: var(--text-on-dark-muted); }

/* Numbers 24px and up may carry orange (3:1 rule). Nothing smaller does. */
.number-accent {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.price {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
}
.price__period {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-left: 0.5em;
}

/* 4. Buttons ---------------------------------------------------------------
   Shared shape, then four fills. Primary is orange with dark text (4.5:1).
   Hover lightens rather than darkens so the dark text keeps its contrast. */
.btn-primary, .btn-secondary, .btn-paper, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-height: var(--btn-height);
  padding: var(--btn-padding);
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal),
              border-color var(--transition-normal), box-shadow var(--transition-normal),
              transform var(--transition-fast);
}
.btn-primary svg, .btn-secondary svg, .btn-paper svg, .btn-ghost svg { width: 1.125em; height: 1.125em; flex: none; }

.btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.btn-primary:is(:hover, :focus-visible) {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.btn-primary:active { background-color: var(--accent-active); transform: none; }

.btn-secondary { background-color: transparent; border-color: var(--brand-1); color: var(--brand-1); }
.btn-secondary:is(:hover, :focus-visible) { background-color: var(--surface-alt); color: var(--brand-1); }

/* For dark sections */
.btn-paper { background-color: var(--surface-card); border-color: var(--surface-card); color: var(--brand-1); }
.btn-paper:is(:hover, :focus-visible) { background-color: var(--base-2); border-color: var(--base-2); color: var(--brand-1); box-shadow: var(--shadow-sm); }
.btn-ghost { background-color: transparent; border-color: color-mix(in srgb, var(--base-2) 55%, transparent); color: var(--text-on-dark); }
.btn-ghost:is(:hover, :focus-visible) { border-color: var(--base-2); background-color: color-mix(in srgb, var(--base-2) 8%, transparent); color: var(--text-on-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }

/* 5. Cards ----------------------------------------------------------------- */
.card {
  background-color: var(--surface-card);
  color: var(--text-primary);
  padding: var(--card-padding);
  border-radius: var(--radius-card);
}
.card--bordered { border: 1px solid var(--line); }
.card--accent { background-color: var(--accent-tint-90); border: 1px solid var(--accent-alpha-30); }
.card--dark { background-color: var(--bg-card-on-dark); border: 1px solid var(--line-on-dark); color: var(--text-on-dark); }
.card--dark :is(h1, h2, h3, h4) { color: inherit; }
.card--dark .card-text { color: var(--text-on-dark-muted); }
.card--lift { box-shadow: var(--shadow-card); }
.card--compact { padding: var(--card-padding-sm); }
.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--spacing-xs);
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:is(:hover, :focus-visible) { color: var(--brand-2); text-decoration: underline; }
.card-text { color: var(--text-secondary); margin: 0; }
.card-text + .card-text { margin-top: var(--spacing-xs); }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--spacing-sm);
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}
.card-link:is(:hover, :focus-visible) { color: var(--link-hover); text-decoration: underline; }

/* 6. Chips, placeholder, status -------------------------------------------- */
.chip, .chip--light {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-chip);
  text-transform: uppercase;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--brand-1);
  border-radius: var(--radius-sm);
  background-color: var(--brand-1);
  color: var(--base-2);
  white-space: nowrap;
  text-decoration: none;
}
.chip--light { background-color: var(--surface-alt); border-color: var(--line); color: var(--brand-1); }
.bg-dark .chip--light { background-color: var(--bg-card-on-dark); border-color: var(--line-on-dark); color: var(--text-on-dark); }

@media (max-width: 767px) {
  p.chip--light, p.chip { white-space: normal; }
}

/* A fact still to confirm. Staging only, strip before launch. */
.placeholder {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  background-color: var(--placeholder-bg);
  border: 1px dashed var(--accent);
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--radius-sm);
}
.bg-dark .placeholder { color: var(--text-primary); }

/* Client area status chips with a dot */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-sm);
  background-color: var(--surface-alt);
  color: var(--text-secondary);
  white-space: nowrap;
}
.status::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background-color: currentColor; flex: none; }
.status--good { background-color: var(--status-good-bg); color: var(--status-good-fg); }
.status--wait { background-color: var(--status-wait-bg); color: var(--status-wait-fg); }
.status--open { background-color: var(--brand-1); color: var(--base-2); }
.status--open::before { background-color: var(--accent); }
.status--neutral { background-color: var(--surface-alt); color: var(--text-secondary); }

/* 7. Stat tile, numbered step, service row --------------------------------- */
.stat {
  background-color: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--card-padding-sm);
}
.stat__label { display: block; margin: 0 0 var(--spacing-xs); }
.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
}
.stat__number--accent { color: var(--accent); }
.stat__note { font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); margin: 0; }
.bg-dark .stat { background-color: var(--bg-card-on-dark); border-color: var(--line-on-dark); }
.bg-dark .stat__number { color: var(--text-on-dark); }

.step { border-left: 2px solid var(--line); padding-left: var(--spacing-md); }
.step__number { display: block; color: var(--accent-shade-20); margin: 0 0 var(--spacing-xs); }
.step__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--spacing-xs);
}
.step__text { color: var(--text-secondary); margin: 0; }
.bg-dark .step { border-color: var(--line-on-dark); }
.bg-dark .step__number { color: var(--accent); }

/* Service catalogue row: name, description, how it is bought, price, arrow.
   The whole row is one link. */
.srow {
  display: grid;
  grid-template-columns: minmax(0, 18.125rem) minmax(0, 1fr) auto minmax(0, 12.5rem) 1.5rem;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-sm);
  border-top: 1px solid var(--line);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.srow:last-of-type { border-bottom: 1px solid var(--line); }
.srow:is(:hover, :focus-visible) { background-color: var(--surface-alt); }
.srow__name { font-weight: 600; color: var(--text-primary); }
.srow__desc { font-size: var(--text-sm); color: var(--text-secondary); }
.srow__how { justify-self: start; }
.srow__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
}
.srow__arrow { color: var(--brand-2); text-align: right; }
.srow__arrow svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 767px) {
  .srow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name arrow" "desc desc" "how price";
    gap: var(--spacing-xs) var(--spacing-sm);
    padding-inline: var(--spacing-xs);
  }
  .srow__name { grid-area: name; }
  .srow__desc { grid-area: desc; }
  .srow__how { grid-area: how; }
  .srow__price { grid-area: price; }
  .srow__arrow { grid-area: arrow; }
}

/* 8. Dot grid, arc band, avatar, tick list, FAQ ---------------------------- */
.dots {
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
}
.bg-dark.dots, .bg-dark .dots { --dot-color: var(--line-on-dark); }

/* The arc pattern band. The SVG is a pattern in patterns/arcs.html; the CSS
   colours it. Every seventh arc carries the accent. */
.arcs { display: block; line-height: 0; overflow: hidden; color: var(--brand-1); }
.arcs svg { display: block; width: 100%; height: auto; }
.arcs .arc { fill: currentColor; opacity: 0.3; }
.arcs .arc--accent { fill: var(--accent); opacity: 1; }
.arcs--dark { color: var(--base-2); }
.arcs--dark .arc { opacity: 0.22; }

.avatar {
  --avatar-size: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: none;
  border-radius: var(--radius-full);
  background-color: var(--brand-1);
  color: var(--base-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.avatar--sm { --avatar-size: 1.5rem; font-size: 0.5625rem; }
.avatar--lg { --avatar-size: 2.25rem; }
.avatar--accent { background-color: var(--accent); color: var(--text-on-accent); }

.list-ticks { list-style: none; margin: 0; padding: 0; }
.list-ticks li { position: relative; padding-left: 1.75rem; margin: 0 0 var(--spacing-xs); }
.list-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.05rem;
  height: 1.05rem;
  background-color: var(--brand-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bg-dark .list-ticks li::before, .list-ticks--accent li::before { background-color: var(--accent); }
.list-ticks--dash li::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: var(--text-disabled);
}

/* Native details/summary FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--brand-2);
  border-bottom: 2px solid var(--brand-2);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  margin-right: 0.25rem;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > :not(summary) { padding-bottom: var(--spacing-sm); color: var(--text-secondary); }
.faq details > p { margin: 0 0 var(--spacing-xs); max-width: 70ch; }

/* 9. Focus and motion ------------------------------------------------------ */
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-paper:focus-visible, .btn-ghost:focus-visible,
.srow:focus-visible, .card-link:focus-visible, .chip:focus-visible, .faq summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary:is(:hover, :focus-visible) { transform: none; }
}

/* 10. Page pieces added in step 3 ----------------------------------------- */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--radius-md);
  background-color: var(--accent-tint-90);
  color: var(--accent-shade-20);
}
.icon-box svg { width: 1.375rem; height: 1.375rem; }
.icon-box--sm { width: 2rem; height: 2rem; }
.icon-box--sm svg { width: 1.125rem; height: 1.125rem; }
.bg-dark .icon-box, .card--dark .icon-box { background-color: var(--bg-card-on-dark); color: var(--accent); }
.card .icon-box { margin-bottom: var(--spacing-sm); }

/* Section header with an action on the right */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); }
.section-head > * { margin-bottom: 0; }
.section-head .headline, .section-head .lede { margin-bottom: 0; }
.section-head__copy { max-width: 60ch; }

/* Hero status card (home) */
.status-card {
  background-color: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding-sm);
}
.status-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.status-card__rows { display: grid; gap: var(--spacing-sm); }
.status-card__row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--spacing-xs); align-items: start; }
.status-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background-color: var(--status-good-bg); color: var(--status-good-fg); margin-top: 0.1rem; }
.status-card__icon svg { width: 0.875rem; height: 0.875rem; }
.status-card__title { display: block; font-weight: 600; font-size: var(--text-sm); line-height: 1.35; color: var(--text-primary); }
.status-card__text { font-size: var(--text-sm); line-height: 1.45; color: var(--text-secondary); margin: 0; }
.status-card__note { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--spacing-md) 0 0; padding-top: var(--spacing-sm); border-top: 1px solid var(--line); }

/* Trust strip wordmarks */
.wordmarks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm) var(--spacing-lg); margin: 0; padding: 0; list-style: none; }
.wordmarks li { margin: 0; font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }

/* Link list with arrows (back room columns) */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { margin: 0; }
.link-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}
.link-list a::after { content: "→"; color: var(--brand-2); flex: none; }
.link-list a:is(:hover, :focus-visible) { color: var(--brand-2); }
.link-list__head { display: flex; align-items: center; gap: var(--spacing-xs); margin: 0 0 var(--spacing-sm); font-size: var(--text-lg); font-weight: 600; }
.link-list__head a { color: var(--text-primary); text-decoration: none; }
.link-list__head a:is(:hover, :focus-visible) { color: var(--brand-2); text-decoration: underline; }

/* Price tile: a name and a price, the whole tile a link (fix strip, WordPress services) */
.price-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.price-tile:is(:hover, :focus-visible) { border-color: var(--brand-2); box-shadow: var(--shadow-sm); }
.price-tile__price { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); white-space: nowrap; }

/* Pill jump links */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background-color: var(--surface-card);
  color: var(--brand-1);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.pill:is(:hover, :focus-visible) { border-color: var(--brand-1); }
.pill--active { background-color: var(--brand-1); border-color: var(--brand-1); color: var(--base-2); }

/* Review card */
.review { background-color: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--card-padding-sm); }
.review__stars { display: flex; gap: 0.2rem; color: var(--accent); margin-bottom: var(--spacing-sm); }
.review__stars svg { width: 1rem; height: 1rem; }
.review__quote { font-size: var(--text-lg); font-weight: 500; line-height: 1.5; margin: 0 0 var(--spacing-sm); }
.review__who { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 0; }

/* Plan cards */
.plan-card { background-color: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.plan-card--featured { background-color: var(--surface-dark); border-color: var(--surface-dark); color: var(--text-on-dark); box-shadow: var(--shadow-card); }
.plan-card--featured .chip--light { background-color: var(--bg-card-on-dark); border-color: var(--line-on-dark); color: var(--text-on-dark); }
.plan-card__price { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: var(--tracking-tight); color: var(--accent); margin: 0; }
.plan-card__price .placeholder { font-size: 0.6em; vertical-align: middle; }
.plan-card__price small { font-size: 0.45em; font-weight: 600; color: var(--text-primary); }
.plan-card--featured .plan-card__price small { color: var(--text-on-dark); }
.plan-card__sub { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin: 0; }
.plan-card--featured .plan-card__sub { color: var(--text-on-dark-muted); }
.plan-card__text { margin: 0; color: var(--text-secondary); }
.plan-card--featured .plan-card__text { color: var(--text-on-dark-muted); }
.plan-card .list-ticks { margin-block: var(--spacing-xs) auto; font-size: var(--text-sm); }
.plan-card--featured .list-ticks li::before { background-color: var(--accent); }
.plan-card .btn-primary, .plan-card .btn-secondary, .plan-card .btn-paper { align-self: stretch; margin-top: var(--spacing-sm); }

/* Tables: comparison and stack */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: 0.75rem var(--spacing-sm); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); border-bottom-color: var(--line-strong); }
.table th:not(:first-child), .table td:not(:first-child) { text-align: center; }
.table--left td, .table--left th { text-align: left; }
.table .tick, .table .dash { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); }
.table .tick { background-color: var(--status-good-bg); color: var(--status-good-fg); }
.table .tick svg { width: 0.875rem; height: 0.875rem; }
.table .dash { color: var(--text-disabled); }
.table .mono { font-family: var(--font-mono); font-size: var(--text-mono-sm); }
.table__total td { background-color: var(--surface-dark); color: var(--text-on-dark); font-weight: 600; border-bottom: 0; }
.table__total td:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.table__total td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.table__plan { display: block; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-primary); }

/* Two-column compare (Core: fleet vs bespoke) */
.compare-card { background-color: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--card-padding); }
.compare-card--old { background-color: var(--surface-alt); }
.compare-card .card-title { margin-bottom: var(--spacing-sm); }

/* 11. Reading column for articles and long text ------------------------------ */
.gd-prose { font-size: var(--text-lg); line-height: 1.7; color: var(--text-primary); }
.gd-prose > * + * { margin-top: var(--spacing-md); }
.gd-prose :is(h2, h3, h4) { font-family: var(--font-heading); line-height: 1.25; margin-top: var(--spacing-xl); }
.gd-prose h2 { font-size: var(--text-h2); } .gd-prose h3 { font-size: var(--text-h3); }
.gd-prose img { max-width: 100%; height: auto; border-radius: var(--radius-card); }
.gd-prose a { color: var(--link); }
.gd-prose blockquote { border-left: 4px solid var(--accent); padding-left: var(--spacing-md); color: var(--text-secondary); margin-inline: 0; }
.gd-prose :is(ul, ol) { padding-left: 1.25rem; }
.gd-search .wp-block-search__inside-wrapper { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; border: 0; padding: 0; }
.gd-search .wp-block-search__input { min-width: 16rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); font: inherit; background: var(--surface-card); }
.gd-search .wp-block-search__button { background-color: var(--accent); color: var(--text-on-accent); border: 1.5px solid var(--accent); border-radius: var(--radius-btn); min-height: var(--btn-height); padding: var(--btn-padding); font: 600 var(--text-base) var(--font-body); cursor: pointer; }
.pagination .page-numbers { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.4rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); color: var(--brand-1); font-weight: 600; text-decoration: none; }
.pagination .page-numbers.current { background-color: var(--brand-1); border-color: var(--brand-1); color: var(--base-2); }
.pagination .page-numbers.dots { border: 0; }

/* 12. Third-party widgets brought onto the palette --------------------------- */
.wpsr-review-date, .wpsr-review-template .wpsr-review-date { color: var(--text-secondary) !important; }
.wpsr_read_more, .wpsr-review-template .wpsr_read_more { color: var(--link) !important; }

/* 13. Empty media and template odds and ends -------------------------------- */
/* A post without a featured image renders an empty img: hide it and the box around it. */
img[src=""] { display: none; }
a:has(> img[src=""]), figure:has(> img[src=""]), div:has(> img[src=""]):not(.card):not(.gd-prose) { display: none; }
/* GeneratePress prints its own 404 text below the theme's; the theme's wins. */
.error404 .site-main .no-results { display: none; }
/* Case study pieces rendered by the case study plugin's shortcodes */
.gd-case-meta { display: grid; gap: var(--spacing-xs); margin: 0; }
.gd-case-meta > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--spacing-xs); font-size: var(--text-sm); border-top: 1px solid var(--line); padding-top: var(--spacing-xs); }
.gd-case-meta dt { font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.gd-case-meta dd { margin: 0; }
.quote:not(:has(blockquote)) { display: none; }
.quote blockquote { margin: 0; }
.quote footer { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-top: var(--spacing-xs); }
.gd-case-next-project { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs) var(--spacing-sm); padding: var(--spacing-md); border: 1px solid var(--line); border-radius: var(--radius-card); background-color: var(--surface-card); color: var(--text-primary); text-decoration: none; }
.gd-case-next-project__label { font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-2); }
.gd-case-next-project__title { font-weight: 600; }
.gd-case-next-project__arrow { margin-left: auto; color: var(--brand-2); }
.gd-case-missing { color: var(--text-secondary); font-size: var(--text-sm); }

/* 14. Embedded tools on the palette ---------------------------------------- */
/* Gravity Forms, Orbital theme: everything it exposes as a custom property */
.gform_wrapper.gform-theme--orbital, .gform_wrapper.gravity-theme {
  --gf-color-primary: var(--brand-1);
  --gf-color-primary-contrast: var(--base-2);
  --gf-color-primary-darker: var(--brand-1-shade-20);
  --gf-color-primary-lighter: var(--brand-2);
  --gf-color-secondary: var(--surface-card);
  --gf-color-secondary-contrast: var(--text-primary);
  --gf-color-in-error: var(--color-error-dark);
  --gf-color-in-error-contrast: var(--base-2);
  --gf-ctrl-border-color: var(--line-strong);
  --gf-ctrl-border-color-focus: var(--brand-2);
  --gf-ctrl-radius: var(--radius-btn);
  --gf-ctrl-bg-color: var(--surface-card);
  --gf-ctrl-color: var(--text-primary);
  --gf-ctrl-shadow-focus: 0 0 0 3px var(--focus-ring);
  --gf-ctrl-btn-bg-color-primary: var(--accent);
  --gf-ctrl-btn-color-primary: var(--text-on-accent);
  --gf-ctrl-btn-border-color-primary: var(--accent);
  --gf-ctrl-btn-bg-color-hover-primary: var(--accent-hover);
  --gf-ctrl-btn-color-hover-primary: var(--text-on-accent);
  --gf-ctrl-btn-border-color-hover-primary: var(--accent-hover);
  --gf-ctrl-btn-radius: var(--radius-btn);
  --gf-ctrl-btn-font-weight: 600;
  --gf-ctrl-btn-padding-x: 1.375rem;
  --gf-ctrl-label-color-primary: var(--text-primary);
  --gf-ctrl-label-color-secondary: var(--text-secondary);
  --gf-ctrl-desc-color: var(--text-secondary);
  --gf-ctrl-choice-check-bg-color-checked: var(--brand-1);
  --gf-ctrl-choice-check-border-color-checked: var(--brand-1);
  --gf-font-family: inherit;
  font-family: var(--font-body);
}
.gform_wrapper .gform_button, .gform_wrapper .gform-button, .gform_wrapper .gform_next_button {
  background-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
  border: 1.5px solid var(--accent) !important;
  border-radius: var(--radius-btn) !important;
  min-height: var(--btn-height);
  padding: var(--btn-padding) !important;
  font: 600 var(--text-base) var(--font-body) !important;
  cursor: pointer;
}
.gform_wrapper .gform_button:is(:hover, :focus-visible) { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.gform_wrapper .gform_required_legend { font-size: var(--text-xs); color: var(--text-secondary); }
.gform_wrapper .gform_confirmation_message { background-color: var(--status-good-bg); color: var(--status-good-fg); padding: var(--spacing-md); border-radius: var(--radius-card); font-weight: 600; }

/* WP Social Reviews, Google reviews grid */
.wpsr-reviews-wrapper .wpsr-review-template {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
  padding: var(--spacing-md) !important;
  color: var(--text-primary);
}
.wpsr-reviews-wrapper .wpsr-reviewer-name, .wpsr-reviews-wrapper .wpsr-reviewer-name-url { font-family: var(--font-heading) !important; font-weight: 600 !important; color: var(--text-primary) !important; text-decoration: none; }
.wpsr-reviews-wrapper .wpsr-review-date { font-family: var(--font-mono) !important; font-size: var(--text-mono-sm) !important; letter-spacing: 0.06em; text-transform: uppercase; }
.wpsr-reviews-wrapper .wpsr-review-content { color: var(--text-primary) !important; font-size: var(--text-base); line-height: 1.6; }
.wpsr-reviews-wrapper .wpsr-star-filled, .wpsr-reviews-wrapper .wpsr-star-filled svg { color: var(--accent) !important; fill: var(--accent) !important; }
.wpsr-reviews-wrapper .wpsr-star-empty, .wpsr-reviews-wrapper .wpsr-star-empty svg { color: var(--line-strong) !important; fill: var(--line-strong) !important; }
.wpsr-reviews-wrapper .wpsr-reviewer-avatar img { border-radius: var(--radius-full); }
.wpsr-reviews-wrapper .wpsr-review-platform-icon svg { width: 1.125rem; height: 1.125rem; }

/* Fluent Support customer portal (Element Plus app) */
#fluent_support_client_app {
  --fs-bg-primary: var(--surface-card);
  --fs-bg-subtle: var(--surface-alt);
  --fs-btn-primary-bg: var(--accent);
  --fs-btn-primary-hover: var(--accent-hover);
  --fs-text-link: var(--brand-2);
  --fs-text-primary: var(--text-primary);
  --fs-text-secondary: var(--text-secondary);
  --fs-text-muted: var(--text-secondary);
  --fs-border-default: var(--line);
  --fs-table-header-bg: var(--surface-alt);
  --fs-table-hover-bg: var(--surface-alt);
  --fs-chart-primary: var(--brand-1);
  --fs-status-active-bg: var(--status-good-bg);
  --el-color-primary: var(--brand-1);
  --el-border-radius-base: var(--radius-btn);
  --el-font-family: var(--font-body);
  font-family: var(--font-body);
  color: var(--text-primary);
}
#fluent_support_client_app .el-button--primary, #fluent_support_client_app .fs_btn_primary, #fluent_support_client_app .fs_create_ticket_btn {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
  font-weight: 600;
  border-radius: var(--radius-btn);
}
#fluent_support_client_app :is(.el-button--primary, .fs_create_ticket_btn):is(:hover, :focus-visible) { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
#fluent_support_client_app .el-input__wrapper, #fluent_support_client_app .el-textarea__inner { border-radius: var(--radius-btn); box-shadow: 0 0 0 1px var(--line-strong) inset; }
#fluent_support_client_app a { color: var(--brand-2); }
#fluent_support_client_app h1, #fluent_support_client_app h2, #fluent_support_client_app h3 { font-family: var(--font-heading); color: var(--text-primary); }

/* SureCart buy buttons and price on product pages */
.sc-block-buttons .sc-button, .sc-block-buttons a, .sc-block-buttons button, .wp-block-surecart-product-buy-button .sc-button__wrapper {
  background-color: var(--accent) !important; color: var(--text-on-accent) !important; border: 1.5px solid var(--accent) !important; border-radius: var(--radius-btn) !important; font-weight: 600 !important; min-height: var(--btn-height); padding: var(--btn-padding) !important;
}
.wp-block-surecart-product-selected-price-amount { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--accent); line-height: 1; }

/* Live stat lines render nothing until there is data */
.status-card__text:empty, .trust-strip__rating:empty { display: none; }

/* Core status page */
.gd-status { display: grid; gap: var(--spacing-md); }
.gd-status__banner { display: grid; gap: var(--spacing-xs); justify-items: start; }
.gd-status__banner .card-text, .gd-status__banner .label-mono { margin: 0; }
.gd-status__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-md); }
.gd-status__list { list-style: none; margin: var(--spacing-xs) 0 0; padding: 0; }
.gd-status__list li { display: flex; gap: var(--spacing-sm); align-items: baseline; padding: 0.55rem 0; flex-wrap: wrap; }
.gd-status__list li + li { border-top: 1px solid var(--line); }
.gd-status__date { font-family: var(--font-mono); font-size: var(--text-mono-sm); color: var(--text-secondary); min-width: 7rem; }
@media (max-width: 720px) { .gd-status__stats { grid-template-columns: minmax(0, 1fr); } }