/* ───────────────────────────────────────────────────────────────────────────
   Domma CMS Manager - Custom CSS
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Marketing hero typography ───────────────────────────────────────────────
   Larger, more impactful hero headlines on dreamy-light marketing pages.
   ─────────────────────────────────────────────────────────────────────────── */

.hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero-gradient-dreamy-light h1 {
  color: #1e293b;
}

.hero-gradient-dreamy-light p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(30, 41, 59, 0.8);
  max-width: 48ch;
  /* The measure caps the line length, but without auto margins the 48ch box
     sits pinned to the left of its parent and `text-align: center` only
     centres the text INSIDE that box. The heading has no cap, so it centred on
     the hero while the tagline centred on its own narrower box - a visible
     offset that vertical navigation made obvious, because the whole hero is
     then off-centre relative to the viewport. */
  margin-inline: auto;
}

/* ── Section heading weight ──────────────────────────────────────────────────
   Give marketing h2s more visual punch.
   ─────────────────────────────────────────────────────────────────────────── */

.page-body h2 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

.page-body h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ── Button contrast overrides for dreamy-light heroes ──────────────────────
   Hero buttons are styled via .hero .hero-cta a - NOT via .btn-* classes.
   Wrap hero CTAs in <div class="hero-cta"> in Markdown to get layout + colour.
   These rules override the default (white-on-dark) colours for the light theme.
   ─────────────────────────────────────────────────────────────────────────── */

/* Primary button (first CTA) - dark fill on light background */
.hero-gradient-dreamy-light .hero-cta a:first-child {
  background: #1e293b !important;
  color: #f5ede8 !important;
  border-color: #1e293b !important;
}
.hero-gradient-dreamy-light .hero-cta a:first-child:hover {
  background: #0f172a !important;
  color: #ffffff !important;
}

/* Secondary button (last CTA) - outlined dark on light background */
.hero-gradient-dreamy-light .hero-cta a:last-child {
  background: transparent !important;
  color: #1e293b !important;
  border: 1px solid rgba(30, 41, 59, 0.45) !important;
}
.hero-gradient-dreamy-light .hero-cta a:last-child:hover {
  background: rgba(30, 41, 59, 0.08) !important;
  border-color: rgba(30, 41, 59, 0.7) !important;
}

/* ── Card hover lift ─────────────────────────────────────────────────────────
   Subtle upward shift + shadow enhancement on hoverable cards.
   The `hover` shortcode attr produces data-hover="true" on the element.
   ─────────────────────────────────────────────────────────────────────────── */

.card[data-hover="true"] {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  will-change: transform;
}

.card[data-hover="true"]:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* ── Icon-top / card icon sizing ─────────────────────────────────────────────
   site.css sets card-icon to 2rem. Override to be more prominent.
   card-avatar-wrap is the centered wrapper above the title in icon-top cards.
   ─────────────────────────────────────────────────────────────────────────── */

.card-icon {
  font-size: 2.5rem !important;
  margin-bottom: 12px !important;
  opacity: 0.95;
}

.card-avatar-wrap {
  padding: 20px 16px 12px !important;
  gap: 0.5rem;
}

/* Legacy icon-wrap classes from custom layouts */
.mk-card-icon-wrap,
.card-icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.125rem;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ── Corner badge (Premium label) ────────────────────────────────────────────
   Gold pill badge shown top-right of corner-badge layout cards.
   ─────────────────────────────────────────────────────────────────────────── */

.mk-card-corner-badge,
.card-corner-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.45);
}

/* ── Premium subtitle badge pill ─────────────────────────────────────────────
   icon-top cards with class="card-premium" show subtitle="Premium Plugin".
   Style the subtitle as a gold pill badge rather than dim label text.
   ─────────────────────────────────────────────────────────────────────────── */

.card-premium .card-subtitle {
  display: inline-block !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 99px !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
  margin-bottom: 0.75rem !important;
}

/* ── Badge-band card ─────────────────────────────────────────────────────────
   Free/Premium band displayed above the icon in badge-band layout cards.
   ─────────────────────────────────────────────────────────────────────────── */

.mk-card-badge-band,
.card-badge-band {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  margin-bottom: 0.875rem;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ── Rating review stars ─────────────────────────────────────────────────────
   Gold star display for quote-testimonial and rating-review layout cards.
   ─────────────────────────────────────────────────────────────────────────── */

.mk-card-stars,
.card-stars {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}

.mk-card-reviewer,
.card-reviewer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.mk-card-reviewer-name,
.card-reviewer-name {
  font-weight: 700;
  font-size: 0.9375rem;
}

.mk-card-reviewer-role,
.card-reviewer-role {
  font-size: 0.8125rem;
  opacity: 0.65;
}

/* ── Info/docs banner prominence ─────────────────────────────────────────────
   Slightly stronger left border on info banners.
   ─────────────────────────────────────────────────────────────────────────── */

.mk-banner.type-info,
[class*="banner-info"],
.mk-banner[data-type="info"] {
  border-left: 4px solid #5c3d2e;
}

.mk-banner.type-success,
[class*="banner-success"],
.mk-banner[data-type="success"] {
  border-left: 4px solid #22c55e;
}

.mk-banner.type-warning,
[class*="banner-warning"],
.mk-banner[data-type="warning"] {
  border-left: 4px solid #f59e0b;
}

/* ── Stats / accent band ─────────────────────────────────────────────────────
   Retains styles from the old stats band for any pages that still use them.
   ─────────────────────────────────────────────────────────────────────────── */

.mk-stat-number {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #5c3d2e;
}

.mk-stat-label {
  font-size: 0.9375rem;
  font-weight: 600;
  opacity: 0.65;
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Multi-column footer ─────────────────────────────────────────────────────
   Rendered by site-tweaks plugin when footer.columns is set in site.json.
   ─────────────────────────────────────────────────────────────────────────── */

.mk-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 1.5rem;
}

.mk-footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 900px) {
  .mk-footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .mk-footer-columns {
    grid-template-columns: 1fr;
  }
}

.mk-footer-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0 0 0.75rem;
}

.mk-footer-col-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mk-footer-col-links a {
  font-size: 0.875rem;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 0.15s;
}

.mk-footer-col-links a:hover {
  opacity: 1;
}

.mk-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mk-footer-copyright {
  font-size: 0.8125rem;
  opacity: 0.5;
  margin: 0;
}

.mk-footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.mk-footer-social {
  display: flex;
  gap: 0.75rem;
}

.mk-footer-social-link {
  opacity: 0.5;
  transition: opacity 0.15s;
  font-size: 1.125rem;
}

.mk-footer-social-link:hover {
  opacity: 1;
}

.mk-motion-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  opacity: 0.5;
  cursor: pointer;
  user-select: none;
}

.mk-motion-label:hover {
  opacity: 0.75;
}

/* ── Screenshot window frame ─────────────────────────────────────────────────
   Rendered by [screenshot-window src="..." alt="..." /] block.
   ─────────────────────────────────────────────────────────────────────────── */

.dm-static-block {
  display: contents;
}

.mk-window {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.10);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.mk-window-bar {
  background: #e8e8e8;
  padding: 10px 16px;
  display: flex;
  gap: 7px;
  align-items: center;
}

.mk-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mk-dot-red    { background: #ff5f57; }
.mk-dot-amber  { background: #febc2e; }
.mk-dot-green  { background: #28c840; }

.mk-window-body img {
  width: 100%;
  display: block;
  max-height: 480px;
  object-fit: cover;
  object-position: top;
}

/* ── Screenshot caption badges ──────────────────────────────────────────────
   Used under [screenshot-window] blocks as [center][badge variant="secondary"]...[/badge][/center]
   ─────────────────────────────────────────────────────────────────────────── */

.dm-static-block + p {
  margin-top: 0.5rem;
}

/* ── Nav active page indicator ───────────────────────────────────────────────
   Applied by inject-body.html script - marks the current page's nav link.
   ─────────────────────────────────────────────────────────────────────────── */

/* The bold + underline marker on the current page's link is the CMS's own default
   (public/css/site.css), and it steps aside when a menu chooses its own "When selected"
   effect - an unguarded copy here drew the underline even with "When selected: None". */

/* ── Section divider ─────────────────────────────────────────────────────────
   <hr class="mk-divider"> between major page sections.
   ─────────────────────────────────────────────────────────────────────────── */

.mk-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  margin: 0;
}

/* ── Tabs section guttering ──────────────────────────────────────────────────
   Tabs rendered inside .page-body should respect the same side guttering as
   other content sections. Applied here as a global safety net.
   ─────────────────────────────────────────────────────────────────────────── */

.page-body .mk-tabs,
.page-body .tabs-wrapper,
.page-body > .tabs {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Section label pill ──────────────────────────────────────────────────────
   Subtle pill labels rendered by [section-label label="..." /].
   ─────────────────────────────────────────────────────────────────────────── */

.mk-section-label,
.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.875rem;
  border-radius: 99px;
  margin-bottom: 1.125rem;
  background: rgba(92, 61, 46, 0.1);
  color: #5c3d2e;
  border: 1px solid rgba(92, 61, 46, 0.2);
}

/* ── Button theme overrides ──────────────────────────────────────────────────
   .btn-primary and .btn-outline from elements.css use var(--dm-primary),
   which should theme correctly - but in some content contexts (notably
   inside collection-rendered blocks) the cascade resolves to the root-level
   blue default instead of the theme-specific warm brown. Force theme-aware
   colours explicitly here so buttons always track `--dm-primary` regardless
   of where they sit in the DOM.

   User rule: "change colour on hover, no underline". So all hovers are
   explicit `text-decoration: none` and the only visible change is colour. */

/* Primary button - filled, theme-primary background, inverse text */
.page-body .btn-primary,
.page-body a.btn-primary {
  background-color: var(--dm-primary, #8d6e63) !important;
  color: var(--dm-text-inverse, #ffffff) !important;
  border: 1px solid var(--dm-primary, #8d6e63) !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-body .btn-primary:hover,
.page-body a.btn-primary:hover {
  background-color: var(--dm-primary-hover, #6d4c41) !important;
  color: var(--dm-text-inverse, #ffffff) !important;
  border-color: var(--dm-primary-hover, #6d4c41) !important;
  text-decoration: none !important;
}

/* Outline button - transparent bg, theme-primary border and text */
.page-body .btn-outline,
.page-body a.btn-outline {
  background-color: transparent !important;
  color: var(--dm-primary, #8d6e63) !important;
  border: 1.5px solid var(--dm-primary, #8d6e63) !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-body .btn-outline:hover,
.page-body a.btn-outline:hover {
  background-color: var(--dm-primary, #8d6e63) !important;
  color: var(--dm-text-inverse, #ffffff) !important;
  border-color: var(--dm-primary, #8d6e63) !important;
  text-decoration: none !important;
}

/* Ghost button - transparent bg, theme-primary text only, no border */
.page-body .btn-ghost,
.page-body a.btn-ghost {
  background-color: transparent !important;
  color: var(--dm-primary, #8d6e63) !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.page-body .btn-ghost:hover,
.page-body a.btn-ghost:hover {
  background-color: var(--dm-primary-light, rgba(141, 110, 99, 0.1)) !important;
  color: var(--dm-primary-hover, #6d4c41) !important;
  text-decoration: none !important;
}

/* ── Step-numbered card ──────────────────────────────────────────────────────
   Large, prominent step number displayed above the title.
   ─────────────────────────────────────────────────────────────────────────── */

.mk-card-step-number,
.card-step-number {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 0.25;
  margin-bottom: 0.75rem;
}

.mk-card-step-title,
.card-step-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* ── Enterprise badge variant ────────────────────────────────────────────────
   Distinct dark slate for Enterprise vs gold for Premium.
   ─────────────────────────────────────────────────────────────────────────── */

.card[data-badge="Enterprise"] .mk-card-corner-badge,
.card[data-badge="Enterprise"] .card-corner-badge {
  background: linear-gradient(135deg, #1e293b, #334155);
  box-shadow: 0 2px 10px rgba(30, 41, 59, 0.5);
}

/* ── Badge-band icon prominence ──────────────────────────────────────────────
   site.css sets card-badge-band-icon to 1.4rem. Push it larger.
   ─────────────────────────────────────────────────────────────────────────── */

.card-badge-band-icon {
  font-size: 1.75rem !important;
}

.card-badge-band {
  padding: 14px 18px !important;
  gap: 0.5rem;
}

.card-badge-band-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Card title sizing ────────────────────────────────────────────────────────
   site.css only sets color on .card-title (no font-size/weight).
   Force a proper heading size for icon-top, badge-band, corner-badge cards.
   ─────────────────────────────────────────────────────────────────────────── */

.card-title {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  margin-bottom: 0.4rem !important;
}

.card-subtitle {
  font-size: 0.8125rem !important;
  opacity: 0.7 !important;
  margin-bottom: 0.5rem !important;
  font-weight: 500 !important;
}

/* ── Card body text ───────────────────────────────────────────────────────────
   Slightly looser body text inside cards for readability.
   ─────────────────────────────────────────────────────────────────────────── */

.mk-card-body p,
.card-body p,
.card > p {
  font-size: 0.9375rem;
  line-height: 1.65;
  opacity: 0.88;
}

/* ── Card theme gradients ────────────────────────────────────────────────────
   Theme-based gradient variants for [card variant="gradient" gradient="..."].
   Colours mirror the equivalent .hero-gradient-* classes defined in site.css.

   Upstream gradient names (4 not already in site.css): purple, blue, green, night
   Theme variants (26): {theme}-{light|dark} for ocean, forest, sunset, royal,
     lemon, silver, charcoal, christmas, unicorn, dreamy, grayve, mint, wedding

   Already defined in site.css (do not redefine): arctic, aurora, dusk, fire,
     forest, gold, indigo, lagoon, lime, midnight, ocean, rose, slate, sunset
   ─────────────────────────────────────────────────────────────────────────── */

/* !important required because site.css sets `.page-body .dm-card-gradient { background: #fff }`
   at specificity (0,3,0) which would otherwise beat `.card-gradient-X` at (0,1,0). */
.card-gradient-purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important; color: #1e1b4b !important; }
.card-gradient-blue   { background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; color: #1e3a5f !important; }
.card-gradient-green  { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; color: #064e3b !important; }
.card-gradient-night  { background: linear-gradient(135deg, #334155, #1e293b) !important; color: #e2e8f0 !important; }

.card-gradient-ocean-light    { background: linear-gradient(135deg, #e0f2fe, #caf0f8) !important; color: #1e293b !important; }
.card-gradient-ocean-dark     { background: linear-gradient(135deg, #0c4a6e, #164e63) !important; color: #e2e8f0 !important; }
.card-gradient-forest-light   { background: linear-gradient(135deg, #d1fae5, #c6f6dc) !important; color: #1e293b !important; }
.card-gradient-forest-dark    { background: linear-gradient(135deg, #1a4731, #166534) !important; color: #e2e8f0 !important; }
.card-gradient-sunset-light   { background: linear-gradient(135deg, #fde8d8, #fddcc9) !important; color: #1e293b !important; }
.card-gradient-sunset-dark    { background: linear-gradient(135deg, #6b3727, #7c4036) !important; color: #f5ede8 !important; }
.card-gradient-royal-light    { background: linear-gradient(135deg, #e8f0fd, #dce8fc) !important; color: #1e293b !important; }
.card-gradient-royal-dark     { background: linear-gradient(135deg, #1e3465, #263d7a) !important; color: #e2e8f0 !important; }
.card-gradient-lemon-light    { background: linear-gradient(135deg, #fefce8, #fef9c3) !important; color: #1e293b !important; }
.card-gradient-lemon-dark     { background: linear-gradient(135deg, #5c4d1a, #6b5920) !important; color: #fefce8 !important; }
.card-gradient-silver-light   { background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important; color: #1e293b !important; }
.card-gradient-silver-dark    { background: linear-gradient(135deg, #2d3748, #374151) !important; color: #e2e8f0 !important; }
.card-gradient-charcoal-light { background: linear-gradient(135deg, #eceff1, #e1e7eb) !important; color: #1e293b !important; }
.card-gradient-charcoal-dark  { background: linear-gradient(135deg, #2c3843, #374451) !important; color: #e2e8f0 !important; }
.card-gradient-christmas-light{ background: linear-gradient(135deg, #fde8ea, #fdd5d8) !important; color: #1e293b !important; }
.card-gradient-christmas-dark { background: linear-gradient(135deg, #5c0f1d, #7a1525) !important; color: #fde8ea !important; }
.card-gradient-unicorn-light  { background: linear-gradient(135deg, #f5e8fd, #edd6fb) !important; color: #1e293b !important; }
.card-gradient-unicorn-dark   { background: linear-gradient(135deg, #3d1a5a, #4a2068) !important; color: #f5e8fd !important; }
.card-gradient-dreamy-light   { background: linear-gradient(135deg, #f5ede8, #eeddd4) !important; color: #1e293b !important; }
.card-gradient-dreamy-dark    { background: linear-gradient(135deg, #3d2820, #503328) !important; color: #f5ede8 !important; }
.card-gradient-grayve-light   { background: linear-gradient(135deg, #e0f7f9, #cbf2f5) !important; color: #1e293b !important; }
.card-gradient-grayve-dark    { background: linear-gradient(135deg, #00363d, #00444d) !important; color: #e0f7f9 !important; }
.card-gradient-mint-light     { background: linear-gradient(135deg, #d8f5ea, #c5efdd) !important; color: #1e293b !important; }
.card-gradient-mint-dark      { background: linear-gradient(135deg, #134d33, #195f3f) !important; color: #d8f5ea !important; }
.card-gradient-wedding-light  { background: linear-gradient(135deg, #faf3e0, #f5e9c7) !important; color: #1e293b !important; }
.card-gradient-wedding-dark   { background: linear-gradient(135deg, #5c4418, #6f5320) !important; color: #faf3e0 !important; }

/* ── Built-in gradient header colours ────────────────────────────────────────
   site.css paints `.page-body .dm-card-gradient .card-header` with a
   gradient built from CSS vars `--dm-card-g-start` / `--dm-card-g-end`
   (default indigo→purple fallback). Built-in gradient classes like
   `.card-gradient-sunset` only set `background` on the card root (stripped
   to white by the .page-body body-fill rule), so the header falls through
   to the indigo→purple fallback.

   Supply the correct CSS vars per gradient here, so the header picks up
   the right colours without touching the body. Body stays white, header
   gets gradient - which is what marketing pages actually want. */
.card-gradient-slate  { --dm-card-g-start: #475569; --dm-card-g-end: #1e293b; }
.card-gradient-dusk   { --dm-card-g-start: #7c3aed; --dm-card-g-end: #db2777; }
.card-gradient-sunset { --dm-card-g-start: #f59e0b; --dm-card-g-end: #ec4899; }
.card-gradient-rose   { --dm-card-g-start: #fb7185; --dm-card-g-end: #e11d48; }
.card-gradient-gold   { --dm-card-g-start: #f59e0b; --dm-card-g-end: #b45309; }
.card-gradient-fire   { --dm-card-g-start: #ef4444; --dm-card-g-end: #fbbf24; }

/* ── Built-in gradient header text colour overrides ──────────────────────────
   site.css hardcodes `.card-header { color: #fff }` which fails contrast
   on light-gradient headers (amber/pink/yellow starts). Pair each light
   gradient with dark text. Hard rule: every background needs contextual
   text colour. */
.page-body .card.dm-card-gradient.card-gradient-sunset .card-header,
.page-body .card.dm-card-gradient.card-gradient-rose .card-header,
.page-body .card.dm-card-gradient.card-gradient-gold .card-header,
.page-body .card.dm-card-gradient.card-gradient-fire .card-header {
  color: #1e293b !important;
}
/* Slate and dusk are dark-enough throughout - white header text is fine,
   which is what site.css gives by default, no override needed. */

/* Header transparency - FULL-FILL gradients only ────────────────────────────
   Custom `.card-gradient-{*-light,*-dark,purple,blue,green,night}` classes
   in this file use !important on `background:` to fill the entire card body
   with gradient. For those, the header must be transparent so the root
   gradient shows through (otherwise the header would paint indigo→purple
   from the site.css default on top of a different-coloured body).

   Built-in `.card-gradient-{slate,dusk,sunset,rose,gold,fire,...}` classes
   from site.css do NOT fill the body (the .page-body body-fill rule strips
   them to white) and are explicitly HEADER-ONLY gradient cards. They must
   NOT be transparent - they need to paint the header with the correct
   gradient via --dm-card-g-start / --dm-card-g-end CSS vars defined above. */
.page-body .card.dm-card-gradient[class*="-light"] .card-header,
.page-body .card.dm-card-gradient[class*="-dark"] .card-header,
.page-body .card.dm-card-gradient.card-gradient-purple .card-header,
.page-body .card.dm-card-gradient.card-gradient-blue .card-header,
.page-body .card.dm-card-gradient.card-gradient-green .card-header,
.page-body .card.dm-card-gradient.card-gradient-night .card-header {
  background: transparent !important;
  color: inherit !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Title/subtitle colour override - needed on ALL card-gradient variants so
   .card-title / .card-subtitle inherit the gradient's root colour instead of
   the hardcoded near-white set earlier in this file. */
.card[class*="card-gradient-"] .card-title,
.card[class*="card-gradient-"] .card-subtitle {
  color: inherit !important;
}

/* ── Gradient card screenshot frames ─────────────────────────────────────────
   Screenshot windows inside gradient cards get a slightly darker bar to
   contrast with the card gradient rather than the default light grey.
   ─────────────────────────────────────────────────────────────────────────── */

.card[class*="gradient"] .mk-window-bar,
.card[data-gradient] .mk-window-bar {
  background: rgba(0, 0, 0, 0.25);
}

.card[class*="gradient"] .mk-dot-red    { background: rgba(255, 95, 87, 0.7); }
.card[class*="gradient"] .mk-dot-amber  { background: rgba(254, 188, 46, 0.7); }
.card[class*="gradient"] .mk-dot-green  { background: rgba(40, 200, 64, 0.7); }

/* ── Plugins page hero list ───────────────────────────────────────────────────
   The dark night card in the hero right column - tighten up listgroup spacing.
   ─────────────────────────────────────────────────────────────────────────── */

.hero .card .mk-listgroup-item,
.hero .card .list-group-item {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  font-size: 0.9rem;
}

/* ── Screenshot window inside card ───────────────────────────────────────────
   Prevent dm-static-block wrapper from collapsing inside card flex layouts.
   ─────────────────────────────────────────────────────────────────────────── */

.card .dm-static-block {
  display: block;
  width: 100%;
}

.card .mk-window {
  margin-bottom: 0;
}

/* ── Workflow feature mini-cards ─────────────────────────────────────────────
   Used by content/blocks/workflow-feature.html, rendered via
   [collection slug="workflow-features" display="block" block="workflow-feature"
    where="tab=<audience>" cols="2"] in the "Built for the way you work"
   section of the home page. */
.wf-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.wf-feature:hover {
  border-color: #475569;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.wf-feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #475569, #1e293b);
  color: #f1f5f9;
  border-radius: 8px;
  font-size: 1.1rem;
}
.wf-feature-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
  flex: 1 1 auto;
}

/* ── Plugin showcase cards ───────────────────────────────────────────────────
   Used by content/blocks/plugin-card.html, rendered via
   [collection slug="plugins" display="block" block="plugin-card" where="tier=..."]
   on the home page and /plugins page. */
.plugin-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  height: 100%;
  min-height: 340px;
}
.plugin-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  border-color: #475569;
}
.plugin-card-cover {
  position: relative;
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: center;
  background-color: #e2e8f0;
  flex-shrink: 0;
}
.plugin-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(15, 23, 42, 0.55) 100%);
}
.plugin-card-tier-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  color: #1e293b;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}
.plugin-card[data-tier="free"] .plugin-card-tier-badge::before { content: 'Free'; }
.plugin-card[data-tier="premium"] .plugin-card-tier-badge::before { content: 'Premium'; }
.plugin-card[data-tier="premium"] .plugin-card-tier-badge {
  color: #f1f5f9;
  background: linear-gradient(135deg, #475569, #1e293b);
}
.plugin-card-body {
  flex: 1 1 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  color: #1e293b;
}
.plugin-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.plugin-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #475569, #1e293b);
  color: #f1f5f9;
  border-radius: 10px;
  font-size: 1.3rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.plugin-card-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.plugin-card-desc {
  font-size: 0.88rem !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  flex: 1 1 auto;
}
.plugin-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  margin-top: 8px;
  transition: color 0.15s ease, gap 0.15s ease;
}
.plugin-card:hover .plugin-card-cta {
  color: #1e293b;
  gap: 8px;
}

/* ── Link colour - global, theme-aware ───────────────────────────────────────
   site.css has `.page-body a { color: var(--primary, #5b8cff) }` - note the
   broken variable name `--primary` (no `dm-` prefix). No theme ever sets that
   variable, so it falls through to the blue fallback on every page.

   Fix: override with `--dm-primary` (the real theme variable) so links track
   whichever theme the visitor is viewing. Every Domma theme (dreamy-light,
   ocean-dark, forest-light, etc.) sets `--dm-primary` and `--dm-primary-hover`
   to theme-appropriate tones - warm brown on dreamy-light, deep teal on ocean,
   and so on. Rule: NO plain blue links anywhere, ever.

   Excluded from this rule (they have their own link styling):
   - .btn / .btn-* (any button class)
   - .plugin-card (has its own hover colour)
   - .hero-cta a (handled earlier in this file)
   - .nav* a (chrome)
   - .footer* a (chrome) */
.page-body a:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]) {
  color: var(--dm-primary, var(--dm-text, #5d4037)) !important;
  text-decoration: underline;
  text-decoration-color: var(--dm-border, rgba(0, 0, 0, 0.2));
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.page-body a:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]):hover {
  color: var(--dm-primary-hover, var(--dm-text, #3e2723)) !important;
  text-decoration-color: var(--dm-primary, currentColor);
}
/* Links inside gradient card bodies (e.g. Core Capabilities "Learn more →")
   sit on a white body beneath a slate header. Force theme-primary explicitly
   so the body link tone matches the rest of the page. */
.page-body .dm-card-gradient .card-body a:not([class*="btn"]) {
  color: var(--dm-primary, var(--dm-text, #5d4037)) !important;
}
.page-body .dm-card-gradient .card-body a:not([class*="btn"]):hover {
  color: var(--dm-primary-hover, var(--dm-text, #3e2723)) !important;
}
/* Ultra-specific safety net - covers any anchor the base rule might miss
   due to cascade or specificity edge cases. Uses `html body` to push
   specificity high enough to beat anything reasonable. */
html body .page-body a[href]:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]):not(.dm-breadcrumbs-link) {
  color: var(--dm-primary, #8d6e63) !important;
}
html body .page-body a[href]:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]):not(.dm-breadcrumbs-link):hover {
  color: var(--dm-primary-hover, #6d4c41) !important;
}
/* Bottom-of-page .hero-cta that sits OUTSIDE a .hero wrapper - site.css
   only styles `.hero .hero-cta a` (requires hero ancestor), so page-level
   hero-cta divs lose their pill styling and fall through to default link
   colour. Restore pill styling and theme-aware colour. */
.page-body .hero-cta:not(.hero .hero-cta) a:not([class*="btn"]),
.page-body > * .hero-cta a:not([class*="btn"]) {
  color: var(--dm-primary, #8d6e63) !important;
  text-decoration: none !important;
  background: transparent;
  border: 1px solid var(--dm-border, rgba(141, 110, 99, 0.35));
  padding: 0.55rem 1.35rem;
  border-radius: 6px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-body .hero-cta:not(.hero .hero-cta) a:not([class*="btn"]):hover,
.page-body > * .hero-cta a:not([class*="btn"]):hover {
  color: var(--dm-primary-hover, #6d4c41) !important;
  background: var(--dm-primary-light, rgba(141, 110, 99, 0.08));
  border-color: var(--dm-primary, #8d6e63);
}

/* ── Features page section images ────────────────────────────────────────────
   Used on /features in each "split" section (2-col grid with image on one
   side, text on the other). Clean photo with rounded corners and soft shadow,
   capped height so tall photos don't dominate the grid. */
.feature-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.15);
  display: block;
}
/* Vertically centre the image within its grid column so when the prose column
   on the other side is taller, the image sits in the middle instead of at the
   top. Uses `:has()` - supported in all modern browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+). No markdown changes required. */
.page-body .grid > .col:has(> .feature-image),
.page-body .grid > .col:has(.reveal > .feature-image),
.page-body .grid > .col:has(.feature-image) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Code blocks inside cards ────────────────────────────────────────────────
   Workaround for the triple-backtick-inside-card bug (fixed properly in
   server/services/markdown.js but requires a server restart to take effect).
   Use <pre class="code-block"><code>...</code></pre> in markdown content - marked passes block-level raw HTML through unchanged, so this sidesteps
   the fence detection path that was colliding with scrubCodeRegions.

   Style is deliberately dark-terminal so the code sits nicely inside any
   card background (slate, dreamy, sunset, etc.) without clashing. */
.code-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(241, 245, 249, 0.75);
  background: rgba(15, 23, 42, 0.55);
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid rgba(241, 245, 249, 0.12);
}
.code-label + .code-block {
  margin-top: 0 !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* `.code-block` is used on a <div> (not <pre>) to sidestep the
   scrubCodeRegions pre-regex, which would otherwise replace the element
   with a placeholder token that collides with the card-body pipeline and
   produces literal "undefined" strings. CSS below gives a <div> the visual
   behaviour of a <pre> - monospace font, preserved whitespace, scrolling. */
.code-block {
  display: block;
  background: #0f172a !important;
  color: #e2e8f0 !important;
  padding: 18px 20px !important;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0 0 20px 0;
  box-shadow: inset 0 0 0 1px rgba(241, 245, 249, 0.08);
  white-space: pre;
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
}
.code-block code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit;
  white-space: pre;
  display: block;
}
/* Also style any fenced code block that marked DOES recognise (e.g. on a
   server that has the markdown.js fix live) so both paths look identical. */
.page-body .card-body > pre > code,
.page-body .card-body pre.code-block > code {
  color: #e2e8f0 !important;
}

/* ── Run option cards ────────────────────────────────────────────────────────
   Used by content/blocks/run-option-card.html, rendered via
   [collection slug="run-options" display="block" block="run-option-card"]
   on /get-started. Rich showcase card with banner image, icon chip,
   title/subtitle, flexible body HTML, and two CTAs. */
.run-option-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.run-option-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
  border-color: #475569;
}
.run-option-banner {
  position: relative;
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: #e2e8f0;
  flex-shrink: 0;
}
.run-option-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.7) 100%);
}
.run-option-icon-chip {
  position: absolute;
  bottom: -26px;
  left: 24px;
  z-index: 2;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #475569, #1e293b);
  color: #f1f5f9;
  border-radius: 14px;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3);
  border: 3px solid #fff;
}
.run-option-card-body {
  flex: 1 1 auto;
  padding: 40px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.run-option-title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}
.run-option-sub {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--dm-primary, #5d4037) !important;
  margin: 0 0 8px 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.run-option-content {
  flex: 1 1 auto;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
}
.run-option-content p { margin: 0 0 12px 0; }
.run-option-content .run-option-intro {
  font-size: 0.98rem;
  color: #1e293b;
  font-weight: 500;
  margin-bottom: 16px;
}
.run-option-content .run-option-body-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dm-primary, #5d4037);
  margin-bottom: 8px;
}
.run-option-content .run-option-req {
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 14px;
}
.run-option-content .code-block {
  margin: 8px 0 14px 0;
}
.run-option-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.run-option-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #1e293b;
}
.run-option-list li [data-icon] {
  color: var(--dm-primary, #5d4037);
  flex-shrink: 0;
}
.run-option-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
.run-option-ctas .btn {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  min-width: fit-content;
}
.run-option-ctas .btn[data-label=""] { display: none; }

/* ── Quickstart step cards ───────────────────────────────────────────────────
   Used by content/blocks/quickstart-step.html, rendered via
   [collection slug="quickstart-steps" display="block" block="quickstart-step"
    cols="4"] on /get-started. Large step number as background decoration,
   icon + title + description forming the readable content. */
.quickstart-step {
  position: relative;
  padding: 28px 22px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.quickstart-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  border-color: #475569;
}
.quickstart-step-number {
  position: absolute;
  top: 8px;
  right: 14px;
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(71, 85, 105, 0.08);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.quickstart-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #475569, #1e293b);
  color: #f1f5f9;
  border-radius: 10px;
  font-size: 1.3rem;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  position: relative;
  z-index: 1;
}
.quickstart-step-title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  position: relative;
  z-index: 1;
}
.quickstart-step-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: #475569;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ── Feature catalogue tiles (collection "features" via feature-card block) ── */
.mk-feat {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  height: 100%;
  padding: 20px 20px 22px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.mk-feat:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}
.mk-feat-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #475569, #1e293b);
  color: #f1f5f9;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  /* The element IS the rendered <svg>, so inset the glyph rather than sizing a
     child that does not exist. */
  padding: 9px;
  box-sizing: border-box;
}
.mk-feat-main { min-width: 0; }
.mk-feat-title {
  margin: 2px 0 6px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
}
.mk-feat-summary {
  margin: 0 !important;
  font-size: 0.855rem;
  line-height: 1.6;
  color: #475569;
}

/* Tier ribbon: only premium and in-development announce themselves. */
.mk-feat-tier { display: none; }
.mk-feat[data-tier="premium"] .mk-feat-tier,
.mk-feat[data-tier="dev"] .mk-feat-tier {
  display: inline-block;
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mk-feat[data-tier="premium"] .mk-feat-tier {
  background: #fef3c7;
  color: #92400e;
}
.mk-feat[data-tier="premium"] .mk-feat-tier::after { content: "Premium"; }
.mk-feat[data-tier="dev"] .mk-feat-tier {
  background: #e0e7ff;
  color: #3730a3;
}
.mk-feat[data-tier="dev"] .mk-feat-tier::after { content: "In development"; }
.mk-feat[data-tier="premium"] .mk-feat-title,
.mk-feat[data-tier="dev"] .mk-feat-title { padding-right: 84px; }

/* Area tints, so a mixed grid still reads as grouped. */
.mk-feat[data-area="content"]  .mk-feat-icon { background: linear-gradient(135deg, #6366f1, #4338ca); }
.mk-feat[data-area="design"]   .mk-feat-icon { background: linear-gradient(135deg, #ec4899, #be185d); }
.mk-feat[data-area="data"]     .mk-feat-icon { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.mk-feat[data-area="forms"]    .mk-feat-icon { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.mk-feat[data-area="api"]      .mk-feat-icon { background: linear-gradient(135deg, #f59e0b, #b45309); }
.mk-feat[data-area="platform"] .mk-feat-icon { background: linear-gradient(135deg, #64748b, #334155); }
.mk-feat[data-area="editor"]   .mk-feat-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.mk-feat[data-area="admin"]    .mk-feat-icon { background: linear-gradient(135deg, #f43f5e, #9f1239); }

/* The grid item is the per-entry wrapper the renderer adds, so the stretch has
   to be applied there for height:100% on the tile to resolve. Scoped to the
   page wrapper so other collection displays on the site are untouched. */
.mk-feature-grid .dm-collection-blocks > div { height: 100%; }

/* ── Release feed (collection "releases" via release-entry block) ── */
.mk-rel {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 0 0 30px;
  position: relative;
}
.mk-rel-rail {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  width: 42px;
}
/* The spine. Drawn on the rail so it stops at the last entry. */
.mk-rel-rail::before {
  content: "";
  position: absolute;
  top: 42px;
  bottom: -30px;
  width: 2px;
  background: #e2e8f0;
}
.mk-release-feed .dm-collection-blocks > div:last-child .mk-rel-rail::before { display: none; }
.mk-rel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #475569, #1e293b);
  color: #f1f5f9;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  position: relative;
  z-index: 1;
  padding: 10px;
  box-sizing: border-box;
}
.mk-rel[data-area="content"]  .mk-rel-icon { background: linear-gradient(135deg, #6366f1, #4338ca); }
.mk-rel[data-area="design"]   .mk-rel-icon { background: linear-gradient(135deg, #ec4899, #be185d); }
.mk-rel[data-area="data"]     .mk-rel-icon { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.mk-rel[data-area="forms"]    .mk-rel-icon { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.mk-rel[data-area="api"]      .mk-rel-icon { background: linear-gradient(135deg, #f59e0b, #b45309); }
.mk-rel[data-area="platform"] .mk-rel-icon { background: linear-gradient(135deg, #64748b, #334155); }
.mk-rel[data-area="editor"]   .mk-rel-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.mk-rel[data-area="admin"]    .mk-rel-icon { background: linear-gradient(135deg, #f43f5e, #9f1239); }
.mk-rel-body { min-width: 0; padding-top: 2px; }
.mk-rel-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.mk-rel-version {
  padding: 2px 9px;
  border-radius: 999px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mk-rel-date { font-size: 0.74rem; color: #64748b; font-weight: 600; }
.mk-rel-headline {
  margin: 0 0 7px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  color: #0f172a !important;
}
.mk-rel-summary {
  margin: 0 !important;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #475569;
}

/* ── Shared helpers for the new feature pages ── */
.mk-gutter { padding: 0 1.5rem; }
.mk-lede {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #475569;
}
.mk-spec {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e2e8f0;
}
.mk-spec li {
  display: flex;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.89rem;
  line-height: 1.55;
  color: #475569;
}
.mk-spec li strong {
  flex: 0 0 34%;
  color: #0f172a;
  font-weight: 700;
}
@media (max-width: 640px) {
  .mk-spec li { flex-direction: column; gap: 3px; }
  .mk-spec li strong { flex: none; }
  .mk-feat[data-tier="premium"] .mk-feat-title,
  .mk-feat[data-tier="dev"] .mk-feat-title { padding-right: 0; }
  .mk-feat-tier { position: static !important; margin-top: 8px; }
}

/* Centred call-to-action row. The existing pages inline this as a style attr;
   new pages use the class, per the site's no-inline-styles convention. */
.hero-cta-center { justify-content: center; }

/* Plugins built and merged but not yet in a tagged release. Shown so the
   roadmap is visible, badged so it is never mistaken for shipping. */
.plugin-card[data-tier="soon"] .plugin-card-tier-badge::before { content: 'In development'; }
.plugin-card[data-tier="soon"] .plugin-card-tier-badge {
  background: #e0e7ff;
  color: #3730a3;
}

/* Most plugins have no cover photo yet. The block always writes
   background-image inline, and `url('')` is NOT dropped by the browser - it
   wins over any background-image declared here, which is why a gradient
   fallback showed as flat grey. background-COLOR is the layer that works
   both ways: it shows through when there is no usable image, and a real photo
   paints over it. Tinted per tier so the grid still reads as grouped under
   the existing dark overlay. */
.plugin-card[data-tier="free"] .plugin-card-cover    { background-color: #0369a1; }
.plugin-card[data-tier="premium"] .plugin-card-cover { background-color: #b45309; }
.plugin-card[data-tier="soon"] .plugin-card-cover    { background-color: #4338ca; }

/* ── Dropdown hover flash ─────────────────────────────────────────────────────
   domma-js elements.css transitions ONLY the background on a dropdown item
   (`transition: background 0.15s ease`), while the light-mode hover rule sets
   `color:#ffffff !important` with no transition. So the text turns white
   instantly and then waits 150ms for the dark background to fade in behind it:
   for the first ~50ms it is white text on the near-white panel, contrast 1.01:1,
   and running the cursor down the list makes every row flash blank.

   Transitioning colour as well does not help - the crossover from dark-on-light
   to light-on-dark passes through ~1.2:1 whatever you do. Land both together
   instead, the way a native menu does. #site-navbar (1,1,0) outranks the
   framework's .navbar-dropdown-item (0,1,0), so no !important is needed. */
#site-navbar .navbar-dropdown-item {
  transition: none;
}

/* ── Product screenshots ──────────────────────────────────────────────────────
   Captured at 2x, so they are declared at full width and left to scale down.
   The border and shadow stop a dark admin screenshot bleeding into a light
   page background with no edge. */
.mk-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}
.mk-shot-caption {
  margin: 12px 0 0 !important;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #64748b;
  text-align: center;
}

/* ── Showcase sites (/sites) ─────────────────────────────────────────────── */
.mk-site-grid .dm-collection-blocks > div { height: 100%; }
.mk-site {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.mk-site:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .10);
}
/* Sites with no screenshot yet: url('') is invalid and dropped, so the colour
   beneath shows through rather than a broken-looking blank. */
.mk-site-shot {
  height: 170px;
  background-color: #0369a1;
  background-size: cover;
  background-position: top center;
  flex-shrink: 0;
}
.mk-site-body { padding: 20px 22px 22px; }
.mk-site-name {
  margin: 0 0 8px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.mk-site-summary { margin: 0 0 10px !important; font-size: .88rem; line-height: 1.6; color: #475569; }
.mk-site-uses {
  margin: 0 0 12px !important;
  font-size: .76rem;
  letter-spacing: .02em;
  color: #64748b;
}
.mk-site-cta { font-size: .85rem; font-weight: 700; color: #0369a1; }

/* ==== foundation start ==== */
/* Foundation (tl-): tool cards, /tools directory, /enquire, /credits
   .tl-btnless: the page-wide link rule underlines every .page-body anchor whose class has no "btn" in it;
   the substring in "tl-btnless" opts the whole-card link out of it. */
.tl-card { display: flex; flex-direction: column; height: 100%; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); overflow: hidden; color: var(--dm-text); text-decoration: none; box-shadow: var(--dm-shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tl-card:hover, .tl-card:focus-visible { transform: translateY(-3px); box-shadow: var(--dm-shadow-lg); border-color: var(--dm-primary); color: var(--dm-text); text-decoration: none; }
.tl-card-media { position: relative; aspect-ratio: 16 / 7; background: var(--dm-surface-raised); overflow: hidden; }
.tl-card-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-card-img[src=""] { display: none; }
.tl-card-tier { position: absolute; top: .75rem; left: .75rem; padding: .2rem .6rem; border-radius: var(--dm-radius-full); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--dm-surface); color: var(--dm-text); box-shadow: var(--dm-shadow-sm); }
.tl-card[data-tier="built-in"] .tl-card-tier::after { content: "Built-in"; }
.tl-card[data-tier="free"] .tl-card-tier::after { content: "Free"; }
.tl-card[data-tier="pro"] .tl-card-tier { background: var(--dm-primary); color: var(--dm-primary-text); }
.tl-card[data-tier="pro"] .tl-card-tier::after { content: "Pro"; }
.tl-card-body { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.1rem 1.25rem 1.25rem; }
.tl-card-head > * { margin: 0; }
.tl-card-name { margin: 0; font-size: 1.1rem; line-height: 1.25; color: var(--dm-text); }
.tl-card-tagline { margin: .15rem 0 0; font-size: .88rem; color: var(--dm-text-secondary); }
.tl-card-summary { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--dm-text-secondary); flex: 1; }
.tl-card-foot { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .78rem; }
.tl-card-cat, .tl-card-needs { padding: .15rem .55rem; border-radius: var(--dm-radius-full); border: 1px solid var(--dm-border); color: var(--dm-text-secondary); }
.tl-card-needs { border-color: var(--dm-warning); color: var(--dm-text); }
.tl-card-needs:empty { display: none; }
.tl-card-more { margin-left: auto; font-weight: 600; color: var(--dm-primary); }

/* Grids of tool cards: static block display and the interactive browser */
.tl-grid .dm-collection-display, .tl-grid .dm-cb-body .dm-collection-display { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.tl-grid .dm-static-block, .tl-grid .dm-collection-display > * { min-width: 0; }

/* Page furniture */
.tl-gutter { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.tl-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; max-width: 1240px; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; }
.tl-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: .5rem 0 1rem; }
.tl-hero p { font-size: 1.1rem; line-height: 1.6; color: var(--dm-text-secondary); }
.tl-hero-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--dm-radius-xl); box-shadow: var(--dm-shadow-lg); }
.tl-kicker { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dm-primary); }
.tl-stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 1.5rem; }
.tl-stat strong { display: block; font-size: 1.8rem; line-height: 1; color: var(--dm-text); }
.tl-stat span { font-size: .85rem; color: var(--dm-text-secondary); }
.tl-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tl-panel { background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 1.5rem; }
.tl-panel h3 { margin-top: .25rem; }
.tl-panel p, .tl-panel li { color: var(--dm-text-secondary); line-height: 1.6; }
.tl-panel ul { padding-left: 1.1rem; margin: 0; }
.tl-panel--pro { border-color: var(--dm-primary); }
.tl-band { background: var(--dm-surface-raised); border-top: 1px solid var(--dm-border); border-bottom: 1px solid var(--dm-border); padding: 3rem 0; }
.tl-lapse { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; }
.tl-lapse-row { display: flex; gap: .75rem; align-items: baseline; }
.tl-lapse-row strong { white-space: nowrap; }
.tl-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.tl-enquire { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: start; }
.tl-enquire-aside img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--dm-radius-xl); margin-bottom: 1.25rem; }
.tl-credits table { width: 100%; font-size: .9rem; }
.tl-credits td, .tl-credits th { vertical-align: top; }
@media (max-width: 900px) {
  .tl-hero, .tl-enquire { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
  .tl-split, .tl-lapse { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tl-hero, .tl-gutter { padding-left: 0; padding-right: 0; }
  .tl-band { padding: 2rem 0; }
}
.tl-credit-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: var(--dm-radius-sm); display: block; }
.tl-credits .table { margin-top: 1.5rem; }
@media (max-width: 600px) { .tl-credits table td:nth-child(4), .tl-credits table th:nth-child(4) { display: none; } .tl-credit-thumb { width: 64px; height: 44px; } }
/* ==== foundation end ==== */

/* ==== core-pages start ==== */
/* Core marketing pages (mk-): home, features, pricing, what's new, get started. Solid theme colours only. */
.mk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.mk-narrow { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; }
.mk-sec { padding: 4.5rem 0; }
.mk-sec-tight { padding: 3rem 0; }
.mk-band { background: var(--dm-surface-raised); border-top: 1px solid var(--dm-border); border-bottom: 1px solid var(--dm-border); }
.mk-kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dm-primary); margin-bottom: .6rem; }
.mk-head { max-width: 760px; margin: 0 0 2.5rem; }
.mk-head-c { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.mk-head h2, .mk-head-c h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; margin: 0 0 .8rem; }
.mk-head p, .mk-head-c p { font-size: 1.08rem; line-height: 1.65; color: var(--dm-text-secondary); margin: 0; }

/* Hero: words beside a photograph */
.mk-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; max-width: 1240px; margin: 0 auto; padding: 4rem 1.5rem 3.5rem; }
.mk-hero-solo { grid-template-columns: 1fr; max-width: 900px; text-align: left; padding-bottom: 2.5rem; }
.mk-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 1.1rem; color: var(--dm-text); }
.mk-hero-lede { font-size: 1.15rem; line-height: 1.65; color: var(--dm-text-secondary); margin: 0 0 1.5rem; }
.mk-hero-photo { position: relative; }
.mk-hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--dm-radius-xl); box-shadow: var(--dm-shadow-lg); }
.mk-hero-note { position: absolute; left: -1.25rem; bottom: -1.25rem; max-width: 70%; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); box-shadow: var(--dm-shadow-md); padding: .8rem 1rem; font-size: .88rem; line-height: 1.45; color: var(--dm-text); }
.mk-hero-note strong { display: block; color: var(--dm-primary); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .2rem; }

/* Buttons */
.mk-btns { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.mk-btns-c { justify-content: center; }
.mk-btns a { display: inline-flex; align-items: center; gap: .45rem; padding: .75rem 1.35rem; border-radius: var(--dm-radius-md); font-weight: 600; text-decoration: none; border: 1px solid var(--dm-primary); color: var(--dm-primary); background: transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.mk-btns a:first-child { background: var(--dm-primary); color: var(--dm-primary-text); }
.mk-btns a:hover, .mk-btns a:focus-visible { background: var(--dm-primary-hover); border-color: var(--dm-primary-hover); color: var(--dm-primary-hover-text); text-decoration: none; }
.mk-cmd { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--dm-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .95rem; padding: .55rem .9rem; border-radius: var(--dm-radius-md); background: var(--dm-surface-raised); border: 1px solid var(--dm-border); color: var(--dm-text); }
.mk-cmd::before { content: "$"; color: var(--dm-text-muted); }

/* Stat strip */
.mk-stats { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2rem; }
.mk-stat strong { display: block; font-size: 1.9rem; line-height: 1; color: var(--dm-text); }
.mk-stat span { font-size: .85rem; color: var(--dm-text-secondary); }

/* Panels */
.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.mk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-panel { display: flex; flex-direction: column; gap: .55rem; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 1.5rem; color: var(--dm-text); text-decoration: none; }
a.mk-panel { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.mk-panel:hover, a.mk-panel:focus-visible { transform: translateY(-3px); box-shadow: var(--dm-shadow-lg); border-color: var(--dm-primary); color: var(--dm-text); text-decoration: none; }
.mk-panel h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; color: var(--dm-text); }
.mk-panel p { margin: 0; line-height: 1.6; color: var(--dm-text-secondary); font-size: .96rem; }
.mk-panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-primary) 13%, transparent); color: var(--dm-primary); }
.mk-panel-icon svg { width: 1.3rem; height: 1.3rem; }
.mk-panel-more { margin-top: auto; padding-top: .4rem; font-weight: 600; font-size: .9rem; color: var(--dm-primary); }
.mk-panel-photo { margin: -1.5rem -1.5rem .6rem; }
.mk-panel-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--dm-radius-lg) var(--dm-radius-lg) 0 0; }

/* Photo beside text */
.mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.mk-split-rev > :first-child { order: 2; }
.mk-split img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--dm-radius-xl); box-shadow: var(--dm-shadow-md); }
.mk-split h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; margin: 0 0 .9rem; }
.mk-split p { line-height: 1.7; color: var(--dm-text-secondary); }
.mk-ticks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.mk-ticks li { position: relative; padding-left: 1.6rem; line-height: 1.55; color: var(--dm-text); }
.mk-ticks li::before { content: ""; position: absolute; left: .15rem; top: .45em; width: .55rem; height: .3rem; border-left: 2px solid var(--dm-success); border-bottom: 2px solid var(--dm-success); transform: rotate(-45deg); }
.mk-ticks li.mk-no::before { border: 0; width: .7rem; height: 2px; top: .7em; background: var(--dm-text-muted); transform: none; }
.mk-ticks li.mk-no { color: var(--dm-text-muted); }

/* Plans */
.mk-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.mk-plan { display: flex; flex-direction: column; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 1.6rem 1.4rem; }
.mk-plan-hot { border: 2px solid var(--dm-primary); box-shadow: var(--dm-shadow-md); }
.mk-plan h3 { margin: .2rem 0 .3rem; font-size: 1.3rem; }
.mk-plan-price { font-size: 2rem; font-weight: 700; color: var(--dm-text); line-height: 1.1; }
.mk-plan-price small { font-size: .9rem; font-weight: 500; color: var(--dm-text-secondary); }
.mk-plan-for { color: var(--dm-text-secondary); font-size: .93rem; line-height: 1.55; margin: .6rem 0 0; }
.mk-plan .mk-ticks { font-size: .93rem; flex: 1; }
.mk-plan .mk-btns { margin-top: 1.4rem; }
.mk-plan .mk-btns a { width: 100%; justify-content: center; }
.mk-tier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.mk-tier-tag { align-self: flex-start; padding: .18rem .65rem; border-radius: var(--dm-radius-full); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--dm-border); color: var(--dm-text-secondary); }
.mk-tier-tag.is-pro { background: var(--dm-primary); border-color: var(--dm-primary); color: var(--dm-primary-text); }
.mk-compare table { width: 100%; }
.mk-compare td:not(:first-child), .mk-compare th:not(:first-child) { text-align: center; white-space: nowrap; }
/* The comparison page: more columns with longer text - let them wrap, and scroll sideways on a phone */
.mk-compare-wide { overflow-x: auto; }
.mk-compare-wide table { min-width: 46rem; }
.mk-compare-wide td:not(:first-child), .mk-compare-wide th:not(:first-child) { white-space: normal; min-width: 6.5rem; }
.mk-compare-wide td:first-child { white-space: nowrap; }

/* Tool strip on the home page: reuse the foundation's tool cards */
.page-body .mk-toolstrip .dm-collection-display { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.mk-toolstrip .tl-card[href="/tools/shopping-cart"] .tl-card-img { object-position: center top; }
@media (max-width: 600px) {
  .page-body .mk-toolstrip .dm-collection-display { grid-template-columns: 1fr; }
}

/* Proof: fleet sites */
.page-body .mk-proof .dm-collection-display { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 600px) {
  .page-body .mk-proof .dm-collection-display { grid-template-columns: 1fr; }
}

/* Closing call to action */
.mk-final { text-align: center; padding: 4.5rem 1.5rem; }
.mk-final h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 .8rem; }
.mk-final p { color: var(--dm-text-secondary); font-size: 1.08rem; max-width: 640px; margin: 0 auto; line-height: 1.65; }

/* What's new: release rail on plain surfaces */

/* Features sub-pages: plain header band */
.mk-page-head { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--dm-border); margin-bottom: 3rem; }
.mk-page-head h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 .9rem; }
.mk-page-head p { font-size: 1.1rem; line-height: 1.65; color: var(--dm-text-secondary); max-width: 760px; margin: 0; }
.mk-prose { max-width: 820px; }
.mk-prose h2 { margin-top: 2.6rem; }
.mk-prose p, .mk-prose li { line-height: 1.7; }
.mk-shot { display: block; width: 100%; border-radius: var(--dm-radius-lg); border: 1px solid var(--dm-border); box-shadow: var(--dm-shadow-md); margin: 1.5rem 0; }
.mk-crumbs { font-size: .88rem; color: var(--dm-text-secondary); margin-bottom: .8rem; }
.mk-crumbs a { color: var(--dm-primary); }

@media (max-width: 1000px) {
  .mk-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mk-hero, .mk-split { grid-template-columns: 1fr; gap: 2rem; }
  .mk-hero { padding-top: 2.25rem; }
  .mk-split-rev > :first-child { order: 0; }
  .mk-grid, .mk-grid-2, .mk-tier { grid-template-columns: 1fr; }
  .mk-hero-note { position: static; max-width: none; margin-top: 1rem; }
  .mk-sec { padding: 3rem 0; }
}
@media (max-width: 560px) {
  .mk-plans, .mk-grid-4 { grid-template-columns: 1fr; }
}
.mk-panel-pro { border: 2px solid var(--dm-primary); }
html body .page-body a.mk-panel, html body .page-body a.mk-panel:hover { text-decoration: none !important; color: var(--dm-text) !important; }
html body .page-body a.mk-panel .mk-panel-more { color: var(--dm-primary); }
.mk-feat[data-tier="premium"] .mk-feat-tier::after { content: "Pro"; }
html body .page-body a.mk-feat, html body .page-body a.mk-feat:hover { text-decoration: none !important; color: var(--dm-text) !important; }
/* Solid, theme-token versions of the older card blocks (feature, run option, quickstart, release) */
.mk-feat, .run-option-card, .quickstart-step { background: var(--dm-card-bg); border-color: var(--dm-card-border); box-shadow: var(--dm-shadow-sm); }
.mk-feat:hover, .run-option-card:hover, .quickstart-step:hover { border-color: var(--dm-primary); box-shadow: var(--dm-shadow-lg); }
.mk-feat-icon, .quickstart-step-icon, .run-option-icon-chip { background: color-mix(in srgb, var(--dm-primary) 14%, var(--dm-card-bg)); color: var(--dm-primary); box-shadow: none; }
.run-option-icon-chip { border-color: var(--dm-card-bg); }
.run-option-banner::after { background: none; }
.mk-feat-title, .run-option-title, .quickstart-step-title { color: var(--dm-text) !important; }
.mk-feat-summary, .run-option-content, .quickstart-step-desc, .run-option-list li, .run-option-content .run-option-intro { color: var(--dm-text-secondary); }
.run-option-content .run-option-req { color: var(--dm-text-muted); }
.run-option-ctas { border-top-color: var(--dm-border); }
.quickstart-step-number { color: color-mix(in srgb, var(--dm-text) 8%, transparent); }
.mk-feat[data-tier="premium"] .mk-feat-tier { background: var(--dm-primary); color: var(--dm-primary-text); }
.page-body .mk-feat[data-area] .mk-feat-icon, .page-body .mk-rel[data-area] .mk-rel-icon { background: color-mix(in srgb, var(--dm-primary) 14%, var(--dm-card-bg)); color: var(--dm-primary); box-shadow: none; }
.mk-rel-rail::before { background: var(--dm-border); }
.mk-rel-version { background: var(--dm-text); color: var(--dm-surface); }
.mk-rel-date { color: var(--dm-text-muted); }
.mk-rel-headline { color: var(--dm-text) !important; }
.mk-rel-summary { color: var(--dm-text-secondary); }
.mk-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; } .mk-tags span { padding: .2rem .7rem; border-radius: var(--dm-radius-full); border: 1px solid var(--dm-border); font-size: .8rem; color: var(--dm-text-secondary); }
.mk-plan .mk-ticks { align-content: start; }
/* ==== core-pages end ==== */

/* ==== tutorials start ==== */
/* Tutorials (/tutorials and /tutorials/<slug>) - built by the tutorials agent.
   Blocks: content/blocks/tutorial-card.html. No gradients: solid theme tokens and photography only. */

/* ---- Hero (photo + dark overlay, shared by the hub and every tutorial) ---- */
.hero.tu-hero { min-height: 340px; display: flex; align-items: flex-end; text-align: left; }
.hero.tu-hero .hero-content { width: 100%; max-width: 852px; margin: 0 auto; padding: 0 16px; }
.hero.tu-hero .hero-body,
.hero.tu-hero h1,
.hero.tu-hero p { color: #fff; }
.hero.tu-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.12; margin: .35rem 0 .75rem; max-width: 22ch; }
.hero.tu-hero .tu-lede { font-size: 1.15rem; line-height: 1.55; max-width: 60ch; opacity: .95; margin: 0 0 1.1rem; }
.page-body .hero.tu-hero .tu-crumbs a:not(#x) { color: #fff !important; text-decoration-color: rgba(255,255,255,.5); }
.hero.tu-hero .tu-crumbs { font-size: .9rem; letter-spacing: .02em; opacity: .9; margin: 0; }
.tu-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.tu-fact { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); font-size: .88rem; color: #fff; }
.tu-fact [data-icon] { width: 15px; height: 15px; }
.tu-fact-pro { background: #f5c451; border-color: #f5c451; color: #2b2100; font-weight: 700; }
.tu-fact-free { background: #2f855a; border-color: #2f855a; font-weight: 700; }

/* ---- Tutorial body ---- */
.tu-page { max-width: 820px; margin: 0 auto; padding: 0 16px 64px; }
.tu-page > p, .tu-page > ul, .tu-page > ol { font-size: 1.05rem; line-height: 1.7; }
.tu-page h2 { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--dm-border); font-size: 1.6rem; }
.tu-page h3 { margin-top: 2rem; font-size: 1.22rem; }
.tu-page code { font-size: .92em; }
.tu-page pre { border-radius: var(--dm-radius-md, 8px); }
.tu-page img:not(.tu-card-img) { max-width: 100%; height: auto; border-radius: var(--dm-radius-md, 8px);
  border: 1px solid var(--dm-border); box-shadow: var(--dm-shadow-md); }
.tu-page .mk-window { margin: 1.25rem 0 1.75rem; }
.tu-page .mk-window-body img { border: 0; box-shadow: none; border-radius: 0; }
.tu-page blockquote { border-left: 4px solid var(--dm-primary); background: var(--dm-background-alt, var(--dm-surface));
  margin: 1.5rem 0; padding: .9rem 1.1rem; border-radius: 0 var(--dm-radius-md, 8px) var(--dm-radius-md, 8px) 0; color: var(--dm-text); }
.tu-page blockquote p { margin: 0; }

.tu-toolsbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.5rem 0 1.25rem; }
.tu-toolsbar-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dm-text-secondary); margin-right: .25rem; }
.page-body a.tu-tool:not(#x), .tu-tool { display: inline-flex; align-items: center; padding: .25rem .7rem; border-radius: 999px;
  border: 1px solid var(--dm-border); background: var(--dm-surface); color: var(--dm-text) !important; text-decoration: none !important; font-size: .9rem; }
.page-body a.tu-tool:not(#x):hover { border-color: var(--dm-primary); color: var(--dm-primary) !important; }

/* "At a glance" three boxes */
.tu-glance { margin: .5rem 0 1rem; padding: 0 !important; }
.tu-glance .card { height: 100%; }
.tu-glance h2, .tu-glance h4 { margin: 0 0 .5rem; padding-top: 0; border-top: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dm-text-secondary); }
.tu-glance ul { margin: 0; padding-left: 1.1rem; }
.tu-glance p, .tu-glance li { font-size: .97rem; line-height: 1.55; }

/* Closing call to action */
.tu-cta { margin-top: 3rem; border: 1px solid var(--dm-border); background: var(--dm-surface); }
.tu-cta h3 { margin-top: 0; }
.tu-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 0; }
.page-body a.tu-btn:not(#x), .tu-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.15rem; border-radius: var(--dm-radius-md, 8px);
  border: 1px solid var(--dm-border); background: var(--dm-card-bg, var(--dm-background)); color: var(--dm-text) !important;
  text-decoration: none !important; font-weight: 600; }
.page-body a.tu-btn-primary:not(#x), .tu-btn-primary { background: var(--dm-primary); border-color: var(--dm-primary); color: var(--dm-primary-text, #fff) !important; }
.page-body a.tu-btn:not(#x):hover { filter: brightness(1.06); }

/* ---- Hub ---- */
.tu-hub { max-width: 1180px; margin: 0 auto; padding: 0 16px 72px; }
.tu-hub-intro { max-width: 68ch; font-size: 1.08rem; line-height: 1.7; }
.tu-track { margin-top: 3.25rem; }
.tu-track-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
  border-bottom: 1px solid var(--dm-border); padding-bottom: .6rem; margin-bottom: 1.25rem; }
.tu-track-head h2 { margin: 0; font-size: 1.5rem; }
.tu-track-head p { margin: 0; color: var(--dm-text-secondary); }
.tu-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; }

/* ---- Tutorial card (block) ---- */
.page-body a.tu-card:not(#x), .tu-card { display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg, 12px); background: var(--dm-card-bg, var(--dm-surface));
  color: var(--dm-text) !important; text-decoration: none !important; box-shadow: var(--dm-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.page-body a.tu-card:not(#x):hover, .page-body a.tu-card:not(#x):focus-visible { transform: translateY(-3px); box-shadow: var(--dm-shadow-lg); border-color: var(--dm-primary); }
.tu-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dm-background-alt, var(--dm-surface)); }
.tu-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tu-card-pro { position: absolute; top: .7rem; left: .7rem; display: none; padding: .15rem .6rem; border-radius: 999px;
  background: #f5c451; color: #2b2100; font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.tu-card[data-tier="pro"] .tu-card-pro { display: inline-block; }
.tu-card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.tu-card-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--dm-text-secondary); }
.tu-card-level { text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.tu-card-time { display: inline-flex; align-items: center; gap: .3rem; }
.tu-card-time [data-icon] { width: 13px; height: 13px; }
.tu-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--dm-text); }
.tu-card-summary { font-size: .95rem; line-height: 1.55; color: var(--dm-text-secondary); flex: 1; }
.tu-card-cta { font-weight: 700; color: var(--dm-primary); font-size: .92rem; margin-top: .35rem; }

@media (max-width: 640px) {
  .hero.tu-hero { min-height: 300px; }
  .tu-page > p, .tu-page > ul, .tu-page > ol { font-size: 1rem; }
  .tu-page h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .page-body a.tu-card:not(#x) { transition: none; } }
/* ==== tutorials end ==== */

/* ==== tool-pages-a start ==== */
/* Tool pages (/tools/<slug>) - one shared layout for every Tool, built-in, free and Pro.
   Solid theme colours only, no gradients; colours are real --dm-* tokens so the pages
   follow the theme, light or dark. Markup: content/pages/tools/<slug>.md
   Blocks: .tp-hero, .tp-section (.tp-h2), .tp-benefits, .tp-shots, .tp-steps, .tp-compare,
   .tp-works, .tp-facts, .tp-faq, .tp-pairs, .tp-cta; pills .tp-badge--built-in|free|pro. */
.tp-hero, .tp-section, .tp-cta { --tp-radius: 16px; }
.tp-h2, .tp-section > h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.2; margin: 0 0 1.5rem; }
.tp-section h3, .tp-hero h3 { font-size: 1.08rem; margin: 0 0 0.4rem; }
.tp-section { padding: 3.25rem 1.5rem; }
.tp-section + .tp-section { border-top: 1px solid var(--dm-border); }
.tp-section-intro { font-size: 1.05rem; line-height: 1.7; color: var(--dm-text-secondary); max-width: 46rem; margin: -0.75rem 0 2rem; }

/* Hero: words on the left, a photograph on the right */
.tp-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; padding: 2.5rem 1.5rem 3.25rem; }
.tp-crumb { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--dm-text-muted) !important; text-decoration: none !important; margin-bottom: 1.4rem; }
.tp-crumb:hover { color: var(--dm-primary) !important; }
.tp-crumb svg { width: 0.95rem; height: 0.95rem; }
.tp-hero-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1rem; }
.tp-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 11px; background: var(--dm-primary); color: var(--dm-primary-text); }
.tp-hero-icon svg { width: 1.25rem; height: 1.25rem; }
.tp-hero-tool { font-weight: 700; font-size: 1.1rem; color: var(--dm-text); }
.tp-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.1; margin: 0 0 1rem; }
.tp-lede { font-size: 1.17rem; line-height: 1.65; color: var(--dm-text-secondary); max-width: 36rem; margin: 0 0 1.75rem; }
.tp-hero-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tp-radius); box-shadow: var(--dm-shadow-lg); }

/* Tier pills: Built-in / Free / Pro */
.tp-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.65rem; border-radius: 999px; border: 1px solid var(--dm-border); color: var(--dm-text); background: var(--dm-surface); white-space: nowrap; line-height: 1.4; }
.tp-badge::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dm-info); }
.tp-badge--free::before { background: var(--dm-success); }
.tp-badge--pro::before { background: var(--dm-warning); }

/* Buttons: .tp-btn is the quiet one, --primary the filled one */
.tp-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tp-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.78rem 1.3rem; border-radius: 10px; font-weight: 600; text-decoration: none !important; border: 1px solid var(--dm-border); color: var(--dm-text) !important; background: transparent; transition: background-color 0.15s ease, border-color 0.15s ease; }
.tp-btn:hover { border-color: var(--dm-primary); }
.tp-btn svg { width: 1.05rem; height: 1.05rem; }
.tp-btn--primary { background: var(--dm-primary); border-color: var(--dm-primary); color: var(--dm-primary-text) !important; }
.tp-btn--primary:hover { background: var(--dm-primary-hover); border-color: var(--dm-primary-hover); }

/* What it does for you */
.tp-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tp-benefit { background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--tp-radius); padding: 1.5rem; }
.tp-benefit p { margin: 0; color: var(--dm-text-secondary); line-height: 1.6; font-size: 0.97rem; }
.tp-benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 11px; margin-bottom: 1rem; background: color-mix(in srgb, var(--dm-primary) 13%, transparent); color: var(--dm-primary); }
.tp-benefit-icon svg { width: 1.25rem; height: 1.25rem; }

/* Showcase: screenshots in a browser frame, captioned */
.tp-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.75rem; }
.tp-shot { margin: 0; min-width: 0; }
.tp-shot--wide { grid-column: 1 / -1; }
.tp-shot--narrow { max-width: 660px; }
.tp-frame { position: relative; padding-top: 26px; border: 1px solid var(--dm-border); border-radius: 12px; overflow: hidden; box-shadow: var(--dm-shadow-md); background: var(--dm-surface); }
.tp-frame::before { content: ''; position: absolute; top: 8px; left: 14px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 16px 0 0 #f59e0b, 32px 0 0 #22c55e; }
.tp-frame img { display: block; width: 100%; height: auto; border-top: 1px solid var(--dm-border); }
.tp-shot figcaption { margin-top: 0.75rem; font-size: 0.93rem; line-height: 1.55; color: var(--dm-text-secondary); }
.tp-shot figcaption strong { color: var(--dm-text); }
.tp-live { border: 1px dashed var(--dm-border); border-radius: var(--tp-radius); padding: 1.25rem 1.5rem; background: var(--dm-surface); }
.tp-live p { margin: 0; line-height: 1.6; }
.tp-shots + .tp-live { margin-top: 2rem; }

/* Try it: numbered steps */
.tp-steps { list-style: none; counter-reset: tp-step; margin: 0; padding: 0; max-width: 48rem; }
.tp-steps li { counter-increment: tp-step; position: relative; padding: 0.15rem 0 1.2rem 3.2rem; line-height: 1.6; color: var(--dm-text-secondary); }
.tp-steps li::before { content: counter(tp-step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--dm-primary); color: var(--dm-primary-text); }
.tp-steps li strong { color: var(--dm-text); }
.tp-section code { font-size: 0.88em; padding: 0.1rem 0.35rem; border-radius: 5px; background: var(--dm-code-bg); color: var(--dm-code-text); }

/* Free vs Pro comparison */
.tp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.tp-compare-col { border: 1px solid var(--dm-border); border-radius: var(--tp-radius); padding: 1.5rem 1.6rem; background: var(--dm-card-bg); }
.tp-compare-col--pro { border: 2px solid var(--dm-primary); }
.tp-compare-col h3 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.tp-compare-col ul { margin: 0; padding-left: 1.2rem; }
.tp-compare-col li { margin: 0 0 0.45rem; line-height: 1.5; color: var(--dm-text-secondary); }

/* Works with / good to know */
.tp-works, .tp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.tp-work, .tp-fact { border: 1px solid var(--dm-border); border-radius: var(--tp-radius); padding: 1.35rem 1.5rem; background: var(--dm-surface); }
.tp-work p, .tp-fact p { margin: 0; line-height: 1.6; color: var(--dm-text-secondary); font-size: 0.97rem; }
.tp-fact h3 { display: flex; align-items: center; gap: 0.5rem; }
.tp-fact h3 svg { width: 1.1rem; height: 1.1rem; color: var(--dm-primary); }
.tp-faq { max-width: 52rem; }

/* Goes well with: related Tools */
.tp-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.tp-pair { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.2rem; border: 1px solid var(--dm-border); border-radius: 14px; background: var(--dm-card-bg); color: var(--dm-text) !important; text-decoration: none !important; transition: border-color 0.15s ease, transform 0.15s ease; }
.tp-pair:hover { border-color: var(--dm-primary); transform: translateY(-2px); }
.tp-pair-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: color-mix(in srgb, var(--dm-primary) 13%, transparent); color: var(--dm-primary); }
.tp-pair-icon svg { width: 1.15rem; height: 1.15rem; }
.tp-pair-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tp-pair-text small { font-size: 0.88rem; color: var(--dm-text-secondary); line-height: 1.4; }
.tp-pair .tp-badge { flex: none; }

/* Closing call to action: a solid band in the theme's primary colour */
.tp-cta { margin: 1.5rem 1.5rem 4rem; padding: 2.75rem; border-radius: 20px; background: var(--dm-primary); color: var(--dm-primary-text); }
.tp-cta h2 { color: var(--dm-primary-text); margin: 0 0 0.5rem; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.tp-cta p { margin: 0 0 1.5rem; line-height: 1.6; max-width: 42rem; color: var(--dm-primary-text); opacity: 0.92; }
.tp-cta .tp-btn { color: var(--dm-primary-text) !important; border-color: color-mix(in srgb, var(--dm-primary-text) 55%, transparent); }
.tp-cta .tp-btn:hover { border-color: var(--dm-primary-text); }
.tp-cta .tp-btn--primary { background: var(--dm-background); border-color: var(--dm-background); color: var(--dm-text) !important; }
.tp-cta .tp-btn--primary:hover { background: var(--dm-surface); border-color: var(--dm-surface); }

@media (max-width: 900px) {
  .tp-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; }
  .tp-benefits { grid-template-columns: 1fr 1fr; }
  .tp-compare { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tp-section { padding: 2.5rem 1rem; }
  .tp-hero { padding: 1rem 1rem 2rem; }
  .tp-benefits, .tp-shots { grid-template-columns: 1fr; }
  .tp-cta { margin: 0.5rem 1rem 3rem; padding: 2rem 1.4rem; }
  .tp-pair { flex-wrap: wrap; }
}
/* ==== tool-pages-a end ==== */

/* ==== tool-pages-b start ==== */
/* Tool pages B (Pro Tools): the only extras beyond tool-pages-a */
.tp-shots-note { margin: 1.5rem 0 0; font-size: 0.85rem; color: var(--dm-text-muted); }
/* Paired screenshots of different heights line up: same frame shape, top of the screen shown */
.tp-shots--even .tp-shot:not(.tp-shot--wide) .tp-frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
/* ==== tool-pages-b end ==== */

/* ==== tool-pages-c start ==== */
/* Tool pages C (messages, mongodb-adapter, security-pro, seo-pro, shopping-cart-pro, social-media-pro,
   surveys, theme-roller, waypoint-pro): bullet lists inside the .tp-fact boxes. Builds on tool-pages-a. */
.tpc-notes { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.tpc-notes li { position: relative; padding: 0.55rem 0 0.55rem 1.4rem; border-bottom: 1px solid var(--dm-border); line-height: 1.6; font-size: 0.97rem; color: var(--dm-text-secondary); }
.tpc-notes li:last-child { border-bottom: 0; padding-bottom: 0; }
.tpc-notes li::before { content: ''; position: absolute; left: 0.15rem; top: 1.12rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--dm-primary); }
.tpc-notes strong { color: var(--dm-text); }
/* ==== tool-pages-c end ==== */

/* ==== showcase start ==== */
/* Showcase (/showcase and /showcase/<slug>) - built by the showcase agent. Prefix sc-.
   Blocks: showcase-card, acme-milestone, acme-product, acme-hours. Solid theme tokens and photography only. */

/* Link-cards carry a class containing "btn" (sc-btnlink, mk-btn), which the site-wide underline rule for
   links in .page-body leaves alone; these rules then style them. */
.page-body a.sc-btnlink, .page-body a.sc-btnlink:hover { text-decoration: none; color: var(--dm-text); }
.page-body .mk-site.sc-btnlink .mk-site-name { color: var(--dm-text); }
.page-body .mk-site.sc-btnlink .mk-site-summary { color: var(--dm-text-secondary); }
.page-body .mk-site.sc-btnlink .mk-site-uses { color: var(--dm-text-muted); }
.page-body .mk-site.sc-btnlink .mk-site-cta { color: var(--dm-primary); font-weight: 600; }

/* Hub cards */
.page-body .sc-cards .dm-collection-display, .page-body .sc-cards .dm-collection-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.page-body .sc-card { display: flex; flex-direction: column; height: 100%; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.page-body .sc-card:hover, .page-body .sc-card:focus-visible { transform: translateY(-3px); box-shadow: var(--dm-shadow-lg); border-color: var(--dm-primary); }
.page-body .sc-card-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.page-body .sc-card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.25rem 1.4rem 1.4rem; flex: 1; }
.page-body .sc-card-kind { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dm-primary); }
.page-body .sc-card-title { margin: 0; font-size: 1.15rem; line-height: 1.3; color: var(--dm-text); }
.page-body .sc-card-sum { margin: 0; color: var(--dm-text-secondary); line-height: 1.6; font-size: .95rem; }
.page-body .sc-card-uses { margin: 0; font-size: .84rem; color: var(--dm-text-muted); }
.page-body .sc-card-more { margin-top: auto; padding-top: .5rem; font-weight: 600; font-size: .92rem; color: var(--dm-primary); }
.page-body .sc-sites .dm-collection-display, .page-body .sc-sites .dm-collection-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

/* Live demo frames and code */
.page-body .sc-demo { margin: 1.25rem 0 1.75rem; }
.page-body .sc-small { font-size: .88rem; color: var(--dm-text-muted); }
.page-body .sc-code-label { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dm-text-secondary); margin: 0 0 .4rem; }
.page-body .sc-shot { display: block; width: 100%; border-radius: var(--dm-radius-lg); border: 1px solid var(--dm-border); box-shadow: var(--dm-shadow-md); }
.page-body .sc-code-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2.5rem; align-items: start; }

/* Eight looks */
.page-body .sc-jump { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.page-body .sc-jump a { display: inline-block; padding: .45rem .95rem; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-full); background: var(--dm-card-bg); color: var(--dm-text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.page-body .sc-jump a:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.page-body .sc-look { padding: 2.5rem 0; border-bottom: 1px solid var(--dm-border); scroll-margin-top: 1.5rem; }
.page-body .sc-look:last-child { border-bottom: 0; }
.page-body .sc-look-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.page-body .sc-look-head h2 { margin: 0 0 .3rem; font-size: 1.6rem; }
.page-body .sc-look-head p { margin: 0; color: var(--dm-text-secondary); line-height: 1.6; max-width: 760px; }
.page-body .sc-look-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--dm-primary); color: var(--dm-primary-text); font-weight: 700; }
.page-body .sc-demo-carousel { max-width: 900px; }
.page-body .sc-demo-carousel img { max-height: 420px; object-fit: cover; }
.page-body .sc-ms-grid .dm-collection-display, .page-body .sc-ms-grid .dm-collection-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.page-body .sc-ms { display: flex; flex-direction: column; height: 100%; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); overflow: hidden; }
.page-body .sc-ms-photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.page-body .sc-ms-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.page-body .sc-ms-date { margin: 0; font-size: .8rem; font-weight: 700; color: var(--dm-primary); display: flex; align-items: center; gap: .35rem; }
.page-body .sc-ms-date svg { width: 1rem; height: 1rem; }
.page-body .sc-ms-title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.page-body .sc-ms-text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--dm-text-secondary); }
.page-body .sc-ms-staff { margin: auto 0 0; padding-top: .4rem; font-size: .8rem; color: var(--dm-text-muted); }
.page-body .sc-ms[data-status="planned"] { border-style: dashed; }
.page-body .sc-ms[data-status="planned"] .sc-ms-photo { filter: grayscale(.7); }

/* Catalogue cards */
.page-body .sc-dir .dm-collection-display, .page-body .sc-dir .dm-collection-blocks, .page-body .sc-dir .cb-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.page-body .sc-prod { display: flex; flex-direction: column; gap: .35rem; height: 100%; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 1.1rem 1.2rem; }
.page-body .sc-prod-cat { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dm-primary); }
.page-body .sc-prod-name { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.page-body .sc-prod-sum { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--dm-text-secondary); }
.page-body .sc-prod-foot { margin-top: auto; padding-top: .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.page-body .sc-prod-price { font-size: 1.2rem; font-weight: 700; color: var(--dm-text); }
.page-body .sc-prod-rating { display: inline-flex; align-items: center; gap: .2rem; font-size: .88rem; color: var(--dm-text-secondary); }
.page-body .sc-prod-rating svg { width: .95rem; height: .95rem; color: var(--dm-warning); }
.page-body .sc-prod-avail { margin-left: auto; font-size: .76rem; font-weight: 700; padding: .15rem .55rem; border-radius: var(--dm-radius-full); border: 1px solid var(--dm-success); color: var(--dm-success); }
.page-body .sc-prod[data-availability="Low stock"] .sc-prod-avail { border-color: var(--dm-warning); color: var(--dm-warning); }
.page-body .sc-prod[data-availability="Made to order"] .sc-prod-avail { border-color: var(--dm-border); color: var(--dm-text-secondary); }
.page-body .sc-prod-sku { margin: 0; font-size: .78rem; color: var(--dm-text-muted); }

/* Numbered steps */
.page-body .sc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.page-body .sc-step { display: flex; gap: .85rem; align-items: flex-start; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 1.1rem 1.2rem; }
.page-body .sc-step h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.page-body .sc-step p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--dm-text-secondary); }
.page-body .sc-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dm-primary); color: var(--dm-primary-text); font-weight: 700; font-size: .9rem; }

/* Forms */
.page-body .sc-form-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.page-body .sc-form-card { background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 1.25rem; box-shadow: var(--dm-shadow-md); }
.page-body .sc-form-notes { position: sticky; top: 1.5rem; }
.page-body .sc-try { margin: .3rem 0 0; padding-left: 1.2rem; display: grid; gap: .8rem; }
.page-body .sc-try li { line-height: 1.55; color: var(--dm-text-secondary); }
.page-body .sc-try strong { color: var(--dm-text); }

/* Effects */
.page-body .sc-effect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.page-body .sc-effect { background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 1.4rem 1.5rem; }
.page-body .sc-effect-label { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dm-primary); }
.page-body .sc-effect-big { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.25; min-height: 2.6em; margin: 0 0 1rem; color: var(--dm-text); }
.page-body .sc-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.page-body .sc-counters > div { background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 1.3rem 1rem; text-align: center; }
.page-body .sc-counters strong { display: block; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--dm-primary); }
.page-body .sc-counters span { display: block; margin-top: .35rem; font-size: .88rem; color: var(--dm-text-secondary); }
.page-body .sc-countdown { background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 2rem 1rem; }
.page-body .sc-particles { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; border-radius: var(--dm-radius-lg); border: 1px solid var(--dm-card-border); background: var(--dm-card-bg); overflow: hidden; }
.page-body .sc-particles > * { width: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.page-body .sc-particles-dark { background: #1c1917; border-color: #1c1917; }
.page-body .sc-particles-text { margin: 0; font-size: 1.35rem; font-weight: 700; text-align: center; color: var(--dm-text); position: relative; z-index: 1; }
.page-body .sc-particles-dark .sc-particles-text { color: #f5f0e8; }
.page-body .sc-firework { min-height: 220px; display: flex; align-items: center; justify-content: center; background: var(--dm-card-bg); border: 1px dashed var(--dm-border); border-radius: var(--dm-radius-lg); }

/* Card gallery labels */
.page-body .sc-layout { margin: 0 0 .45rem; font-family: var(--dm-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .78rem; color: var(--dm-text-secondary); }

/* Solid colours for the card layouts whose Domma defaults are gradients (site-wide: "no gradients") */
.page-body .card .card-gradient-indigo, .page-body .card .card-step-bg, .page-body .card .card-avatar, .page-body .card .card-quote-avatar,
.page-body .card .card-file-icon { background: var(--dm-primary) !important; color: var(--dm-primary-text) !important; }
.page-body .card .card-stat-fill, .page-body .card .card-progress-fill { background: var(--dm-primary) !important; }
.page-body .card .card-corner-badge { background: var(--dm-warning) !important; }
.page-body .card .card-overlay-text { background: rgba(0, 0, 0, .58) !important; }

/* Components */
.page-body .sc-comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.page-body .sc-comp { background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; }
.page-body .sc-comp-name { margin: 0; font-family: var(--dm-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .82rem; font-weight: 700; color: var(--dm-primary); }
.page-body .sc-comp-live { flex: 1; display: flex; flex-direction: column; gap: .8rem; align-items: center; justify-content: center; min-height: 150px; padding: 1rem 0; }
.page-body .sc-comp-live > p { margin: 0; width: 100%; }
.page-body .sc-comp-cmd { padding: .4rem .7rem; border-radius: var(--dm-radius-md); background: var(--dm-surface-raised); border: 1px solid var(--dm-border); }
.page-body .sc-comp-note { margin: 0 0 .6rem; font-size: .9rem; color: var(--dm-text-secondary); }

/* Context menu zone */
.page-body .sc-ctx-zone { text-align: center; padding: 3.5rem 1.5rem; border: 2px dashed var(--dm-primary); border-radius: var(--dm-radius-xl); background: var(--dm-card-bg); cursor: context-menu; }
.page-body .sc-ctx-zone:focus-visible { outline: 3px solid var(--dm-primary); outline-offset: 4px; }
.page-body .sc-ctx-zone h2 { margin: .6rem 0 .5rem; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.page-body .sc-ctx-zone p { margin: .3rem auto; max-width: 620px; color: var(--dm-text-secondary); line-height: 1.6; }
.page-body .sc-ctx-icon { display: inline-flex; color: var(--dm-primary); }
.page-body .sc-ctx-icon svg { width: 2.4rem; height: 2.4rem; }
.page-body .sc-hours { padding: .5rem .25rem; min-width: min(420px, 80vw); }
.page-body .sc-hours h3 { margin: .2rem 0 .8rem; }
.page-body .sc-hours-kicker { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dm-primary); }
.page-body .sc-hours dl { display: grid; grid-template-columns: auto auto; gap: .45rem 1.5rem; margin: 0 0 .9rem; }
.page-body .sc-hours dt { font-weight: 600; }
.page-body .sc-hours dd { margin: 0; text-align: right; }
.page-body .sc-hours-note { margin: 0; font-size: .85rem; color: var(--dm-text-muted); }

/* Theming regions - the element overrides in Content > Theme set the tokens; these rules use them */
.page-body .sc-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.page-body .sc-region { background: var(--dm-bg); color: var(--dm-text); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; box-shadow: var(--dm-shadow-md); }
.page-body .sc-region h3 { margin: 0; color: var(--dm-text); }
.page-body .sc-region p { margin: 0; color: var(--dm-text-secondary); line-height: 1.55; }
.page-body .sc-region .btn { align-self: flex-start; margin-top: auto; }
.page-body .sc-region-tag { font-family: var(--dm-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .78rem; color: var(--dm-primary) !important; }

@media (max-width: 1000px) {
  .page-body .sc-cards .dm-collection-display, .page-body .sc-cards .dm-collection-blocks, .page-body .sc-sites .dm-collection-display, .page-body .sc-sites .dm-collection-blocks,
  .page-body .sc-dir .dm-collection-display, .page-body .sc-dir .dm-collection-blocks, .page-body .sc-dir .cb-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-body .sc-ms-grid .dm-collection-display, .page-body .sc-ms-grid .dm-collection-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-body .sc-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-body .sc-regions { grid-template-columns: 1fr; }
  .page-body .sc-form-grid { grid-template-columns: 1fr; }
  .page-body .sc-form-notes { position: static; }
}
@media (max-width: 700px) {
  .page-body .sc-cards .dm-collection-display, .page-body .sc-cards .dm-collection-blocks, .page-body .sc-sites .dm-collection-display, .page-body .sc-sites .dm-collection-blocks,
  .page-body .sc-dir .dm-collection-display, .page-body .sc-dir .dm-collection-blocks, .page-body .sc-dir .cb-results, .page-body .sc-ms-grid .dm-collection-display, .page-body .sc-ms-grid .dm-collection-blocks,
  .page-body .sc-effect-grid, .page-body .sc-comp-grid, .page-body .sc-code-pair { grid-template-columns: 1fr; }
  .page-body .sc-look-head { flex-direction: column; gap: .5rem; }
}
/* ==== showcase end ==== */

/* ==== lead-fixes start ==== */
/* Breadcrumbs: in normal flow at the top of the content, never floating over it */
html body .site-content .dm-breadcrumbs {
  position: static !important;
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin: 0.75rem 0 0.75rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 0.8rem;
  white-space: normal;
}
html body .site-content .dm-breadcrumbs .dm-breadcrumbs-item,
html body .site-content .dm-breadcrumbs .dm-breadcrumbs-link { color: var(--dm-text-muted); }
html body .site-content .dm-breadcrumbs .dm-breadcrumbs-link:hover { color: var(--dm-primary); }
html body .site-content .dm-breadcrumbs .dm-breadcrumbs-current { color: var(--dm-text); }
html body .site-content .dm-breadcrumbs .dm-breadcrumbs-separator { color: var(--dm-text-muted); opacity: 0.6; }
@media (max-width: 768px) {
  html body .site-content .dm-breadcrumbs { padding: 0 1rem; margin-top: 0.5rem; }
}
/* ==== lead-fixes end ==== */

/* ==== partners start ==== */
.pt-steps { list-style: none; counter-reset: pt-step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.5rem 0 0; padding: 0; }
.pt-steps li { counter-increment: pt-step; position: relative; padding: 1.5rem 1.25rem 1.25rem 4.25rem; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: 10px; }
.pt-steps li::before { content: counter(pt-step); position: absolute; left: 1.25rem; top: 1.35rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: color-mix(in srgb, var(--dm-primary) 13%, transparent); color: var(--dm-primary); }
.pt-steps li strong { display: block; font-size: 1.1rem; margin-bottom: .35rem; color: var(--dm-text); }
.pt-steps li span { color: var(--dm-text-secondary); line-height: 1.55; }
.pt-note { align-self: start; padding: 1.5rem 1.5rem 1.25rem; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-left: 4px solid var(--dm-primary); border-radius: 10px; }
.pt-note h3 { margin: .35rem 0 .5rem; color: var(--dm-text); }
.pt-note p { color: var(--dm-text-secondary); line-height: 1.6; margin: 0 0 .75rem; }
.pt-note .mk-btns { margin-top: .5rem; }
.pt-teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.pt-teaser .mk-panel p { margin-bottom: .5rem; }
.pt-eco { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
/* ==== partners end ==== */

/* ==== pro-suite start ==== */
.page-body .ps-shot { display: block; width: 100%; height: auto; border-radius: var(--dm-radius-lg); border: 1px solid var(--dm-border); box-shadow: var(--dm-shadow-md); }
.page-body .ps-cap { margin: .65rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--dm-text-muted); }
.page-body .ps-umbrella { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 3rem; align-items: start; }
.page-body .ps-ones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.page-body .ps-one { background: var(--dm-card-bg); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: 1.15rem 1.25rem; }
.page-body .ps-one h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin: 0 0 .45rem; }
.page-body .ps-one h3 [data-icon] { color: var(--dm-primary); line-height: 0; }
.page-body .ps-one p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--dm-text-secondary); }
.page-body .ps-sidebar { position: sticky; top: 5rem; }
.page-body .ps-sidebar .ps-shot { max-height: 760px; object-fit: cover; object-position: top; }
.page-body .ps-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.page-body .ps-flows { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .7rem; }
.page-body .ps-flow { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 11rem; align-items: center; gap: .9rem; background: var(--dm-card-bg); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: .7rem 1rem; }
.page-body .ps-node { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .4rem .75rem; border-radius: var(--dm-radius-full); border: 1px solid var(--dm-border); background: var(--dm-surface); color: var(--dm-text); font-weight: 600; font-size: .9rem; text-align: center; text-decoration: none; }
.page-body a.ps-node:hover { border-color: var(--dm-primary); }
.page-body .ps-node--hub { border-color: var(--dm-primary); color: var(--dm-primary); }
.page-body .ps-carry { position: relative; text-align: center; font-size: .9rem; line-height: 1.4; color: var(--dm-text-secondary); padding: 0 .5rem; }
.page-body .ps-carry::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--dm-border); z-index: 0; }
.page-body .ps-carry::after { content: ""; position: absolute; right: -2px; top: calc(50% - 5px); border-left: 8px solid var(--dm-border); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.page-body .ps-carry span { position: relative; z-index: 1; background: var(--dm-card-bg); padding: 0 .6rem; display: inline-block; }
.page-body .ps-flow--both .ps-carry::before { left: 8px; }
.page-body .ps-flow--both .ps-carry { padding-left: .9rem; }
.page-body .ps-flow--both .ps-carry span::before { content: ""; position: absolute; left: -1.05rem; top: calc(50% - 6px); border-right: 8px solid var(--dm-border); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.page-body .ps-chapter { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 .5rem; }
.page-body .ps-num { font-size: .85rem; font-weight: 700; letter-spacing: .12em; color: var(--dm-primary); }
.page-body .ps-chapter h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; }
.page-body .ps-intro { max-width: 46rem; color: var(--dm-text-secondary); line-height: 1.7; margin: 0 0 2.5rem; }
.page-body .ps-tool { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.75rem; align-items: start; padding: 2.25rem 0; border-top: 1px solid var(--dm-border); }
.page-body .ps-tool:first-of-type { border-top: 0; padding-top: .5rem; }
.page-body .ps-tool--rev > :first-child { order: 2; }
.page-body .ps-tool h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: 1.4rem; margin: 0 0 .75rem; }
.page-body .ps-tool h3 a { color: inherit; text-decoration: none; }
.page-body .ps-tool h3 a:hover { color: var(--dm-primary); }
.page-body .ps-tool p { line-height: 1.7; color: var(--dm-text-secondary); margin: 0 0 .9rem; }
.page-body .ps-pro { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: var(--dm-radius-full); background: var(--dm-primary); color: #fff; }
.page-body .ps-links { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1rem 0 0; font-size: .85rem; color: var(--dm-text-muted); }
.page-body .ps-links .ps-node { font-size: .8rem; padding: .25rem .6rem; font-weight: 600; }
.page-body .ps-note { border-left: 3px solid var(--dm-primary); background: var(--dm-surface); padding: .7rem 1rem; border-radius: 0 var(--dm-radius-lg) var(--dm-radius-lg) 0; font-size: .9rem; line-height: 1.6; color: var(--dm-text-secondary); margin: 1rem 0 0; }
.page-body .ps-stack { display: grid; gap: 1.25rem; }
.page-body .ps-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.page-body .ps-jump a { display: inline-block; padding: .45rem .95rem; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-full); background: var(--dm-card-bg); color: var(--dm-text); text-decoration: none; font-weight: 600; font-size: .88rem; }
.page-body .ps-jump a:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.page-body .ps-suite .dm-collection-display { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
@media (max-width: 960px) {
  .page-body .ps-umbrella, .page-body .ps-tool, .page-body .ps-pair { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .page-body .ps-tool--rev > :first-child { order: 0; }
  .page-body .ps-sidebar { position: static; max-width: 280px; }
  .page-body .ps-flow { grid-template-columns: minmax(0, 1fr); text-align: left; gap: .45rem; }
  .page-body .ps-flow .ps-node { justify-self: start; }
  .page-body .ps-carry { text-align: left; padding: 0 0 0 1rem; }
  .page-body .ps-carry::before, .page-body .ps-carry::after { display: none; }
  .page-body .ps-carry span { padding: 0; background: none; }
  .page-body .ps-carry span::before, .page-body .ps-flow--both .ps-carry span::before { content: "\2193  "; position: static; border: 0; }
  .page-body .ps-flow--both .ps-carry span::before { content: "\2195  "; }
}
@media (max-width: 600px) {
  .page-body .ps-ones { grid-template-columns: minmax(0, 1fr); }
}
/* ==== pro-suite end ==== */

/* ==== blog start ==== */
/* Home page "From the blog" strip - Blog Pro's [blog-grid] embed */
.bl-home .blog-embed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.bl-home .blog-embed-card { margin: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.bl-home .blog-embed-card > a { display: block; line-height: 0; }
.bl-home .blog-embed-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.bl-home .blog-embed-card .card-body { padding: 1.1rem 1.25rem 1.3rem; }
.bl-home .blog-embed-card h3 { font-size: 1.1rem; line-height: 1.35; margin: 0 0 .35rem; }
.page-body .bl-home .blog-embed-card h3 a { color: var(--dm-text); text-decoration: none; }
.page-body .bl-home .blog-embed-card h3 a:hover { color: var(--dm-primary); text-decoration: underline; }
.bl-home .blog-embed-card .text-muted { color: var(--dm-text-secondary); }
.bl-home .blog-embed-card p:last-child { color: var(--dm-text-secondary); font-size: .95rem; line-height: 1.55; }
@media (max-width: 900px) { .bl-home .blog-embed-grid { grid-template-columns: 1fr; } }
/* ==== blog end ==== */

/* Floating search and back-to-top buttons: tucked to the edge on phones so
   they clear the text column (both set their size and offset inline). */
@media (max-width: 640px) {
  .site-search-floating-trigger {
    width: 40px !important;
    height: 40px !important;
    right: 6px !important;
    --ss-icon-glyph: 16px !important;
  }
  #back-to-top-btn {
    right: 6px !important;
    bottom: 16px !important;
  }
}

/* ── Run option cards: command box, copy button, button icons ──────────────
   The self-hosted card's command sits in a themed box (the hero's .mk-cmd
   look) with a $ prompt and a Copy button, wired in site-tweaks'
   inject-body.html. Theme tokens only, so it follows light and dark. */
.run-option-cmd {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 8px 0 16px;
  padding: .6rem .6rem .6rem 1rem;
  border-radius: 8px;
  background: var(--dm-surface-raised);
  border: 1px solid var(--dm-border);
}
.run-option-cmd code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  background: none !important;
  padding: 0 !important;
  color: var(--dm-text) !important;
  font-family: var(--dm-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .95rem;
}
.run-option-cmd code::before { content: "$ "; color: var(--dm-text-muted); }
.run-option-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border-radius: 6px;
  border: 1px solid var(--dm-border);
  background: var(--dm-card-bg);
  color: var(--dm-text-secondary);
  font-size: .8rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.run-option-copy:hover, .run-option-copy:focus-visible { border-color: var(--dm-primary); color: var(--dm-primary); }
.run-option-copy.is-copied { border-color: var(--dm-success); color: var(--dm-success); }
.run-option-copy [data-icon] svg { width: 14px; height: 14px; }
.run-option-ctas .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.run-option-ctas .btn [data-icon] svg { width: 1.05em; height: 1.05em; }
/* Phones: the command needs the room, so Copy drops its word (aria-label stays). */
@media (max-width: 480px) {
  .run-option-copy-text { display: none; }
  .run-option-copy { padding: .35rem; }
  .run-option-cmd { padding: .5rem .5rem .5rem .75rem; gap: .4rem; }
  .run-option-cmd code { font-size: .8rem; }
}
/* The smallest phones (360px): drop the $ prompt and some padding so the whole command shows. */
@media (max-width: 380px) {
  .run-option-card-body { padding-left: 18px; padding-right: 18px; }
  .run-option-cmd code::before { content: none; }
  .run-option-cmd code { font-size: .76rem; }
}
/* Managed card: the photo's subject is in its top fifth, so a centred crop
   cut her head off. Anchor near the top instead. */
.run-option-card[data-slug="managed"] .run-option-banner { background-position: center 8%; }

/* Make the showcase hover firework an interactive target. */
.page-body .sc-firework .firework-on-hover {pointer-events: auto; --dm-fw-size: var(--dm-fw-particle-size);}

.page-body .sc-firework .firework-on-hover:hover::before {animation-name: dm-fw-explode;}
.page-body .sc-firework .firework-on-hover:hover::after {animation-name: dm-fw-explode-secondary;}

/* Pricing - the Pro Tools price list (pages/pricing, blocks/tool-price-row.html, components/pro-prices.dmc) */
.mk-prices > * { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: .75rem; }
.mk-prices > * > * { min-width: 0; }
html body .page-body a.mk-price-row, a.mk-price-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; background: var(--dm-card-bg); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); color: var(--dm-text); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
html body .page-body a.mk-price-row:hover, a.mk-price-row:focus-visible { border-color: var(--dm-primary); box-shadow: var(--dm-shadow-md); color: var(--dm-text); text-decoration: none; }
.mk-price-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-primary) 13%, transparent); color: var(--dm-primary); }
.mk-price-icon svg { width: 1.15rem; height: 1.15rem; }
.mk-price-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mk-price-name { font-size: 1rem; line-height: 1.3; }
.mk-price-tag { font-size: .85rem; color: var(--dm-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-price-amt { flex: none; font-weight: 700; color: var(--dm-text-muted); white-space: nowrap; }
.mk-price-row.is-priced .mk-price-amt { color: var(--dm-primary); }
.mk-price-row[data-pricing="poa"] .mk-price-amt { font-weight: 600; font-size: .9rem; }
html body .page-body a.mk-price-row, html body .page-body a.mk-price-row * { text-decoration: none !important; border-bottom: 0; }
@media (max-width: 480px) {
    .mk-prices > * { grid-template-columns: minmax(0, 1fr); }
    html body .page-body a.mk-price-row, a.mk-price-row { flex-wrap: wrap; row-gap: .35rem; }
    .mk-price-tag { white-space: normal; }
    .mk-price-amt { flex-basis: 100%; padding-left: 3.1rem; }
}

/* DCBW Consulting Ltd project brief and running estimate. */
.dc-project-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 2rem; align-items: start; }
.dc-project-form { min-width: 0; padding: clamp(1rem, 2vw, 2rem); border: 1px solid var(--dm-card-border); border-radius: var(--dm-radius-lg); background: var(--dm-card-bg); }
.dc-project-estimate { min-width: 0; position: sticky; top: 1.5rem; }
.dc-project-privacy { margin-top: 1.5rem; font-size: .85rem; line-height: 1.6; color: var(--dm-text-secondary); }
.dc-project-form textarea[readonly] { background: var(--dm-surface); font-size: .9rem; }
@media (max-width: 1100px) {
    .dc-project-layout { grid-template-columns: minmax(0, 1fr); }
    .dc-project-estimate { grid-row: 1; position: sticky; top: 4.5rem; z-index: 10; }
}

.dc-project-intro-section { padding-bottom: 0; }
@media (max-width: 600px) {
    .dc-project-layout, .dc-project-intro { padding-left: 0; padding-right: 0; }
    .dc-project-form { padding: 0; border: 0; background: transparent; }
    .dc-project-layout { gap: 1rem; }
}

/* Keep the trial invitation legible in the main menu across site themes. */
.cms-nav-trial > a.dm-nav-pill {
    color: var(--dm-primary-text) !important;
    font-weight: 600;
}
.cms-nav-trial > a.dm-nav-pill:hover,
.cms-nav-trial > a.dm-nav-pill:focus-visible {
    background: var(--dm-primary-hover) !important;
    color: var(--dm-primary-hover-text) !important;
}

/* Marketing cards: colourful surfaces, prominent icons and progressive motion. */
.page-body :is(.mk-panel, .mk-feat, .tl-card, .mk-site, .tu-card, .run-option-card, .tp-benefit, .tp-pair) {
    --card-accent: #ea580c;
    --card-end: #db2777;
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 17%, var(--dm-card-bg)), var(--dm-card-bg) 65%, color-mix(in srgb, var(--card-end) 9%, var(--dm-card-bg)));
    border-color: color-mix(in srgb, var(--card-accent) 36%, var(--dm-card-border));
    border-top: 4px solid var(--card-accent);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--card-accent) 10%, transparent);
    transition: translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.page-body :is(.mk-panel, .mk-feat, .tl-card, .mk-site, .tu-card, .run-option-card, .tp-benefit, .tp-pair):nth-child(4n+2) { --card-accent: #0284c7; --card-end: #7c3aed; }
.page-body :is(.mk-panel, .mk-feat, .tl-card, .mk-site, .tu-card, .run-option-card, .tp-benefit, .tp-pair):nth-child(4n+3) { --card-accent: #7c3aed; --card-end: #db2777; }
.page-body :is(.mk-panel, .mk-feat, .tl-card, .mk-site, .tu-card, .run-option-card, .tp-benefit, .tp-pair):nth-child(4n+4) { --card-accent: #059669; --card-end: #0891b2; }
.page-body .tl-card[data-tier="built-in"] { --card-accent: #0284c7; --card-end: #7c3aed; }
.page-body .tl-card[data-tier="free"] { --card-accent: #059669; --card-end: #0891b2; }
.page-body .tl-card[data-tier="pro"] { --card-accent: #7c3aed; --card-end: #db2777; }
.page-body :is(.mk-panel-icon, .mk-feat[data-area] .mk-feat-icon, .run-option-icon-chip) {
    background: linear-gradient(135deg, var(--card-accent), var(--card-end));
    color: #fff;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--card-accent) 25%, transparent);
    transition: rotate .25s ease, scale .25s ease;
}
.page-body .mk-panel-icon { width: 3rem; height: 3rem; }
.page-body .mk-panel-icon svg { width: 1.5rem; height: 1.5rem; }
.page-body :is(.mk-panel h3, .tl-card-name, .mk-site-name, .tu-card-title) { font-size: 1.22rem; font-weight: 750; line-height: 1.35; }
.page-body :is(.tl-card-body, .mk-site-body, .tu-card-body) { background: transparent; }
.page-body :is(.tl-card-foot, .mk-site-uses) { border-top: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent); padding-top: .75rem; }
.page-body :is(.mk-panel-more, .tl-card-more, .mk-site-cta, .tu-card-cta) { font-weight: 750; }
.page-body :is(.tl-card-img, .tu-card-img, .mk-panel-photo img) { transition: scale .4s ease; }
.page-body :is(.mk-panel-photo, .tu-card-media) { overflow: hidden; }
.page-body :is(a.mk-panel, a.mk-feat, a.tl-card, a.mk-site, a.tu-card, .run-option-card):focus-within {
    outline: 3px solid var(--dm-primary); outline-offset: 4px;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--card-accent) 22%, transparent);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .page-body :is(a.mk-panel, a.mk-feat, a.tl-card, a.mk-site, a.tu-card, .run-option-card):hover {
        transform: none; translate: 0 -6px;
        border-color: var(--card-accent);
        box-shadow: 0 16px 32px color-mix(in srgb, var(--card-accent) 22%, transparent);
    }
    .page-body :is(.mk-panel, .mk-feat, .run-option-card):hover :is(.mk-panel-icon, .mk-feat-icon, .run-option-icon-chip) { rotate: -5deg; scale: 1.07; }
    .page-body :is(.tl-card, .tu-card, .mk-panel):hover :is(.tl-card-img, .tu-card-img, .mk-panel-photo img) { scale: 1.035; }
}
/* Scroll entrance only when supported; content is always visible otherwise.
   Use individual scale so existing row reveal transforms remain independent. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .page-body :is(.mk-panel, .mk-feat, .tl-card, .mk-site, .tu-card) {
            animation: marketing-card-arrive linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
        @keyframes marketing-card-arrive { from { opacity: .65; scale: .97; } to { opacity: 1; scale: 1; } }
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-body :is(.mk-panel, .mk-feat, .tl-card, .mk-site, .tu-card, .run-option-card, .tp-benefit, .tp-pair),
    .page-body :is(.mk-panel-icon, .mk-feat-icon, .run-option-icon-chip, .tl-card-img, .tu-card-img, .mk-panel-photo img) {
        animation: none !important; transition: none !important;
        transform: none !important; translate: none !important; rotate: none !important; scale: none !important;
    }
}

/* Keep the five footer groups on one row with space for readable link labels. */
@media (min-width: 1000px) {
    #site-footer.cms-footer--showcase .cms-footer-top { grid-template-columns: 1fr; gap: 2rem; }
    #site-footer.cms-footer--showcase .cms-footer-brand { max-width: 36rem; }
    #site-footer.cms-footer--showcase .footer-nav--columns > ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Honour the site's own motion switch as well as the operating system setting. */
html.dm-reduced-motion .page-body :is(.mk-panel, .mk-feat, .tl-card, .mk-site, .tu-card, .run-option-card, .tp-benefit, .tp-pair),
html.dm-reduced-motion .page-body :is(.mk-panel-icon, .mk-feat-icon, .run-option-icon-chip, .tl-card-img, .tu-card-img, .mk-panel-photo img) {
    animation: none !important; transition: none !important;
    transform: none !important; translate: none !important; rotate: none !important; scale: none !important;
}

/* Prominent icon tiles throughout marketing pages, without grey backplates. */
.page-body :is(.mk-panel-icon, .mk-feat[data-area] .mk-feat-icon, .mk-rel[data-area] .mk-rel-icon, .quickstart-step-icon, .run-option-icon-chip, .tp-hero-icon, .tp-benefit-icon, .tp-pair-icon, .mk-price-icon) {
    background: linear-gradient(135deg, var(--card-accent, #ea580c), var(--card-end, #db2777));
    color: #fff;
    border: 0;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--card-accent, #ea580c) 24%, transparent);
}
.page-body :is(.tp-benefit-icon, .tp-hero-icon) { width: 3rem; height: 3rem; }
.page-body :is(.tp-pair-icon, .mk-price-icon) { width: 2.6rem; height: 2.6rem; }
.page-body svg:is(.mk-panel-icon, .tp-benefit-icon, .tp-hero-icon, .tp-pair-icon, .mk-price-icon) { padding: .5rem; box-sizing: border-box; }
.page-body :is(.tp-benefit-icon, .tp-hero-icon) svg { width: 1.7rem; height: 1.7rem; }
.page-body :is(.tp-pair-icon, .mk-price-icon) svg { width: 1.5rem; height: 1.5rem; }
.page-body :is(.quickstart-step, .mk-rel):nth-child(even) { --card-accent: #7c3aed; --card-end: #db2777; }

/* Live-offer additions have no collection entry id. Give every price wrapper
   the same layout, including rows inserted after the initial render. */
.page-body .mk-prices .dm-collection-blocks > :has(> .mk-price-row) {
    width: 100%; min-width: 0; display: flex; flex-direction: column; align-self: stretch;
}
.page-body .mk-prices .mk-price-row { width: 100%; box-sizing: border-box; flex: 1 1 auto; }
@media (max-width: 480px) {
    .page-body .mk-prices .mk-price-amt { padding-left: calc(2.6rem + .85rem); }
}

/* Readable, recognisable links in page copy, including Markdown links. */
html body .page-body a[href]:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]):not(.dm-breadcrumbs-link):not([data-menu-hover] a):not([data-menu-active] a):is(:not([class]), [class=""]):not(:has(img, svg)):not(nav a) {
    --copy-link-ink: var(--cms-link-color, color-mix(in srgb, var(--dm-primary) 55%, #a21caf));
    color: var(--copy-link-ink) !important;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--copy-link-ink) 70%, #ea580c);
    text-decoration-thickness: 2px;
    text-underline-offset: .22em;
    text-decoration-skip-ink: auto;
    border-radius: .15em;
    transition: color .18s ease, text-decoration-color .18s ease, background-color .18s ease;
    overflow-wrap: anywhere;
}
html body .page-body a[href]:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]):not(.dm-breadcrumbs-link):not([data-menu-hover] a):not([data-menu-active] a):is(:not([class]), [class=""]):not(:has(img, svg)):not(nav a):hover {
    color: var(--dm-primary-hover) !important;
    background-color: color-mix(in srgb, #a21caf 9%, transparent);
    text-decoration-color: #ea580c;
}
html body .page-body a[href]:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]):not(.dm-breadcrumbs-link):not([data-menu-hover] a):not([data-menu-active] a):is(:not([class]), [class=""]):not(:has(img, svg)):not(nav a):focus-visible,
html body .page-body a.cms-link-callout[href]:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]):not(.dm-breadcrumbs-link):not([data-menu-hover] a):not([data-menu-active] a):focus-visible {
    outline: 3px solid var(--dm-primary); outline-offset: 4px;
}
/* Standalone reading invitations get a clear, generous click target. */
html body .page-body a.cms-link-callout[href]:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]):not(.dm-breadcrumbs-link):not([data-menu-hover] a):not([data-menu-active] a) {
    display: inline-block; max-width: 100%; box-sizing: border-box;
    padding: .8rem 1.1rem; border: 1px solid color-mix(in srgb, #8b5cf6 40%, var(--dm-border));
    border-left: 4px solid #8b5cf6; border-radius: .6rem;
    background: linear-gradient(110deg, color-mix(in srgb, #8b5cf6 12%, var(--dm-card-bg)), color-mix(in srgb, #f26b3a 10%, var(--dm-card-bg)));
    color: color-mix(in srgb, var(--dm-primary) 55%, #a21caf) !important;
    font-weight: 750; font-size: 1.05em; line-height: 1.55;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em;
    text-decoration-color: color-mix(in srgb, #8b5cf6 60%, transparent);
    transition: border-color .18s ease, box-shadow .18s ease;
}
html body .page-body a.cms-link-callout[href]:not([class*="btn"]):not(.plugin-card):not([class*="nav"]):not([class*="footer"]):not(.dm-breadcrumbs-link):not([data-menu-hover] a):not([data-menu-active] a):hover {
    color: var(--dm-primary-hover) !important; border-color: #ea580c;
    box-shadow: 0 5px 16px color-mix(in srgb, #8b5cf6 12%, transparent);
    text-decoration-color: #ea580c;
}
/* Card reading links stay visibly actionable even before hover. */
html body .page-body :is(.mk-panel-more, .tl-card-more, .mk-site-cta, .tu-card-cta) {
    color: color-mix(in srgb, var(--dm-primary) 55%, #a21caf) !important;
    font-weight: 750; text-decoration: underline;
    text-decoration-color: color-mix(in srgb, #8b5cf6 65%, transparent);
    text-decoration-thickness: 2px; text-underline-offset: .25em;
}
#site-footer .footer-nav--columns a:not(.cms-footer-col-title) { font-weight: 550; }
#site-footer .footer-nav--columns a:not(.cms-footer-col-title):is(:hover, :focus-visible) {
    color: var(--dm-primary); text-decoration: underline; text-decoration-color: #f26b3a;
    text-decoration-thickness: 2px; text-underline-offset: .25em;
}
@media (prefers-reduced-motion: reduce) {
    .page-body a { transition: none !important; }
}
html.dm-reduced-motion .page-body a { transition: none !important; }

/* Quiet footer navigation with small category accents. */
#site-footer.cms-footer--showcase .footer-nav--columns > ul {
    gap: 2rem; align-items: start;
}
#site-footer .footer-category-group { --footer-accent: #c2410c; min-width: 0; }
#site-footer .footer-category-learn { --footer-accent: #0369a1; }
#site-footer .footer-category-partners { --footer-accent: #7e22ce; }
#site-footer .footer-category-legal { --footer-accent: #047857; }
#site-footer .footer-category-company { --footer-accent: #be185d; }
#site-footer .footer-category-group .cms-footer-col-title {
    display: flex; align-items: center; gap: .45rem;
    margin-bottom: .75rem; font-size: .92rem; font-weight: 650;
    color: var(--dm-text); text-decoration: none;
}
#site-footer .footer-category-group .cms-footer-col-title .cms-footer-ic {
    width: 1rem; height: 1rem; padding: 0; flex: none; margin: 0;
    color: var(--footer-accent); background: none; box-shadow: none;
}
#site-footer .footer-category-group > ul { gap: .2rem; }
#site-footer .footer-category-group > ul > li > a {
    display: block; padding-block: .2rem; line-height: 1.5;
    color: var(--dm-text-secondary); font-size: .84rem; font-weight: 400;
    overflow-wrap: anywhere; text-decoration: none;
}
#site-footer .footer-category-group a:is(:hover, :focus-visible) {
    color: var(--dm-text); text-decoration: underline;
    text-decoration-color: var(--footer-accent); text-decoration-thickness: 1px; text-underline-offset: .2em;
}
#site-footer .footer-category-group a:focus-visible { outline: 2px solid var(--footer-accent); outline-offset: 3px; }
@media (min-width: 700px) and (max-width: 999px) {
    #site-footer.cms-footer--showcase .footer-nav--columns > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
    #site-footer.cms-footer--showcase .footer-nav--columns > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
}

/* Comparison page: restrained blue-grey accents and light table shading. */
.cms-compare-page { --compare-accent: #648399; }
.cms-compare-page .mk-kicker { color: var(--dm-text-secondary); }
.cms-compare-page :is(#at-a-glance, #one-by-one, .mk-final) {
    background: color-mix(in srgb, var(--compare-accent) 4%, var(--dm-card-bg));
}
.cms-compare-page .mk-compare {
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-md);
}
.cms-compare-page .mk-compare table { margin: 0; border-collapse: collapse; }
.cms-compare-page .mk-compare thead th {
    background: color-mix(in srgb, var(--compare-accent) 12%, var(--dm-card-bg));
    color: var(--dm-text);
    padding: 1rem;
    font-weight: 600;
    border-color: var(--dm-border);
}
.cms-compare-page .mk-compare tbody td {
    padding: 1rem;
    vertical-align: top;
    color: var(--dm-text);
    border-color: var(--dm-border);
    background: var(--dm-card-bg);
}
.cms-compare-page .mk-compare tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--compare-accent) 3%, var(--dm-card-bg));
}
.cms-compare-page .mk-compare tbody tr:first-child td {
    background: color-mix(in srgb, var(--compare-accent) 7%, var(--dm-card-bg));
}
.cms-compare-page .cms-compare-migration .mk-prose {
    padding: 2rem;
    border-left: 2px solid color-mix(in srgb, var(--compare-accent) 40%, var(--dm-border));
    background: color-mix(in srgb, var(--compare-accent) 4%, var(--dm-card-bg));
}

/* Keep the comparison hierarchy prominent, with colour confined to small accents. */
.cms-compare-page .cms-compare-title-accent { color: color-mix(in srgb, #547d99 75%, var(--dm-text)); }
.cms-compare-page .mk-hero-lede { color: var(--dm-text-secondary); line-height: 1.75; }
.cms-compare-page #at-a-glance { --compare-accent: #547d99; }
.cms-compare-page .mk-sec:not(.mk-band) .mk-compare { --compare-accent: #50857b; }
.cms-compare-page .mk-compare thead th { background: color-mix(in srgb, var(--compare-accent) 18%, var(--dm-card-bg)); }
.cms-compare-page .mk-compare tbody tr:first-child td { background: color-mix(in srgb, var(--compare-accent) 10%, var(--dm-card-bg)); }
.cms-compare-page .mk-compare tbody tr:first-child td:first-child { border-left: 2px solid var(--compare-accent); }
.cms-compare-cards > .dm-static-block { min-width: 0; height: 100%; }

/* ── Zoomable screenshots ([image ... zoom="true" /]) ─────────────────────────
   The shortcode wraps the picture (figure > span.dm-image-frame > img, or spans
   when it shares a line with other markup), so a screenshot class lands on the
   wrapper: the wrapper keeps the frame look and the picture fills it. */
.page-body .dm-image:is(.ps-shot, .mk-shot, .sc-shot) { overflow: hidden; max-width: 100%; }
/* A bare <img class="mk-shot"> took .page-body img's 6px corners, not its own 14px. */
.page-body .dm-image.mk-shot { border-radius: 6px; }
.page-body .dm-image:is(.ps-shot, .sc-shot), .mk-split .dm-image, .mk-hero-photo .dm-image { margin: 0; }
.page-body .dm-image:is(.ps-shot, .mk-shot, .sc-shot) :is(.dm-image-frame, .dm-image-img),
.tp-frame .dm-image, .tp-frame .dm-image-frame { display: block; width: 100%; margin: 0; }

/* Enquiry page: a friendly introduction and a two-step conversation. */
.enq-page {
  --enq-violet: #6d3ec4;
  --enq-teal: #087e74;
  max-width: 1160px;
  margin: 1.5rem auto 4rem;
}
.enq-hero {
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid color-mix(in srgb, var(--enq-violet) 14%, var(--dm-border));
  border-radius: 1.5rem;
  background: radial-gradient(ellipse at 100% 0%, #e1d5ff66, transparent 60%),
              radial-gradient(ellipse at 0% 100%, #b6eee54d, transparent 60%), var(--dm-card-bg);
}
.enq-kicker {
  display: inline-block;
  color: var(--enq-violet);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.6;
}
.enq-hero > .enq-kicker {
  padding: .4rem .75rem;
  border-radius: 2rem;
  background: color-mix(in srgb, var(--enq-violet) 9%, var(--dm-card-bg));
}
.enq-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 1.2rem 0;
  font-weight: 800;
}
.enq-headline-accent { display: block; }
.enq-hero > p {
  max-width: 60ch;
  color: var(--dm-text-secondary);
  font-size: 1.1rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.enq-reassurance { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .8rem; color: var(--dm-text-secondary); }
.enq-reassurance > span { display: inline-flex; align-items: center; gap: .3rem; }
.enq-reassurance > span::before { content: '\2713'; color: var(--enq-teal); font-weight: 800; margin-right: .15rem; }
.enq-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; margin-top: 2rem; }
.enq-form-card {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--dm-card-bg);
  border: 1px solid var(--dm-card-border);
  border-top: 4px solid var(--enq-violet);
  border-radius: 1.25rem;
  box-shadow: 0 12px 35px #30224f08;
}
.enq-form-heading h2 { margin: .6rem 0; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; }
.enq-form-heading p { color: var(--dm-text-secondary); line-height: 1.65; font-size: .95rem; margin-bottom: 1.6rem; }
.enq-form-card .cms-form-embed { min-width: 0; }
.enq-form-card .form-input, .enq-form-card .input-group { border-radius: .6rem; }
.enq-form-card textarea { resize: vertical; min-height: 9rem; }
.enq-form-card .form-hint { display: block; margin-top: .35rem; color: var(--dm-text-secondary); font-weight: 400; line-height: 1.5; }
.enq-form-card .form-label { color: var(--dm-text); font-weight: 600; }
.enq-form-card .wizard { --dm-primary: var(--enq-violet); }
.enq-form-card .wizard-step.card { border: 0; box-shadow: none; background: transparent; }
.enq-form-card .wizard-header { padding: 0 0 1.25rem; border-bottom: 1px solid var(--dm-border); background: transparent; }
.enq-form-card .wizard-content { padding: 1.25rem 0; }
.enq-form-card .wizard-nav { padding: 1rem 0 0; border-top: 1px solid var(--dm-border); background: transparent; }
.enq-form-card .wizard-next, .enq-form-card .wizard-submit { background: var(--enq-violet); border-color: var(--enq-violet); color: #fff; border-radius: .65rem; }
.enq-form-card .wizard-next:hover, .enq-form-card .wizard-submit:hover { filter: brightness(.9); }
.enq-form-card :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--enq-violet); outline-offset: 3px; }
.enq-privacy { border-top: 1px solid var(--dm-border); padding-top: 1rem; margin: 1.5rem 0 0; color: var(--dm-text-secondary); font-size: .75rem; line-height: 1.6; }
.enq-aside { min-width: 0; }
.enq-next { padding: 1.5rem; border: 1px solid var(--dm-card-border); border-radius: 1.25rem; background: var(--dm-card-bg); }
.enq-next > h3:first-child { font-size: 1.4rem; line-height: 1.3; margin: 0 0 1.1rem; }
.enq-photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: center 42%; border-radius: .75rem; margin: 0 0 1.4rem; }
.enq-next h3 { font-size: 1rem; }
.enq-next-steps { list-style: none; padding: 0; margin: 1rem 0 0; counter-reset: enq-step; }
.enq-next-steps li { position: relative; padding: 0 0 1.25rem 2.8rem; counter-increment: enq-step; }
.enq-next-steps li:last-child { padding-bottom: 0; }
.enq-next-steps li::before { content: counter(enq-step, decimal-leading-zero); position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 2rem; height: 2rem; font-size: .7rem; font-weight: 800; color: var(--enq-teal); background: color-mix(in srgb, var(--enq-teal) 10%, var(--dm-card-bg)); border-radius: .65rem; }
.enq-next-steps strong { display: block; margin-bottom: .25rem; font-size: .9rem; }
.enq-next-steps span { display: block; color: var(--dm-text-secondary); font-size: .83rem; line-height: 1.65; }
.enq-managed { padding: 1.4rem 1.5rem; margin-top: 1rem; border-radius: 1.25rem; background: color-mix(in srgb, var(--enq-teal) 7%, var(--dm-card-bg)); border: 1px solid color-mix(in srgb, var(--enq-teal) 22%, var(--dm-card-border)); }
.enq-managed .enq-kicker { color: var(--enq-teal); }
.enq-managed h3 { margin: .5rem 0 .75rem; font-size: 1.2rem; }
.enq-managed p { color: var(--dm-text-secondary); font-size: .85rem; line-height: 1.65; margin: .5rem 0 0; }
.enq-browse { text-align: center; margin: 1rem 0; color: var(--dm-text-secondary); font-size: .8rem; }
[data-mode="dark"] .enq-page { --enq-violet: #bba0ff; --enq-teal: #6ddbc8; }
[data-mode="dark"] .enq-form-card :is(.wizard-next, .wizard-submit) { color: #201338; }
@media (max-width: 800px) {
  .enq-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .enq-page { width: calc(100vw - 2rem); max-width: none; margin: .75rem calc(50% - 50vw + 1rem) 3rem; }
  .enq-hero { border-radius: 1.1rem; }
  .enq-reassurance { flex-direction: column; gap: .6rem; }
}

/* Legal pages: shared navigation and a calm, readable policy document. */
.policy-page {
  --policy-accent: #7051ac;
  --policy-soft: color-mix(in srgb, var(--policy-accent) 7%, var(--dm-card-bg, #fff));
  --cms-link-color: var(--policy-accent);
  --cms-link-hover-color: var(--dm-text);
  width: min(1120px, calc(100vw - 4rem));
  margin: 1.5rem calc(50% - min(560px, 50vw - 2rem)) 4rem;
  color: var(--dm-text);
}
.policy-page *, .policy-page *::before, .policy-page *::after { box-sizing: border-box; }
.policy-page-cookies { --policy-accent: #167466; }
.policy-page-gdpr { --policy-accent: #4169a3; }
.policy-page h1, .policy-page h2, .policy-page p { margin-top: 0; }
.policy-hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.75rem, 4vw, 3.5rem); border: 1px solid color-mix(in srgb, var(--policy-accent) 15%, var(--dm-border)); border-radius: 1.5rem; background: linear-gradient(120deg, var(--dm-card-bg), var(--policy-soft)); }
.policy-page .policy-kicker { margin: 0 0 1rem; color: var(--policy-accent); font-size: .68rem; font-weight: 800; letter-spacing: .13em; line-height: 1.6; }
.policy-page h1 { margin: 0 0 1rem; font-size: clamp(2.3rem, 4.4vw, 3.65rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }
.policy-page .policy-intro { max-width: 54ch; margin: 0 0 1.5rem; color: var(--dm-text-secondary); font-size: 1.04rem; line-height: 1.75; }
.policy-page .policy-date { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--dm-text-secondary); font-size: .76rem; }
.policy-date svg { width: 15px; height: 15px; }
.policy-hero-symbol { display: grid; place-items: center; flex-shrink: 0; width: 116px; height: 116px; padding: 32px; color: var(--policy-accent); background: color-mix(in srgb, var(--policy-accent) 9%, var(--dm-card-bg)); border: 1px solid color-mix(in srgb, var(--policy-accent) 18%, var(--dm-border)); border-radius: 30px; transform: rotate(-7deg); }
.policy-hero-symbol svg { display: block; width: 100%; height: 100%; }
.policy-tabs { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.25rem 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--dm-border); }
.policy-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: .65rem 1rem; border-radius: .65rem; font-size: .82rem; font-weight: 600; --cms-link-color: var(--dm-text-secondary); }
.policy-tabs a[aria-current="page"] { background: var(--policy-soft); --cms-link-color: var(--policy-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--policy-accent) 18%, transparent); }
.policy-page .policy-tabs a, .policy-page .policy-contents a { text-decoration: none !important; }
.policy-tabs a:hover, .policy-contents a:hover { background: var(--policy-soft); }
.policy-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.75rem; align-items: start; }
.policy-aside { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; padding: .5rem .25rem .5rem 0; }
.policy-contents ol { counter-reset: policy-nav; list-style: none; margin: 0; padding: 0; }
.policy-contents li { counter-increment: policy-nav; margin: 0 0 .2rem; }
.policy-contents a { display: flex; gap: .6rem; padding: .55rem .65rem; border-radius: .5rem; font-size: .78rem; line-height: 1.5; --cms-link-color: var(--dm-text-secondary); }
.policy-contents a::before { content: counter(policy-nav, decimal-leading-zero); flex-shrink: 0; padding-top: .1rem; color: var(--policy-accent); font-size: .65rem; font-weight: 700; }
.policy-help { margin-top: 1.5rem; padding: 1.25rem; background: var(--policy-soft); border: 1px solid var(--dm-border); border-radius: .85rem; }
.policy-help > svg { width: 22px; height: 22px; color: var(--policy-accent); }
.policy-page .policy-help h2 { margin: .75rem 0 .5rem; font-size: 1rem; line-height: 1.4; }
.policy-page .policy-help p { margin-bottom: .5rem; color: var(--dm-text-secondary); font-size: .78rem; }
.policy-help a { overflow-wrap: anywhere; font-size: .74rem; }
.policy-document { min-width: 0; padding: .5rem clamp(1.25rem, 3vw, 2.5rem) 0; border: 1px solid var(--dm-border); border-radius: 1rem; background: var(--dm-card-bg); }
.policy-document > p:first-child { padding-top: 1.5rem; }
.policy-section { padding: 1.75rem 0; scroll-margin-top: 7rem; }
.policy-section + .policy-section { border-top: 1px solid var(--dm-border); }
.policy-page .policy-section h2 { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 1.1rem; color: var(--dm-text); font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.4; }
.policy-number { color: var(--policy-accent); font-size: .7rem; font-weight: 700; letter-spacing: .03em; }
.policy-document p, .policy-document li { color: var(--dm-text-secondary); font-size: .94rem; line-height: 1.85; overflow-wrap: anywhere; }
.policy-document strong { color: var(--dm-text); }
.policy-document p { margin-bottom: 1rem; }
.policy-document ul { padding-left: 1.25rem; margin-block: .75rem 1rem; }
.policy-document li { margin-bottom: .45rem; padding-left: .3rem; }
.policy-document li::marker { color: var(--policy-accent); }
.policy-section > :last-child { margin-bottom: 0; }
.policy-document .table-responsive { max-width: 100%; margin: 1.25rem 0; border: 1px solid var(--dm-border); border-radius: .65rem; }
.policy-document table { min-width: 480px; margin: 0; font-size: .78rem; line-height: 1.65; }
.policy-document th { background: var(--policy-soft); color: var(--dm-text); font-size: .75rem; }
.policy-document th, .policy-document td { padding: .9rem 1rem; vertical-align: top; }
.policy-document td { min-width: 115px; color: var(--dm-text-secondary); }
.policy-page-gdpr .policy-section:first-of-type + .policy-section table { min-width: 620px; }
.policy-end { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; padding: 1.5rem 2rem; border: 1px solid var(--dm-border); border-radius: 1rem; background: var(--policy-soft); }
.policy-end > svg { width: 30px; height: 30px; flex-shrink: 0; color: var(--policy-accent); }
.policy-page .policy-end h2 { margin: 0 0 .35rem; font-size: 1.1rem; line-height: 1.4; }
.policy-page .policy-end p { margin: 0; color: var(--dm-text-secondary); font-size: .83rem; line-height: 1.7; }
.policy-end > a { margin-left: auto; font-size: .85rem; white-space: nowrap; }
.policy-page a:focus-visible { outline: 3px solid var(--policy-accent); outline-offset: 4px; }
[data-mode="dark"] .policy-page { --policy-accent: #c1a9ef; }
[data-mode="dark"] .policy-page-cookies { --policy-accent: #80d7c5; }
[data-mode="dark"] .policy-page-gdpr { --policy-accent: #9ec3ff; }
@media (max-width: 850px) {
  .policy-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .policy-aside { position: static; max-height: none; padding: 0; }
  .policy-contents { padding: 1.25rem; border: 1px solid var(--dm-border); border-radius: .85rem; }
  .policy-contents ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .5rem; }
  .policy-help { display: none; }
  .policy-hero-symbol { width: 80px; height: 80px; padding: 22px; border-radius: 22px; }
}
@media (max-width: 550px) {
  .policy-page { width: calc(100vw - 2rem); margin: .75rem calc(50% - 50vw + 1rem) 3rem; }
  .policy-hero { padding: 1.75rem 1.4rem; border-radius: 1rem; }
  .policy-hero-symbol { display: none; }
  .policy-tabs { gap: .3rem; }
  .policy-tabs a { padding: .6rem .7rem; font-size: .72rem; }
  .policy-contents { padding: 1rem; }
  .policy-contents a { padding: .5rem .3rem; font-size: .72rem; }
  .policy-contents ol { column-gap: .5rem; }
  .policy-document { padding-inline: 1.1rem; }
  .policy-section { padding: 1.5rem 0; }
  .policy-document p, .policy-document li { font-size: .9rem; }
  .policy-end { padding: 1.25rem; flex-wrap: wrap; gap: 1rem; }
  .policy-end > a { margin-left: 0; }
}

/* Footer destinations share the policy page shell, with space for interactive content. */
.footer-page-product { --policy-accent: #9c4a27; }
.footer-page-learn { --policy-accent: #4169a3; }
.footer-page-partners { --policy-accent: #7051ac; }
.footer-page-company { --policy-accent: #167466; }
.footer-page .footer-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: clamp(1.5rem, 3vw, 2.75rem); }
.footer-hero > div:first-child { min-width: 0; }
.footer-page .footer-hero h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
.footer-page .footer-hero p:not(.policy-kicker) { color: var(--dm-text-secondary); line-height: 1.75; font-size: .96rem; max-width: 65ch; }
.footer-page .footer-hero :is(.mk-hero-photo, .tl-hero-photo, .footer-hero-photo) { width: 230px; height: 220px; padding: 0; margin: 0; overflow: hidden; border-radius: .9rem; border: 1px solid var(--dm-border); }
.footer-page .footer-hero :is(.mk-hero-photo, .footer-hero-photo) img { display: block; width: 100%; height: 100%; object-fit: cover; }
.footer-page .footer-hero > img { object-fit: cover; }
.footer-page .footer-hero .mk-btns { margin-top: 1rem; justify-content: flex-start; }
.footer-page .footer-hero :is(.mk-tags, .tl-stats, .tu-facts, .enq-reassurance) { margin-top: 1rem; }
.footer-page .policy-tabs { gap: .3rem; }
.footer-page .policy-tabs a { font-size: .75rem; padding: .55rem .75rem; }
.footer-page .policy-contents ul { list-style: none; padding: 0; margin: 0; }
.footer-page .policy-contents ul a::before { content: '↗'; }
.footer-page .policy-contents a[aria-current="page"] { background: var(--policy-soft); font-weight: 700; --cms-link-color: var(--policy-accent); }
.footer-page .footer-document { padding: clamp(1.15rem, 2vw, 2rem); overflow-wrap: anywhere; }
.footer-page .footer-document :is(.mk-wrap, .mk-narrow, .tl-gutter, .mk-sec, .mk-sec-tight, .tl-band, .mk-band, .mk-final, .enq-page) { width: auto; max-width: none; margin-inline: 0; padding-inline: 0; }
.footer-page .footer-document :is(.mk-sec, .mk-sec-tight, .mk-band, .tl-band) { padding-block: 1.5rem; margin-block: 0; }
.footer-page .footer-document > :is(.mk-sec, .mk-sec-tight, .mk-band, .tl-band):first-child { padding-top: 0; }
.footer-page .footer-document :is(.mk-band, .tl-band) { background: transparent; border-top: 1px solid var(--dm-border); border-bottom: 0; }
.footer-page .footer-document .mk-final { border-radius: .8rem; margin-top: 1.5rem; padding: 1.5rem; background: var(--policy-soft); }
.footer-page .footer-document :is(.mk-head, .mk-head-c) { text-align: left; margin-bottom: 1.5rem; }
.footer-page .footer-document h2 { scroll-margin-top: 7rem; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; letter-spacing: -.025em; }
.footer-page .footer-document h3 { font-size: 1.05rem; line-height: 1.4; }
.footer-page .footer-document :is(.mk-panel h2, .tl-panel h2) { font-size: 1.08rem; }
.footer-page .footer-document :is(.mk-grid, .mk-grid-2, .tl-split, .mk-feature-grid .collection-grid, .tu-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-page .footer-document :is(.mk-split, .tl-enquire, .enq-layout) { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.footer-page .footer-document :is(.mk-panel, .tl-panel) { min-width: 0; padding: 1.25rem; border-radius: .8rem; box-shadow: none; }
.footer-page .footer-document .mk-panel p { font-size: .85rem; line-height: 1.75; }
.footer-page .footer-document .mk-kicker { color: var(--policy-accent); }
.footer-page .footer-document .enq-page { margin-block: 0; }
.footer-page .footer-document :is(.enq-form-card, .enq-next, .enq-managed) { padding: 1.25rem; box-shadow: none; }
.footer-page .footer-document .enq-form-card { border-top-width: 3px; }
.footer-page .footer-document .enq-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.footer-page .footer-document .enq-managed { margin: 0; }
.footer-page .footer-document .enq-browse { grid-column: 1 / -1; }
.footer-page .footer-document .tl-credits { overflow-x: auto; }
.footer-page .footer-document .tl-credits table { min-width: 580px; }
.footer-page .footer-document .tl-credit-thumb { max-width: 90px; height: 60px; object-fit: cover; }
.footer-page .footer-document .tl-stats { flex-wrap: wrap; }
.footer-page .footer-document [id] { scroll-margin-top: 7rem; }
.footer-page .footer-document .mk-price-grid { grid-template-columns: minmax(0, 1fr); }
.footer-page .footer-document .mk-price { min-width: 0; }
.footer-page .footer-document .mk-cmd { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.footer-page .footer-document .tu-card { min-width: 0; }
.footer-page .footer-document .mk-btns { flex-wrap: wrap; }
.footer-page .footer-document .mk-btn { white-space: normal; text-align: center; }
.footer-page .footer-document .spacer { max-height: 2rem; }
@media (max-width: 1000px) {
  .footer-page .footer-hero :is(.mk-hero-photo, .tl-hero-photo, .footer-hero-photo) { width: 170px; height: 210px; }
  .footer-page .policy-layout { gap: 1.5rem; grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 850px) {
  .footer-page .policy-layout { grid-template-columns: minmax(0, 1fr); }
  .footer-page .footer-hero { grid-template-columns: minmax(0, 1fr); }
  .footer-page .footer-hero :is(.mk-hero-photo, .tl-hero-photo, .footer-hero-photo) { width: 100%; height: 200px; }
  .footer-page .footer-hero .policy-hero-symbol { display: none; }
}
@media (max-width: 550px) {
  .footer-page .footer-document :is(.mk-grid, .mk-grid-2, .tl-split, .mk-feature-grid .collection-grid, .tu-grid, .enq-aside) { grid-template-columns: minmax(0, 1fr); }
  .footer-page .footer-document { padding: 1rem; }
  .footer-page .policy-tabs a { font-size: .7rem; padding: .6rem; }
  .footer-page .footer-hero h1 { font-size: 2.1rem; }
  .footer-page .footer-hero :is(.mk-btn, .mk-cmd) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .footer-page .footer-hero .mk-tags { display: flex; flex-wrap: wrap; }
  .footer-page .footer-document .dm-sitemap { columns: 1; }
}
/* The live Blog and manual use their own listing and reader controls. */
#dm-blog[data-bp-base="/blog"] { max-width: 1120px; width: 100%; padding: 0; }
#dm-blog[data-bp-base="/blog"] .footer-blog-head { --policy-accent: #4169a3; width: 100%; margin: 1.5rem 0 0; }
#dm-blog[data-bp-base="/blog"] .footer-blog-head .policy-hero { display: flex; }
#dm-blog[data-bp-base="/blog"] .footer-blog-head h1 { font-size: clamp(2.3rem, 4.4vw, 3.65rem); }
#dm-blog[data-bp-base="/blog"] .policy-tabs a { font-size: .75rem; padding: .55rem .75rem; }
#dm-blog[data-bp-base="/blog"] > .bp-hero { border: 0; padding-bottom: 0; }
#dm-blog[data-bp-base="/blog"] :is(.blog-toolbar, .bp-list-toolbar) { border-radius: .8rem; }
#dm-blog[data-bp-base="/blog"] :is(.blog-card, .bp-card) { border-radius: 1rem; }
#dsp[data-space="domma-cms-user-manual"] { --policy-accent: #4169a3; border: 1px solid var(--dm-border); border-radius: 1rem; }
#dsp[data-space="domma-cms-user-manual"] .dsp-bar { background: color-mix(in srgb, #4169a3 6%, var(--dsp-bg, var(--dm-card-bg))); border-radius: 1rem 1rem 0 0; }
#dsp[data-space="domma-cms-user-manual"] .dsp-head { padding: 1.75rem; margin-bottom: 1.75rem; border: 1px solid var(--dm-border); border-radius: 1rem; background: color-mix(in srgb, #4169a3 6%, var(--dsp-bg, var(--dm-card-bg))); }
#dsp[data-space="domma-cms-user-manual"] .dsp-head::before { content: 'DOMMA CMS / USER MANUAL'; display: block; color: var(--dsp-muted, var(--dm-text-secondary)); font-size: .68rem; font-weight: 800; letter-spacing: .13em; margin-bottom: 1rem; }
#dsp[data-space="domma-cms-user-manual"] .dsp-title { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
#dsp[data-space="domma-cms-user-manual"] .dsp-side__label { font-size: .68rem; letter-spacing: .13em; }
#dsp[data-space="domma-cms-user-manual"] .dsp-tree a { border-radius: .5rem; }
@media (max-width: 550px) {
  #dm-blog[data-bp-base="/blog"] .footer-blog-head { width: 100%; margin-inline: 0; }
  #dsp[data-space="domma-cms-user-manual"] .dsp-head { padding: 1.25rem; }
}

/* ==== dot-and-daisy start ==== */
/* Dot and Daisy (dd-): the launch post and the home banner. Dot is ocean blue, Daisy is sunset coral; motion stops under Reduce motion. */
.dd-intro { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; margin: 0.25em 0 0.6em; min-height: 1.3em; text-wrap: balance; }
.dd-lede { font-size: 1.15rem; line-height: 1.7; }
.dd-name-dot { color: #1f7ae0; } .dd-name-daisy { color: #e0567a; }

.dd-marquee { --dd-gap: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 28px calc(50% - 50vw); padding: 18px 0; overflow: hidden; border-block: 1px solid var(--dm-border); background: var(--dm-surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dd-marquee-label { text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dm-text-muted); }
.dd-track { display: flex; gap: var(--dd-gap); width: max-content; animation: dd-scroll 48s linear infinite; }
.dd-track.dd-reverse { animation-direction: reverse; animation-duration: 56s; }
.dd-marquee:hover .dd-track { animation-play-state: paused; }
@keyframes dd-scroll { to { transform: translateX(calc(-50% - var(--dd-gap) / 2)); } }
.dd-chip { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--dm-border); background: var(--dm-bg, transparent); color: var(--dm-text); font-weight: 600; font-size: 0.98rem; }
.dd-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dd-chip.dd-dot::before { background: #1f7ae0; box-shadow: 0 0 0 4px rgba(31, 122, 224, 0.18); }
.dd-chip.dd-daisy::before { background: #e0567a; box-shadow: 0 0 0 4px rgba(224, 86, 122, 0.18); }
.dd-chip b { font-weight: 800; }

.dd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0 12px; }
.dd-stat { padding: 22px 18px; border-radius: 16px; border: 1px solid var(--dm-border); background: var(--dm-surface); text-align: center; min-width: 0; }
.dd-num { display: block; font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  background: linear-gradient(100deg, #1f7ae0, #22b3a3 55%, #e0567a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-stat p { margin: 10px 0 0; font-size: 0.95rem; color: var(--dm-text-muted); line-height: 1.45; }

.dd-panel { margin: 56px 0 8px; }
.dd-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.dd-kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.dd-panel.dd-dot .dd-kicker { color: #1f7ae0; } .dd-panel.dd-daisy .dd-kicker { color: #e0567a; }
.dd-panel h2 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); line-height: 1.1; margin: 8px 0 6px; text-wrap: balance; }
.dd-sub { font-size: 1.25rem; font-weight: 700; color: var(--dm-text-muted); margin: 0 0 14px; min-height: 1.4em; }
.dd-asks { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; padding: 0; list-style: none; }
.dd-asks li { margin: 0; padding: 8px 14px; border-radius: 12px 12px 12px 4px; background: var(--dm-surface); border: 1px solid var(--dm-border); font-weight: 600; font-size: 0.95rem; }

.dd-feat { height: 100%; padding: 20px 18px; border-radius: 16px; border: 1px solid var(--dm-border); background: var(--dm-surface); }
.dd-feat-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 12px; }
.dd-dot .dd-feat-icon { background: rgba(31, 122, 224, 0.14); color: #1f7ae0; }
.dd-daisy .dd-feat-icon { background: rgba(224, 86, 122, 0.14); color: #e0567a; }
.dd-feat h3 { font-size: 1.08rem; margin: 0 0 6px; line-height: 1.3; }
.dd-feat p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--dm-text-muted); }

.dd-big { font-size: clamp(1.3rem, 2.8vw, 1.7rem); line-height: 1.5; font-weight: 700; letter-spacing: -0.005em; margin: 12px 0 0; }

.dd-cta { position: relative; overflow: hidden; margin: 56px 0 8px; padding: 34px 26px; border-radius: 20px; border: 1px solid var(--dm-border); background: var(--dm-surface); text-align: center; }
.dd-cta h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 8px; text-wrap: balance; }
.dd-cta p { max-width: 52ch; margin: 0 auto 18px; color: var(--dm-text-muted); }
.dd-cta .dd-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Home page banner */
.dd-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin: 0 auto 18px; padding: 12px 18px; max-width: 1100px; border-radius: 999px; border: 1px solid var(--dm-border); background: var(--dm-surface); font-weight: 600; }
.dd-banner-new { padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: linear-gradient(100deg, #1f7ae0, #e0567a); }
.dd-banner a { font-weight: 700; white-space: nowrap; }

@media (max-width: 640px) {
  .dd-stats { grid-template-columns: 1fr; }
  .dd-banner { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-track { animation: none; }
  .dd-marquee { overflow-x: auto; }
}
/* Specificity over the blog's own typography (.page-body .pc-body) */
.page-body .dd-intro { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; line-height: 1.25; }
.page-body .dd-intro p, .page-body .dd-sub p, .page-body .dd-big p { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.page-body .dd-panel h2 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); line-height: 1.1; margin: 6px 0 8px; }
.page-body .dd-sub { font-size: 1.3rem; font-weight: 700; color: var(--dm-text-muted); margin: 0 0 12px; }
.page-body .dd-feat h3 { font-size: 1.08rem; margin: 0 0 6px; line-height: 1.3; }
.page-body .dd-feat p, .page-body .dd-stat p { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--dm-text-muted); }
.page-body .dd-feat p { margin-top: 0; }
.page-body .dd-big { font-size: clamp(1.3rem, 2.8vw, 1.7rem); line-height: 1.5; font-weight: 700; }
.page-body .dd-cta h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 8px; }
.page-body .dd-asks { padding: 0; }
.dd-cta .dd-btns { align-items: center; }
.dd-alt { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 8px; border: 1px solid var(--dm-border); color: var(--dm-text); font-weight: 600; text-decoration: none; }
.dd-alt:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.page-body .mk-hero .dd-intro { font-size: clamp(1.15rem, 2.2vw, 1.45rem); min-height: 2.7em; margin: 4px 0 10px; color: var(--dm-text); }
.mk-sec .dd-panel { margin-top: 0; }
/* Home banner, the full version: a typed request in a bubble between the headline and the links */
.dd-banner.dd-banner-rich { max-width: 1180px; border-radius: 20px; padding: 14px 20px; gap: 12px 20px; justify-content: space-between; }
.dd-banner-head { display: inline-flex; align-items: center; gap: 12px; font-size: 1.08rem; font-weight: 800; }
.dd-banner-type { flex: 1 1 280px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px 14px 14px 4px; border: 1px solid var(--dm-border); background: var(--dm-bg, transparent); font-weight: 600; min-height: 2.6em; }
.dd-banner-type::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #1f7ae0, #e0567a); box-shadow: 0 0 0 4px rgba(31, 122, 224, 0.14); }
.dd-banner-type p { margin: 0; }
.dd-banner-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.dd-go-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: #fff !important; text-decoration: none !important; background: linear-gradient(100deg, #1f7ae0, #e0567a); }
.dd-go-btn:hover { filter: brightness(1.08); }
@media (max-width: 640px) { .dd-banner.dd-banner-rich { justify-content: center; text-align: center; } .dd-banner-type { flex-basis: 100%; text-align: left; } .dd-banner-links { justify-content: center; width: 100%; } }
/* Inset scroller (inside a column layout, e.g. /features): no full-bleed */
.dd-marquee.dd-inset { margin: 22px 0; border: 1px solid var(--dm-border); border-radius: 16px; }
.dd-spot { display: grid; gap: 10px; }
.dd-spot .dd-banner-type { flex: none; max-width: 640px; }
.dd-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dd-duo .dd-feat h3 { font-size: 1.25rem; }
.dd-duo .dd-feat a { font-weight: 700; }
@media (max-width: 640px) { .dd-duo { grid-template-columns: 1fr; } }
.dd-feat.dd-feat-link { display: block; color: inherit !important; text-decoration: none !important; transition: border-color .2s ease, transform .2s ease; }
.dd-feat.dd-feat-link:hover { border-color: var(--dm-primary); }
.dd-feat.dd-feat-link h3 { color: var(--dm-text); }
/* Enquire page: the Dot and Daisy card in the aside */
.dd-enq { display: grid; gap: 10px; margin: 18px 0; padding: 18px; border-radius: 16px; border: 1px solid var(--dm-border); background: var(--dm-surface); }
.dd-enq h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.dd-enq p { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.dd-enq .dd-banner-type { flex: none; font-size: 0.92rem; }
.enq-aside .dd-enq { grid-column: 1 / -1; }
.dd-enq-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 700; }
#dot-and-daisy-manual { margin: 40px 0 16px; }
#dot-and-daisy-manual h2 { margin: 4px 0; }
/* Showcase pages: "Want this on your site?" strip before the final panel */
.dd-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px 28px; align-items: center; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--dm-border); background: var(--dm-surface); }
.dd-strip h3 { margin: 6px 0 0; font-size: 1.35rem; line-height: 1.3; text-wrap: balance; }
.dd-strip .dd-banner-type { flex: none; margin: 0; }
.dd-strip-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-weight: 700; }
@media (max-width: 760px) { .dd-strip { grid-template-columns: 1fr; } }
.dd-strip.dd-strip-tu { margin: 32px 0 24px; grid-template-columns: 1fr; }
.page-body .dd-strip-tu h3 { margin: 6px 0 0; font-size: 1.3rem; }
html.dm-reduced-motion .dd-track { animation: none; }
html.dm-reduced-motion .dd-marquee { overflow-x: auto; }
/* ==== dot-and-daisy end ==== */