/* =========================================================================
   Page shell
   ========================================================================= */

html,
body {
  /* Marketing pages want generous line-height for readability; the dark
     theme base sets 1.5 but prose reads better at 1.6+. */
  line-height: 1.6;
  min-height: 100vh;
}

body {
  /* theme-dark.css already applies the background gradient + body font.
     Nothing extra here — this block reserved for future overrides. */
  margin: 0;
}

main#main {
  display: block;
  /* max-width is applied per block so full-bleed heros are possible
     while prose stays legible. No max-width on the main itself. */
  padding-bottom: var(--space-xl, 4rem);
}

/* When the site header is rendered transparent (hero-first pages), it
   floats over the page without reserving space in flow. Give the first
   main-child some extra top room so the hero's top content isn't buried
   behind the logo. The :has() selector scopes this to transparent-only. */
body:has(.site-header[data-transparent="true"]) main#main > *:first-child {
  padding-top: calc(var(--site-header-height, 64px) + var(--space-md, 1rem));
}

/* Skip link — hidden until focused (a11y). Slides down from the top
   with a soft glow so keyboard users know it received focus. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--accent-gradient, linear-gradient(135deg, #6366f1, #818cf8));
  color: var(--text-on-accent, #fff);
  border-radius: var(--radius-md, 0.375rem);
  text-decoration: none;
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-sm, 0.875rem);
  box-shadow: 0 8px 20px -6px var(--glow-color-strong, rgba(99,102,241,0.45));
  transform: translateY(-250%);
  transition: transform var(--transition-base, 250ms ease);
  z-index: calc(var(--z-overlay, 300) + 1);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--accent-secondary);
  outline-offset: 2px;
}

/* =========================================================================
   Base typography for authored content
   (Block-scoped selectors so we don't override the skip link etc.)
   ========================================================================= */

.block-hero,
.block-markdown,
.block-cta {
  /* Consistent horizontal rhythm regardless of block type. */
  color: var(--text-primary);
}

.block-hero h1,
.block-hero h2,
.block-markdown h2,
.block-markdown h3,
.block-markdown h4,
.block-cta h2 {
  font-family: var(--font-family, "Inter", system-ui, sans-serif);
  color: var(--text-primary);
  margin: 0 0 var(--space-md, 1rem);
  letter-spacing: var(--minxi-letter-spacing-tight, -0.025em);
}

.block-hero h1 {
  /* Fluid hero headline — reads as impactful on desktop, proportional on mobile. */
  font-size: clamp(2rem, 5vw + 0.5rem, 3.25rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.1;
  margin-bottom: var(--space-md, 1rem);
  /* Gradient headline treatment matches the old static site — visually
     anchors the brand. Falls back to solid --text-primary if the
     gradient isn't supported. */
  background: var(--accent-gradient, linear-gradient(135deg, #6366f1, #818cf8));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.block-markdown h2,
.block-cta h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.2;
}
.block-markdown h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: var(--font-weight-semibold, 600); line-height: 1.3; margin-top: var(--space-lg, 2rem); }
.block-markdown h4 { font-size: var(--font-size-lg, 1.125rem);  font-weight: var(--font-weight-semibold, 600); line-height: 1.4; margin-top: var(--space-md, 1rem); }

.block-hero p,
.block-markdown p,
.block-cta p {
  margin: 0 0 var(--space-md, 1rem);
  color: var(--text-secondary);
  line-height: 1.7;
}

.block-hero-subheadline {
  font-size: clamp(1.05rem, 1.5vw + 0.5rem, 1.25rem) !important;
  color: var(--text-secondary) !important;
  max-width: 42em;
  margin-bottom: var(--space-lg, 2rem) !important;
}

/* Lists + emphasis inside markdown blocks */
.block-hero ul, .block-hero ol,
.block-markdown ul, .block-markdown ol {
  margin: 0 0 var(--space-md, 1rem) 1.25rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.block-hero li, .block-markdown li { margin-bottom: var(--space-xs, 0.25rem); }

.block-hero strong, .block-markdown strong, .block-cta strong { color: var(--text-primary); font-weight: var(--font-weight-semibold, 600); }
.block-hero em, .block-markdown em, .block-cta em { font-style: italic; }

/* Inline + block code */
.block-hero code, .block-markdown code, .block-cta code {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--primary-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 0.25rem);
  color: var(--text-primary);
}
.block-markdown pre {
  margin: 0 0 var(--space-md, 1rem);
  padding: var(--space-md, 1rem);
  background: var(--primary-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 0.375rem);
  overflow-x: auto;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}
.block-markdown pre code {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-primary);
}

/* Blockquote (common in markdown content) */
.block-markdown blockquote {
  margin: 0 0 var(--space-md, 1rem);
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  border-left: 3px solid var(--accent-primary);
  color: var(--text-secondary);
  font-style: italic;
  background: var(--primary-surface, rgba(255,255,255,0.04));
  border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0;
}

/* Links in author content — accent color + subtle underline on hover */
.block-hero a:not(.btn),
.block-markdown a:not(.btn),
.block-cta a:not(.btn) {
  color: var(--accent-secondary, #a5b4fc);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}
.block-hero a:not(.btn):hover,
.block-markdown a:not(.btn):hover,
.block-cta a:not(.btn):hover {
  color: var(--text-primary);
  border-bottom-color: var(--accent-secondary, #a5b4fc);
}

/* Images anywhere in authored content — responsive + rounded */
.block-hero img,
.block-markdown img,
.block-cta img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 0.5rem);
}

/* =========================================================================
   Buttons (CTAs)
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-family, "Inter", system-ui, sans-serif);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.25;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.375rem);
  cursor: pointer;
  transition: transform var(--transition-fast, 150ms ease),
              background var(--transition-fast, 150ms ease),
              box-shadow var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent-gradient, linear-gradient(135deg, #6366f1, #818cf8));
  color: var(--text-on-accent, #fff);
  /* Layered shadow: ambient for depth + coloured glow for brand emphasis +
     inner top-edge highlight for a subtle 3D lift. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 28px -10px var(--glow-color-strong, rgba(99, 102, 241, 0.45)),
    0 4px 10px -4px rgba(0, 0, 0, 0.4);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 16px 36px -10px var(--glow-color-strong, rgba(99, 102, 241, 0.55)),
    0 6px 14px -4px rgba(0, 0, 0, 0.45);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 6px 14px -6px var(--glow-color-strong, rgba(99, 102, 241, 0.4));
}

.btn-secondary {
  background: var(--primary-surface, rgba(255, 255, 255, 0.04));
  color: var(--text-primary);
  border-color: var(--border-color, rgba(255, 255, 255, 0.08));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.btn-secondary:hover {
  /* Tinted wash — subtly picks up the accent so the button reads as
     interactive rather than just a bordered pill. */
  background:
    linear-gradient(180deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.04)),
    var(--primary-surface, rgba(255, 255, 255, 0.04));
  border-color: var(--border-color-strong, rgba(255, 255, 255, 0.15));
  color: var(--text-primary);
}
.btn-secondary:active {
  transform: translateY(0);
  background: var(--secondary-surface, rgba(255, 255, 255, 0.06));
}

.btn:focus-visible {
  outline: 2px solid var(--accent-secondary, #a5b4fc);
  outline-offset: 2px;
}
.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* =========================================================================
   Block — Hero
   Full-width section with headline + subheadline + optional CTA + optional
   markdown body. Optional image sits alongside (desktop) or below (mobile).
   ========================================================================= */

.block-hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) var(--space-lg, 2rem);
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.block-hero::before {
  /* Subtle accent glow behind the hero content — matches the platform's
     visual language (see minxi-static/public/css/app-base.css accent glows). */
  content: "";
  position: absolute;
  top: -30%;
  left: 20%;
  width: 60%;
  height: 140%;
  background: radial-gradient(ellipse at center, var(--glow-color, rgba(99,102,241,0.15)) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.block-hero-content {
  position: relative;
  z-index: 1;
  flex: 1 1 420px;
  max-width: 640px;
}

.block-hero-image {
  position: relative;
  z-index: 1;
  flex: 1 1 360px;
  max-width: 520px;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
}

.block-hero .btn {
  margin-top: var(--space-sm, 0.5rem);
}

/* When a hero has no image, centre the content for better rhythm. */
.block-hero:not(:has(.block-hero-image)) {
  justify-content: center;
  text-align: center;
}
.block-hero:not(:has(.block-hero-image)) .block-hero-content {
  flex: 1 1 auto;
  margin: 0 auto;
}
.block-hero:not(:has(.block-hero-image)) .block-hero-subheadline {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
   Block — Markdown Section
   Readable prose in a centred column. Stack within a page for long-form.
   ========================================================================= */

.block-markdown {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--space-lg, 2rem);
}

.block-markdown > h2:first-child,
.block-markdown > h3:first-child,
.block-markdown > h4:first-child {
  margin-top: 0;
}

/* A hero followed by a markdown section should butt up more tightly
   than two markdown sections in a row. */
.block-hero + .block-markdown {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* =========================================================================
   Block — CTA
   Accent-tinted card, centred in the column. Used to drive a single
   focused action at or near the end of a page.
   ========================================================================= */

.block-cta {
  max-width: 960px;
  margin: clamp(2rem, 5vw, 3rem) auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  border-radius: var(--radius-xl, 0.75rem);
  background:
    linear-gradient(135deg, rgba(99,102,241,0.12), rgba(129,140,248,0.08)),
    var(--primary-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color-strong, rgba(255,255,255,0.15));
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
}

.block-cta h2 {
  margin-bottom: var(--space-lg, 2rem);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.block-cta .btn {
  padding: 0.9rem 2rem;
  font-size: var(--font-size-lg, 1.125rem);
}

/* =========================================================================
   Locale switcher — chip style replicating the internal Admin Console
   (flag/script glyph + native name + ISO code in a pill). Used in the
   site footer on every SSR'd page. Fully keyboard-accessible; no JS.
   The full .site-footer block lives below in the "Site chrome" section.
   ========================================================================= */
.locale-switcher {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.locale-switcher-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.locale-switcher-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem);
  align-items: center;
}

.locale-switcher-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-full, 9999px);
  background: var(--primary-surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1;
  transition: background var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease),
              transform var(--transition-fast, 150ms ease);
}
.locale-switcher-chip:hover {
  background: var(--secondary-surface, rgba(255, 255, 255, 0.06));
  border-color: var(--border-color-strong, rgba(255, 255, 255, 0.15));
  color: var(--text-primary);
  transform: translateY(-1px);
}
.locale-switcher-chip.is-current {
  background: var(--color-primary-soft, rgba(99, 102, 241, 0.18));
  border-color: transparent;
  color: var(--text-primary);
  box-shadow:
    0 0 0 1px var(--color-primary, #6366f1),
    0 6px 16px -8px var(--glow-color-strong, rgba(99, 102, 241, 0.45));
}

.locale-switcher-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.locale-switcher-name {
  font-weight: 500;
}
.locale-switcher-code {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.locale-switcher-chip.is-current .locale-switcher-code {
  color: inherit;
  opacity: 0.8;
}

/* Backward-compat for callers that still render a plain .locale-switcher a */
.locale-switcher > a,
.locale-switcher > .locale-switcher-chips > a {
  /* No-op — covered by .locale-switcher-chip above */
}

/* =========================================================================
   RTL support
   platform_locales.rtl = true flips the document direction on the
   server (minxi-www sets <html dir="rtl">). Hero image/content order
   flip-flops automatically due to flex-wrap; this block handles the
   per-element tweaks that need explicit attention.
   ========================================================================= */

[dir="rtl"] .block-markdown blockquote {
  border-left: 0;
  border-right: 3px solid var(--accent-primary);
  border-radius: var(--radius-md, 0.375rem) 0 0 var(--radius-md, 0.375rem);
}

/* =========================================================================
   Responsive tweaks
   Mobile-first, so the rules above cover small screens. These are
   desktop refinements.
   ========================================================================= */

@media (min-width: 768px) {
  .block-hero {
    flex-wrap: nowrap;
    padding: clamp(4rem, 8vw, 7rem) var(--space-lg, 2rem);
  }
}

@media (min-width: 1024px) {
  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* =========================================================================
   Reduced motion — respect the user's OS preference.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn-primary:hover { transform: none; }
}

/* =========================================================================
   Print
   Strip the dark theme + accent glow for print — customers occasionally
   print legal pages, and dark-on-dark prints poorly.
   ========================================================================= */

@media print {
  html, body {
    background: #fff;
    color: #111;
  }
  .block-hero::before { display: none; }
  .block-hero h1 {
    -webkit-text-fill-color: currentColor;
    color: #111 !important;
    background: transparent;
  }
  .btn { display: none; }
}

/* =========================================================================
   Layout hints — container width + site-chrome visibility
   The page.content.layout object on www_content_pages drives these via
   <body data-layout-container="..."> and the presence/absence of the
   site header/footer in the rendered HTML.
   ========================================================================= */

body[data-layout-container="narrow"] main#main > * {
  max-width: 720px;
}
body[data-layout-container="wide"] main#main > * {
  max-width: 1400px;
}
body[data-layout-container="full"] main#main > * {
  max-width: none;
}

/* =========================================================================
   Site header + footer chrome
   Rendered by minxi-www's page.ts when layout.header / .footer aren't "none".
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 200);
  /* Frosted-glass chrome with a subtle tint — the saturation+blur combo
     picks up the colours of whatever scrolls beneath it for a more
     premium feel than a flat dark strip. */
  background: linear-gradient(180deg, rgba(10, 0, 20, 0.78), rgba(10, 0, 20, 0.62));
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  /* 1px gradient highlight along the bottom edge reads as a soft vignette
     between the header and the content. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.site-header[data-transparent="true"] {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  /* Thin top-down scrim so hero text retains contrast on pale imagery. */
  &::after {
    content: "";
    position: absolute;
    inset: 0 0 -2rem 0;
    background: linear-gradient(180deg, rgba(10, 0, 20, 0.55) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
  }
}
.site-header[data-variant="minimal"] .site-header-nav,
.site-header[data-variant="minimal"] .site-header-actions {
  display: none;
}

.site-header-inner {
  max-width: var(--site-max-width, 1200px);
  margin: 0 auto;
  padding: 0.85rem clamp(1rem, 3vw, var(--space-lg, 2rem));
  display: flex;
  align-items: center;
  gap: var(--space-md, 1rem);
  min-height: var(--site-header-height, 64px);
}

.site-header-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-lg, 1.125rem);
  letter-spacing: var(--minxi-letter-spacing-tight, -0.025em);
  border-radius: var(--radius-md, 0.375rem);
  transition: filter var(--transition-fast, 150ms ease);
}
.site-header-logo:hover {
  filter: brightness(1.15);
}
.site-header-logo img {
  /* Icon-only mark — square, tightly cropped. The wordmark is
     rendered as CSS text beside it so both size independently. */
  height: clamp(1.75rem, 2.2vw, 2.25rem);
  width: auto;
  border-radius: 0;
  display: block;
}

/* Brand wordmark text — paired with the square icon. Shared by the
   header and footer brand lockups. The `.tld` span holds ".ai" at a
   slightly lighter weight so "minxi" reads as the primary brand. */
.site-brand-text {
  font-family: var(--font-family, "Inter", system-ui, sans-serif);
  font-weight: var(--font-weight-bold, 700);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
  white-space: nowrap;
}
.site-brand-text .tld {
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-secondary);
  margin-left: 0.05em;
}

.site-header-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: clamp(0.25rem, 1.5vw, 1.25rem);
  flex-wrap: wrap;
}
.site-header-nav a {
  position: relative;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md, 0.375rem);
  transition: color var(--transition-fast, 150ms ease);
}
.site-header-nav a::after {
  /* Animated underline bar — scales from center on hover/current. */
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-gradient, linear-gradient(90deg, #6366f1, #818cf8));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-base, 250ms ease);
}
.site-header-nav a:hover,
.site-header-nav a[aria-current="page"] {
  color: var(--text-primary);
}
.site-header-nav a:hover::after,
.site-header-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-header-actions .btn {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-sm, 0.875rem);
}

/* Screen-reader-only utility used by the header's hidden site-name span. */
.site-header .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile nav toggle — checkbox-driven so no JS required. */
.site-header-toggle {
  display: none;
}
.site-header-toggle-button {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
  background: var(--primary-surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 0.375rem);
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease);
}
.site-header-toggle-button:hover {
  background: var(--secondary-surface, rgba(255, 255, 255, 0.06));
  border-color: var(--border-color-strong, rgba(255, 255, 255, 0.15));
}
.site-header-toggle-button::before {
  content: "≡";
  font-size: 1.5rem;
  line-height: 1;
}
/* Rotate the glyph to a close-icon shape when the menu is open. */
.site-header-toggle:checked ~ .site-header-inner .site-header-toggle-button::before {
  content: "×";
  font-size: 1.75rem;
}

@media (max-width: 768px) {
  .site-header-nav,
  .site-header-actions {
    display: none;
  }
  .site-header-toggle-button {
    display: inline-flex;
    margin-left: auto;
  }
  .site-header-toggle:checked ~ .site-header-inner .site-header-nav,
  .site-header-toggle:checked ~ .site-header-inner .site-header-actions {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    padding-top: var(--space-md, 1rem);
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
    margin-top: var(--space-md, 1rem);
  }
  .site-header-toggle:checked ~ .site-header-inner {
    flex-wrap: wrap;
  }
}

/* Footer — groups links in columns, brand lockup on the left, locale
   switcher + copyright below. The top-border is a thin gradient line
   rather than a flat rule so the footer feels like a considered object
   on the page rather than a seam. */
.site-footer {
  position: relative;
  margin-top: var(--space-xl, 4rem);
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, var(--space-lg, 2rem)) clamp(1.5rem, 3vw, var(--space-lg, 2rem));
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.03) 100%);
}
.site-footer::before {
  /* Gradient hairline dividing footer from the page content above. */
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color-strong, rgba(255,255,255,0.15)), transparent);
}
.site-footer[data-variant="minimal"] .site-footer-columns,
.site-footer[data-variant="minimal"] .site-footer-brand {
  display: none;
}

.site-footer-inner {
  max-width: var(--site-max-width, 1200px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.site-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 768px) {
  .site-footer-top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.site-footer-brand {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
}
.site-footer-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-lg, 1.125rem);
  text-decoration: none;
}
.site-footer-brand-logo img {
  /* Icon-only mark; wordmark text sits beside it via .site-brand-text. */
  height: 2.25rem;
  width: auto;
  border-radius: 0;
  display: block;
}
.site-footer-brand-tagline {
  color: var(--text-tertiary, #7d7894);
  line-height: 1.6;
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  max-width: 32ch;
}
.site-footer-brand p {
  color: var(--text-muted, #6b6680);
  line-height: 1.6;
  margin: 0;
}

.site-footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.site-footer-column h4 {
  position: relative;
  color: var(--text-primary);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-md, 1rem);
  padding-bottom: 0.5rem;
}
.site-footer-column h4::after {
  /* Short accent underline — visually anchors each column header. */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-gradient, linear-gradient(90deg, #6366f1, #818cf8));
  opacity: 0.7;
}
.site-footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-footer-column a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 0;
  line-height: 1.4;
  transition: color var(--transition-fast, 150ms ease),
              transform var(--transition-fast, 150ms ease);
  display: inline-block;
}
.site-footer-column a:hover {
  color: var(--text-primary);
  transform: translateX(2px);
}

.site-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 1rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}
@media (min-width: 1024px) {
  .site-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.site-footer-bottom p,
.site-footer-copyright {
  margin: 0;
  color: var(--text-muted, #6b6680);
  font-size: var(--font-size-xs, 0.75rem);
}

/* =========================================================================
   Block — Feature Grid
   ========================================================================= */

.block-feature-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--space-lg, 2rem);
}
.block-feature-grid > h2,
.block-feature-grid > .block-feature-grid-subheading {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.block-feature-grid > h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: var(--font-weight-bold, 700);
  margin-bottom: var(--space-md, 1rem);
}
.block-feature-grid-subheading {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 auto var(--space-lg, 2rem);
}

.block-feature-grid-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md, 1rem);
  margin-top: var(--space-lg, 2rem);
}
@media (min-width: 640px) {
  .block-feature-grid[data-columns="2"] .block-feature-grid-items { grid-template-columns: repeat(2, 1fr); }
  .block-feature-grid[data-columns="3"] .block-feature-grid-items { grid-template-columns: repeat(2, 1fr); }
  .block-feature-grid[data-columns="4"] .block-feature-grid-items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .block-feature-grid[data-columns="3"] .block-feature-grid-items { grid-template-columns: repeat(3, 1fr); }
  .block-feature-grid[data-columns="4"] .block-feature-grid-items { grid-template-columns: repeat(4, 1fr); }
}

.block-feature-grid-item {
  padding: var(--space-md, 1rem);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--primary-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.block-feature-grid-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md, 0.375rem);
  background: var(--glow-color, rgba(99,102,241,0.15));
  font-size: 1.5rem;
}
.block-feature-grid-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}
.block-feature-grid-item h3 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
  margin: 0;
}
.block-feature-grid-item-body {
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
}
.block-feature-grid-item-body p { margin: 0 0 0.5rem; }
.block-feature-grid-item-body p:last-child { margin-bottom: 0; }

/* Variant: cards — heavier card, no icon chip, emphasis on body */
.block-feature-grid[data-variant="cards"] .block-feature-grid-item {
  padding: var(--space-lg, 2rem);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}
.block-feature-grid[data-variant="cards"] .block-feature-grid-icon {
  background: transparent;
  width: auto;
  height: auto;
  font-size: 2rem;
  justify-content: flex-start;
}

/* Variant: icon-left — horizontal layout instead of stacked */
.block-feature-grid[data-variant="icon-left"] .block-feature-grid-item {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}
.block-feature-grid[data-variant="icon-left"] .block-feature-grid-icon {
  flex-shrink: 0;
}

/* =========================================================================
   Block — Testimonial
   ========================================================================= */

.block-testimonial {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--space-lg, 2rem);
  text-align: center;
}
.block-testimonial blockquote {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 var(--space-lg, 2rem);
  font-style: italic;
  position: relative;
}
.block-testimonial blockquote::before {
  content: "\201C";
  display: block;
  font-size: 3rem;
  line-height: 1;
  color: var(--accent-primary);
  opacity: 0.5;
  margin-bottom: 0.5rem;
}
.block-testimonial blockquote p { margin: 0 0 0.75rem; }
.block-testimonial blockquote p:last-child { margin-bottom: 0; }

.block-testimonial-attribution {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  color: var(--text-secondary);
  font-style: normal;
}
.block-testimonial-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full, 9999px);
  object-fit: cover;
  border: 0;
}
.block-testimonial-name {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold, 600);
}
.block-testimonial-title {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary);
}
.block-testimonial-logo {
  height: 1.75rem;
  width: auto;
  opacity: 0.7;
  margin-left: var(--space-md, 1rem);
  filter: grayscale(100%);
  border-radius: 0;
}
.block-testimonial-rating {
  margin-bottom: var(--space-md, 1rem);
  color: #fbbf24;
  letter-spacing: 0.2em;
}

/* Variant: big-quote — larger typography, centred asymmetric mark */
.block-testimonial[data-variant="big-quote"] blockquote {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
}

/* Variant: card — boxed on a tinted background */
.block-testimonial[data-variant="card"] {
  max-width: 800px;
}
.block-testimonial[data-variant="card"] blockquote,
.block-testimonial[data-variant="card"] .block-testimonial-attribution-wrap {
  background: var(--primary-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.block-testimonial[data-variant="card"] blockquote {
  padding: var(--space-lg, 2rem);
  border-radius: var(--radius-lg, 0.5rem);
  text-align: left;
  font-style: normal;
}
.block-testimonial[data-variant="card"] blockquote::before {
  margin-bottom: 0.25rem;
}

/* =========================================================================
   Block — FAQ
   Uses native <details> so it works without JS. Styles hide the default
   marker and add a rotating chevron.
   ========================================================================= */

.block-faq {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--space-lg, 2rem);
}
.block-faq > h2 {
  text-align: center;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: var(--font-weight-bold, 700);
  margin: 0 0 var(--space-lg, 2rem);
}
.block-faq-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.block-faq-item {
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.block-faq-item > summary {
  cursor: pointer;
  padding: var(--space-md, 1rem) 2.5rem var(--space-md, 1rem) 0;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
  list-style: none;
  position: relative;
  transition: color var(--transition-fast, 150ms ease);
}
.block-faq-item > summary::-webkit-details-marker { display: none; }
.block-faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: var(--font-weight-normal, 400);
  color: var(--accent-primary);
  transition: transform var(--transition-fast, 150ms ease);
}
.block-faq-item[open] > summary::after {
  content: "–";
}
.block-faq-item > summary:hover {
  color: var(--accent-secondary);
}
.block-faq-answer {
  padding: 0 0 var(--space-md, 1rem);
  color: var(--text-secondary);
  line-height: 1.7;
}
.block-faq-answer > *:first-child { margin-top: 0; }
.block-faq-answer > *:last-child { margin-bottom: 0; }

.block-faq[data-variant="compact"] .block-faq-item > summary {
  padding: 0.6rem 2rem 0.6rem 0;
  font-size: var(--font-size-sm, 0.875rem);
}

/* =========================================================================
   Block — Logo Strip
   ========================================================================= */

.block-logo-strip {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) var(--space-lg, 2rem);
  text-align: center;
}
.block-logo-strip-heading {
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-md, 1rem);
}
.block-logo-strip-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.block-logo-strip-logos li {
  display: flex;
  align-items: center;
}
.block-logo-strip-logos img {
  max-height: 2.5rem;
  max-width: 140px;
  width: auto;
  height: auto;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: opacity var(--transition-fast, 150ms ease),
              filter var(--transition-fast, 150ms ease);
  border-radius: 0;
}
.block-logo-strip-logos a:hover img,
.block-logo-strip-logos img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.block-logo-strip[data-variant="monochrome"] .block-logo-strip-logos img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.5;
}
.block-logo-strip[data-variant="monochrome"] .block-logo-strip-logos a:hover img,
.block-logo-strip[data-variant="monochrome"] .block-logo-strip-logos img:hover {
  opacity: 1;
}

/* =========================================================================
   Block — Video Embed
   Uses the aspect-ratio CSS property on the wrapper so iframe sizing is
   responsive without padding-hacks.
   ========================================================================= */

.block-video {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--space-lg, 2rem);
}
.block-video > h3 {
  font-size: var(--font-size-xl, 1.25rem);
  margin: 0 0 var(--space-md, 1rem);
  text-align: center;
}
.block-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 0.5rem);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
}
.block-video[data-aspect="4:3"]  .block-video-wrap { aspect-ratio: 4 / 3; }
.block-video[data-aspect="9:16"] .block-video-wrap { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }
.block-video[data-aspect="1:1"]  .block-video-wrap { aspect-ratio: 1 / 1; max-width: 540px; margin: 0 auto; }
.block-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.block-video-caption {
  margin-top: var(--space-md, 1rem);
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  text-align: center;
  font-style: italic;
}

.block-video[data-variant="fullwidth"] { max-width: none; padding-left: 0; padding-right: 0; }
.block-video[data-variant="fullwidth"] .block-video-wrap { border-radius: 0; }
.block-video[data-variant="centered"] { max-width: 720px; }

/* =========================================================================
   Block — Metrics Strip
   Big numbers + descriptive labels. Eye-catching, sparing with colour.
   ========================================================================= */

.block-metrics {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--space-lg, 2rem);
}
.block-metrics > h2 {
  text-align: center;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: var(--font-weight-bold, 700);
  margin: 0 0 var(--space-lg, 2rem);
}
.block-metrics-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-lg, 2rem);
  text-align: center;
}
.block-metrics-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.block-metrics-value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--minxi-letter-spacing-tight, -0.025em);
  background: var(--accent-gradient, linear-gradient(135deg, #6366f1, #818cf8));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.block-metrics-suffix {
  font-size: 0.6em;
  margin-left: 0.1em;
  -webkit-text-fill-color: inherit;
  color: inherit;
  opacity: 0.85;
}
.block-metrics-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.4;
}

.block-metrics[data-variant="inline"] .block-metrics-items {
  grid-template-columns: 1fr;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md, 1rem) clamp(2rem, 5vw, 4rem);
}
.block-metrics[data-variant="inline"] .block-metrics-item {
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
}
.block-metrics[data-variant="inline"] .block-metrics-value {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* =========================================================================
   Variant: hero variants
   ========================================================================= */
.block-hero[data-variant="centered"] {
  justify-content: center;
  text-align: center;
}
.block-hero[data-variant="centered"] .block-hero-content {
  margin: 0 auto;
}
.block-hero[data-variant="centered"] .block-hero-subheadline {
  margin-left: auto;
  margin-right: auto;
}
.block-hero[data-variant="minimal"] {
  padding-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}
.block-hero[data-variant="minimal"]::before {
  display: none;
}
.block-hero[data-variant="minimal"] h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-primary);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}
.block-hero[data-variant="split"] {
  align-items: stretch;
}

/* =========================================================================
   Variant: markdown_section variants
   ========================================================================= */
.block-markdown[data-variant="narrow"] { max-width: 560px; }
.block-markdown[data-variant="wide"]   { max-width: 960px; }
.block-markdown[data-variant="card"] {
  max-width: 800px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.block-markdown[data-variant="card"] > * {
  background: var(--primary-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 0.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
}

/* =========================================================================
   Variant: cta_block variants
   ========================================================================= */
.block-cta[data-variant="banner"] {
  /* Full-width banner — opts out of the container's max-width cap so the
     accent bar spans edge-to-edge. The !important is required because
     `body[data-layout-container="wide"] main#main > *` has higher
     specificity than this variant's class+attribute selector and would
     otherwise clamp the CTA back to 1400px. */
  max-width: 100% !important;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}
.block-cta[data-variant="compact"] {
  padding: clamp(1rem, 3vw, 1.5rem);
  max-width: 720px;
}
.block-cta[data-variant="compact"] h2 {
  font-size: var(--font-size-xl, 1.25rem);
  margin-bottom: var(--space-md, 1rem);
}

/* =========================================================================
   RTL support for the 6 new block types
   -------------------------------------------------------------------------
   Grid-based layouts (feature_grid, metrics_strip, logo_strip) flow via
   `flex-direction` / CSS Grid, both of which respect writing direction
   natively — so the `[dir="rtl"]` overrides below mostly handle:
     * block-level text alignment for headings + body copy
     * paragraph-style blockquote dashes that are direction-sensitive
     * logo-strip horizontal flex ordering (reverses for RTL)
     * the `big-quote` ::before open-quote positioning (flip to right)
   Variants opt back into the base behavior where the direction-agnostic
   look is preferable (e.g., logo_strip with explicit margins).
   ========================================================================= */

[dir="rtl"] .block-feature-grid,
[dir="rtl"] .block-feature-grid > h2,
[dir="rtl"] .block-feature-grid > .block-feature-grid-subheading,
[dir="rtl"] .block-feature-grid-item,
[dir="rtl"] .block-feature-grid-item-body {
  text-align: right;
}

[dir="rtl"] .block-feature-grid[data-variant="icon-left"] .block-feature-grid-item {
  flex-direction: row-reverse;
}

[dir="rtl"] .block-testimonial,
[dir="rtl"] .block-testimonial blockquote,
[dir="rtl"] .block-testimonial-attribution,
[dir="rtl"] .block-testimonial-name,
[dir="rtl"] .block-testimonial-title {
  text-align: right;
}
[dir="rtl"] .block-testimonial[data-variant="big-quote"] blockquote::before {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}
[dir="rtl"] .block-testimonial-attribution {
  flex-direction: row-reverse;
}

[dir="rtl"] .block-faq,
[dir="rtl"] .block-faq > h2,
[dir="rtl"] .block-faq-item,
[dir="rtl"] .block-faq-answer {
  text-align: right;
}
[dir="rtl"] .block-faq-item summary::after {
  /* Flip the chevron for RTL — the summary marker's direction is
     typographic, not semantic. */
  transform: rotate(-90deg);
}
[dir="rtl"] .block-faq-item[open] summary::after {
  transform: rotate(90deg);
}

[dir="rtl"] .block-logo-strip,
[dir="rtl"] .block-logo-strip-heading {
  text-align: right;
}
[dir="rtl"] .block-logo-strip-logos {
  /* Reverse the flex direction so logos appear right-to-left as text would. */
  flex-direction: row-reverse;
}

[dir="rtl"] .block-video,
[dir="rtl"] .block-video-caption {
  text-align: right;
}
/* .block-video-wrap is aspect-ratio iframe — direction is irrelevant. */

[dir="rtl"] .block-metrics,
[dir="rtl"] .block-metrics > h2,
[dir="rtl"] .block-metrics-item,
[dir="rtl"] .block-metrics-label {
  text-align: right;
}
[dir="rtl"] .block-metrics-item .block-metrics-value {
  /* Keep numerals LTR even inside an RTL block — Arabic/Hebrew text
     commonly mixes LTR numerals — but wrap direction in the value
     container so suffix positions correctly. */
  direction: ltr;
  display: inline-block;
}

/* Variant: metrics_strip inline — reverse flex for RTL */
[dir="rtl"] .block-metrics[data-variant="inline"] .block-metrics-items {
  flex-direction: row-reverse;
}

/* =========================================================================
   Generic block layout — auto-layout for staff-added block types that
   don't have a custom renderer. The `.block-generic` class is applied
   ALONGSIDE `.block-{type_id}` so staff can add type-specific CSS
   later without breaking the base layout.
   ========================================================================= */
.block-generic {
  max-width: var(--block-max-width, 960px);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--space-lg, 2rem);
}
.block-generic > h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0 0 var(--space-md, 1rem);
}
.block-generic-sub {
  font-size: var(--font-size-lg, 1.125rem);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg, 2rem);
}
.block-generic-body {
  margin-bottom: var(--space-lg, 2rem);
}
.block-generic-body p { margin: 0 0 0.75rem; }
.block-generic-body p:last-child { margin-bottom: 0; }
.block-generic-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md, 1rem);
  margin: var(--space-lg, 2rem) 0;
}
.block-generic-list-item {
  background: var(--primary-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 0.5rem);
  padding: var(--space-md, 1rem);
}
.block-generic-list-item strong {
  display: block;
  margin-bottom: 0.25rem;
}
.block-generic-value {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  display: block;
}
.block-generic-image {
  max-width: 100%;
  border-radius: var(--radius-lg, 0.5rem);
  margin-top: var(--space-md, 1rem);
}