/* WP3.2 catalogue only. No fixed card heights or description clipping. */
.ls-app .ls-catalogue { background: var(--ls-subtle); color: var(--ls-text); padding-block: 32px 48px; }
.ls-catalogue *, .ls-catalogue *::before { box-sizing: border-box; }
.ls-catalogue .ls-catalogue-container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.ls-catalogue .ls-page-header { margin-block-end: 24px; }
/* Keep the legacy heading variable local, without adding important overrides. */
.ls-catalogue h1 { --brand-dark-text: var(--ls-navy); font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.35; margin-block: 0 12px; color: var(--ls-navy); }
.ls-catalogue h2 { --brand-dark-text: var(--ls-text); font-size: 1.25rem; line-height: 1.5; margin: 0; color: var(--ls-text); }
.ls-catalogue p { font-size: 1rem; line-height: 1.65; margin-block: 0 16px; color: var(--ls-muted); max-width: 75ch; }
.ls-catalogue :is(h1, h2, p, a, button) { overflow-wrap: anywhere; }
.ls-catalogue .ls-catalogue-count { font-size: .875rem; margin-block-end: 0; }
.ls-catalogue .ls-free-offer { border: 1px solid #93c5fd; background: #eff6ff; border-radius: var(--ls-radius-surface); padding: 20px; margin-block-end: 24px; }
.ls-catalogue .ls-free-offer strong { display: block; margin-block-end: 8px; color: var(--ls-navy); }
.ls-catalogue .ls-free-offer p { margin-block-end: 12px; }
.ls-catalogue .ls-offer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.ls-catalogue .ls-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ls-catalogue .ls-item { border: 1px solid var(--ls-border); border-radius: var(--ls-radius-surface); background: white; min-width: 0; }
.ls-catalogue .ls-card-body { padding: 24px; border-radius: inherit; }
.ls-catalogue .ls-item-heading { display: flex; align-items: baseline; gap: 12px; margin-block-end: 12px; }
.ls-catalogue .ls-item-heading > i { color: var(--ls-navy); font-size: 1.25rem; }
.ls-catalogue .ls-topic .ls-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0; height: 100%; }
.ls-catalogue .ls-topic .topic-description { flex: 1; margin-block-end: 24px; }
.ls-catalogue .ls-topic .ls-action { width: 100%; }
.ls-catalogue .sg-topic-badge { margin-block-end: 12px; }
.ls-catalogue .ls-tier { display: inline-block; padding: 4px 10px; border-radius: 99px; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.4; white-space: normal; }
.ls-catalogue .ls-tier-free { background: #ecfdf5; color: #166534; }
.ls-catalogue .ls-tier-pro { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
.ls-catalogue .ls-scenario-list { display: grid; gap: 16px; }
.ls-catalogue .ls-scenario .ls-card-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(144px, 200px); gap: 24px; align-items: center; }
.ls-catalogue .ls-scenario-action { display: flex; flex-direction: column; gap: 8px; }
.ls-catalogue .scenario-badges { position: static; margin-block-end: 12px; }
.ls-catalogue .ls-scenario h2 { margin-block-end: 4px; text-align: start; }
.ls-catalogue .ls-arabic-title { font-family: "Noto Sans Arabic", "Segoe UI", Arial, sans-serif; font-size: .875rem; margin-block-end: 8px; text-align: start; }
.ls-catalogue .ls-scenario-details { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ls-muted); font-size: .875rem; }
.ls-catalogue .ls-score { border-radius: 0; font-size: .875rem; font-weight: 600; background: transparent; color: var(--ls-text); }
.ls-catalogue .ls-action { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid #64748b; border-radius: var(--ls-radius-control); font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5; text-transform: none; letter-spacing: normal; text-decoration: none; text-align: center; white-space: normal; background: white; color: var(--ls-text); box-shadow: none; cursor: pointer; transition: none; }
.ls-catalogue .ls-action-primary { background: var(--ls-action); border-color: var(--ls-action); color: white; }
.ls-catalogue .ls-action-primary:hover { background: var(--ls-action-hover); border-color: var(--ls-action-hover); color: white; }
.ls-catalogue .ls-action-neutral:hover { background: var(--ls-subtle); border-color: var(--ls-action); color: var(--ls-text); }
.ls-catalogue .locked-cta-button:hover { transform: none; box-shadow: none; }
.ls-catalogue .locked-content { opacity: 1; pointer-events: auto; }
.ls-catalogue .locked-content::before { content: none; }
.ls-catalogue .ls-back-link, .ls-catalogue .ls-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 8px; color: var(--ls-action-hover); text-decoration: underline; }
.ls-catalogue .ls-back-link { margin-block-end: 16px; }
.ls-catalogue :is(a, button):focus-visible { outline: 3px solid var(--ls-action); outline-offset: 3px; }
.ls-catalogue .ls-empty, .ls-catalogue .ls-notice { padding: 24px; border: 1px solid var(--ls-border); border-radius: var(--ls-radius-surface); background: white; }
.ls-catalogue .ls-empty { grid-column: 1 / -1; }
.ls-catalogue .ls-notice { margin-block-end: 16px; }
.ls-catalogue .ls-overview { max-width: 960px; }
.ls-catalogue .ls-overview-panel { padding: 24px; }
.ls-catalogue .ls-overview-panel h2 { margin-block-end: 12px; }
.ls-catalogue .ls-overview-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-block-end: 24px; }
.ls-catalogue .ls-overview-details dd { margin: 8px 0 0; color: var(--ls-muted); }
.ls-catalogue [hidden] { display: none; }
@media (max-width: 1023px) { .ls-catalogue .ls-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 767px) {
    .ls-app .ls-catalogue { padding-block: 24px 32px; }
    .ls-catalogue .ls-catalogue-container { padding-inline: 16px; }
    .ls-catalogue .ls-topic-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .ls-catalogue .ls-scenario .ls-card-body { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .ls-catalogue .ls-card-body, .ls-catalogue .ls-overview-panel { padding: 20px; }
    .ls-catalogue .ls-overview-details { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { .ls-catalogue * { animation: none; transition: none; } }