/* ── RTL page-specific overrides ─────────────────────────── */
    .rtl-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      background: color-mix(in oklch, var(--color-primary) 10%, transparent);
      border: 1px solid color-mix(in oklch, var(--color-primary) 25%, transparent);
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      color: var(--color-primary);
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    /* LTR ↔ RTL split preview */
    .rtl-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 56px;
    }

    .rtl-split__panel {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid var(--color-border);
      background: var(--color-surface);
    }

    .rtl-split__chrome {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: var(--color-surface-raised);
      border-bottom: 1px solid var(--color-border);
    }

    .rtl-split__dots {
      display: flex;
      gap: 5px;
    }

    .rtl-split__dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--color-border-strong);
    }

    .rtl-split__dots span:first-child { background: #ff5f57; }
    .rtl-split__dots span:nth-child(2) { background: #febc2e; }
    .rtl-split__dots span:last-child { background: #28c840; }

    .rtl-split__url {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      font-size: 11px;
      color: var(--color-text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rtl-split__tag {
      position: absolute;
      top: 56px;
      left: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      z-index: 3;
      backdrop-filter: blur(8px);
    }

    .rtl-split__tag--ltr {
      background: color-mix(in oklch, #3b82f6 15%, white);
      color: #1d4ed8;
      border: 1px solid color-mix(in oklch, #3b82f6 30%, white);
    }

    .rtl-split__tag--rtl {
      left: auto;
      right: 12px;
      background: color-mix(in oklch, var(--color-primary) 15%, white);
      color: var(--color-primary);
      border: 1px solid color-mix(in oklch, var(--color-primary) 30%, white);
    }

    .rtl-split__img {
      display: block;
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      object-position: top;
    }

    /* ── Layout engine section - hover to compare ─────────────── */
    /* Single scr-frame image: hover shows LTR, out shows RTL     */
    /* This is intentional - one image, two states, demonstrating */
    /* that the same layout flips. Makes sense with a single img. */
    .scr-frame__img.rtl-flip-hover {
      transform: scaleX(-1);
      transition: transform 0.72s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    }
    .kb-zoom__media:hover .scr-frame__img.rtl-flip-hover {
      transform: scaleX(1);
    }

    .rtl-split {
      position: relative;
    }

    .rtl-split__label {
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text-body);
      border-top: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    @media (max-width: 768px) {
      .rtl-split { grid-template-columns: 1fr; }
    }

    /* What flips checklist */
    .rtl-flips {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 40px;
    }

    .rtl-flip {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 18px 20px;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
    }

    .rtl-flip__icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: color-mix(in oklch, var(--color-primary) 10%, transparent);
      display: grid;
      place-items: center;
      color: var(--color-primary);
      flex-shrink: 0;
    }

    .rtl-flip__body strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text-body);
      margin-bottom: 3px;
    }

    .rtl-flip__body span {
      font-size: 13px;
      color: var(--color-text-muted);
      line-height: 1.5;
    }

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

    @media (max-width: 560px) {
      .rtl-flips { grid-template-columns: 1fr; }
    }

    /* Font preview cards */
    .rtl-fonts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 40px;
    }

    .rtl-font {
      padding: 24px;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
    }

    .rtl-font__name {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-text-muted);
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .rtl-font__sample {
      font-size: 26px;
      font-weight: 600;
      color: var(--color-text-heading);
      direction: rtl;
      text-align: right;
      line-height: 1.6;
      margin-bottom: 8px;
    }

    .rtl-font__latin {
      font-size: 12px;
      color: var(--color-text-muted);
    }

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

    @media (max-width: 560px) {
      .rtl-fonts { grid-template-columns: 1fr; }
    }

    /* Plugin compat row for RTL */
    .rtl-plugins {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 24px;
    }

    .rtl-plugin {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
    }

    .rtl-plugin__logo {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      background: var(--color-surface-raised);
    }

    .rtl-plugin__logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .rtl-plugin strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text-body);
    }

    .rtl-plugin span {
      font-size: 12px;
      color: var(--color-text-muted);
    }

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

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

    /* Mini RTL demo cards */
    .rtl-demos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 40px;
    }

    .rtl-demo {
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      transition: transform var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard);
    }

    .rtl-demo:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }

    .rtl-demo__shot {
      position: relative;
      overflow: hidden;
    }

    .rtl-demo__img {
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      object-position: top;
      display: block;
    }

    .rtl-demo__img--mirror {
      transform: scaleX(-1);
    }

    .rtl-demo__badge {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 4px 9px;
      background: var(--color-primary);
      color: white;
      border-radius: 5px;
      font-size: 10px;
      font-weight: 700;
    }

    .rtl-demo__hover {
      position: absolute;
      inset: 0;
      background: color-mix(in oklch, var(--color-primary) 85%, transparent);
      display: grid;
      place-items: center;
      opacity: 0;
      transition: opacity var(--duration-base) var(--easing-standard);
    }

    .rtl-demo:hover .rtl-demo__hover { opacity: 1; }

    .rtl-demo__btn {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      background: white;
      color: var(--color-primary);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
    }

    .rtl-demo__foot {
      padding: 16px 18px;
    }

    .rtl-demo__t {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text-heading);
      margin: 0 0 4px;
    }

    .rtl-demo__sub {
      font-size: 12.5px;
      color: var(--color-text-muted);
    }

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

    @media (max-width: 560px) {
      .rtl-demos { grid-template-columns: 1fr; }
    }

    /* Dark mode adjustments */
    [data-theme="dark"] .rtl-split__tag--ltr {
      background: color-mix(in oklch, #3b82f6 20%, transparent);
      color: #93c5fd;
      border-color: color-mix(in oklch, #3b82f6 30%, transparent);
    }

    [data-theme="dark"] .rtl-split__tag--rtl {
      background: color-mix(in oklch, var(--color-primary) 20%, transparent);
      color: color-mix(in oklch, var(--color-primary) 80%, white);
      border-color: color-mix(in oklch, var(--color-primary) 35%, transparent);
    }

    /* ── Inline-style extractions ─────────────────────────────── */

    /* RTL url panel: Arabic text direction + font */
    .rtl-split__url--rtl {
      direction: rtl;
      font-family: 'Cairo', sans-serif;
    }

    /* RTL label: flip flex direction + colour its icon */
    .rtl-split__label--rtl {
      direction: rtl;
      justify-content: flex-end;
    }

    .rtl-split__label i { color: var(--color-text-muted); }
    .rtl-split__label--rtl i { color: var(--color-primary); }

    /* hub-hero .hero__band sits inside a tighter layout on the RTL page */
    .hub-hero .hero__band { margin-top: 48px; }