/* ==========================================================================
   Proof — flagship card + 2-up secondary proof cards. RTL-safe (logical CSS;
   the CTA arrow mirrors under [dir=rtl]). Depends on shared story chrome.
   ========================================================================== */
.flagship {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2);
  padding: 36px 38px 38px;
}
.flag-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-block-end: 22px; }
.flag-badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep);
  border: 1px solid var(--gold); padding: 5px 11px; border-radius: 100px;
}
.flag-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--slate);
}
.flag-h {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px); font-weight: 900; letter-spacing: -0.03em;
  line-height: 1.12; margin: 0 0 18px; color: var(--text);
}
.flag-h em { font-family: var(--story-serif); font-style: italic; font-weight: 400; }
.flag-h em:lang(he) { font-family: var(--font-he); font-style: normal; }
.flag-body {
  color: var(--muted); max-inline-size: 620px; font-family: var(--font-body);
  font-size: clamp(14.5px, 1.8vw, 16px); line-height: 1.72; margin: 0 0 26px;
}
.flag-body b { color: var(--text); font-weight: 700; }
.flag-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 13px; color: #fff;
  background: var(--text); border: 1px solid var(--text);
  padding: 12px 20px; border-radius: 9px; transition: opacity .18s ease;
}
.flag-cta:hover { opacity: .85; }
.flag-cta .k { opacity: .55; }
.flag-cta .arr { transition: transform .18s; }
.flag-cta:hover .arr { transform: translateX(4px); }
[dir="rtl"] .flag-cta .arr { transform: scaleX(-1); }
[dir="rtl"] .flag-cta:hover .arr { transform: scaleX(-1) translateX(4px); }

/* two secondary proof cards */
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-block-start: 16px; }
.pcard {
  border: 1px solid var(--line); border-radius: 14px; background: var(--ink);
  padding: 26px 26px 28px;
}
.pcard .h { font-family: var(--font-display); font-size: 19px; font-weight: 900; letter-spacing: -0.02em; margin-block-end: 10px; color: var(--text); }
.pcard .b { color: var(--muted); font-family: var(--font-body); font-size: 14.5px; line-height: 1.68; margin-block-end: 16px; }
.pcard .lnk {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
  border: 1px solid var(--story-line-2); padding: 8px 14px; border-radius: 8px;
  transition: border-color .18s ease, background .18s ease;
}
.pcard .lnk:hover { border-color: var(--gold); background: var(--surface-2); }
.pcard .lnk .k { color: var(--slate); }
.pcard .lnk .arr { transition: transform .18s; }
.pcard .lnk:hover .arr { transform: translateX(4px); }
[dir="rtl"] .pcard .lnk .arr { transform: scaleX(-1); }
[dir="rtl"] .pcard .lnk:hover .arr { transform: scaleX(-1) translateX(4px); }
.pcard.meta { background: linear-gradient(180deg, var(--surface-2), var(--ink)); }
.pcard.meta .tagline { font-family: var(--story-serif); font-style: italic; color: var(--muted); margin-block-end: 0; }
.pcard.meta .tagline:lang(he) { font-family: var(--font-he); font-style: normal; }

@media (max-width: 640px) {
  .flagship { padding: 28px 22px 30px; }
  .pgrid { grid-template-columns: 1fr; }
}