/* ==========================================================================
   /OtherProducts — Nextoria's sister products (PurchoSmart, ReachXpand,
   PersonaXpand). Layers on product-page.css (.pr-page shell, type, band hero,
   closing band) the same way contact-page.css and careers-page.css do.
   Logical properties throughout so the page mirrors cleanly in Arabic.
   ========================================================================== */

/* ---------- HERO: the shared blue band, at the site's opener rhythm ---------- */
.op-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(140px, 15vh, 210px) 0 clamp(64px, 8vw, 110px);
}

.op-hero-head { max-width: 760px; }

.op-hero-head .pr-lede { margin-top: 22px; }

/* Jump links to each product card — pills on the band. */
.op-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.op-jump a {
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-h);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s var(--pr-ease), border-color .25s var(--pr-ease);
}

.op-jump a:hover,
.op-jump a:focus-visible {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}


/* ---------- PRODUCT CARDS ---------- */
.op-list { padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 56px); }

.op-list .pr-shell {
    display: grid;
    gap: 22px;
}

.op-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(26px, 3.6vw, 44px);
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--pr-corner);
    background: var(--pr-glass);
    transition: border-color .35s var(--pr-ease), box-shadow .35s var(--pr-ease);
}

.op-card:hover,
.op-card:target {
    border-color: rgba(67, 163, 221, .45);
    box-shadow: 0 18px 48px -28px rgba(15, 44, 70, .35);
}

.op-card-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.op-card-logo {
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.op-card-cat {
    margin: 30px 0 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-dark);
}

.op-card-name {
    margin: 8px 0 0;
    font-family: var(--font-h);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}

.op-card-summary {
    margin: 14px 0 0;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-body);
    flex: 1;
}

.op-card-actions { margin-top: 28px; }

.op-ext {
    margin-inline-start: 8px;
    font-size: .78em;
}

[dir="rtl"] .op-ext { transform: scaleX(-1); }

/* The "who it's for + what it does" panel — white on the glass card. */
.op-card-side {
    align-self: start;
    padding: clamp(22px, 2.6vw, 30px);
    border: 1px solid var(--pr-glass-line);
    border-radius: var(--pr-corner-sm);
    background: #fff;
}

.op-card-aud {
    margin: 0;
    font-family: var(--font-h);
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
}

.op-card-points {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.op-card-points li {
    display: flex;
    gap: 12px;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text-body);
}

.op-card-points i {
    flex: 0 0 auto;
    margin-top: .3em;
    font-size: .8rem;
    color: var(--brand);
}


/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px) {
    .op-card { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .op-card-logo { height: 28px; }
    .op-card-actions .lp-btn-cta { width: 100%; justify-content: center; }
}