/* HOS Design System v3 — components (deep forest + ivory). Needs ds/hos/tokens.css (the v3 block).
   Pilot on /ar/discover/ (6 Nov 2026). Prefix ds- so nothing collides with the v2 hos- components.
   Rules: green leads; orange (highlight) appears once per view at most; headings in --font-head, body in --font-body. */

/* Layout: one content column for everything (header included), a gutter, and a section rhythm */
.ds-container { box-sizing: border-box; width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.ds-section { padding-block: var(--section-y); }
.ds-section--sm { padding-block: var(--section-y-sm); }
.ds-full { box-sizing: border-box; padding-inline: var(--edge); }
.ds-full--wide { padding-inline: var(--edge-wide); }
.ds-container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.ds-section-head { display: grid; gap: var(--stack-md); max-width: 46rem; margin-block-end: var(--section-gap); }
.ds-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--section-gap); align-items: start; }
.ds-flow > * + * { margin-block-start: var(--flow-space, var(--stack-md)); }
.ds-band { padding-block: var(--section-y-sm); }          /* full-bleed background, content on the column */
.ds-stack-sm { display: grid; gap: var(--sp-3); }
.ds-stack-md { display: grid; gap: var(--stack-md); }
.ds-stack-lg { display: grid; gap: var(--stack-lg); }
/* Layout grid: 12 columns on desktop, 8 on tablets, 4 on phones (--grid-cols in tokens.css).
   .ds-col-N spans N of 12; below 1024px a child is full width unless .ds-col-md-N (of 8); below 640px unless .ds-col-sm-N (of 4). */
.ds-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 12), minmax(0, 1fr)); column-gap: var(--grid-gap, 24px); row-gap: var(--stack-lg); }
.ds-col-1 { grid-column: span 1; }
.ds-col-2 { grid-column: span 2; }
.ds-col-3 { grid-column: span 3; }
.ds-col-4 { grid-column: span 4; }
.ds-col-5 { grid-column: span 5; }
.ds-col-6 { grid-column: span 6; }
.ds-col-7 { grid-column: span 7; }
.ds-col-8 { grid-column: span 8; }
.ds-col-9 { grid-column: span 9; }
.ds-col-10 { grid-column: span 10; }
.ds-col-11 { grid-column: span 11; }
.ds-col-12 { grid-column: span 12; }
@media (max-width: 1023px) {
  .ds-grid > [class*="ds-col-"] { grid-column: 1 / -1; }
  .ds-grid > .ds-col-md-1 { grid-column: span 1; }
  .ds-grid > .ds-col-md-2 { grid-column: span 2; }
  .ds-grid > .ds-col-md-3 { grid-column: span 3; }
  .ds-grid > .ds-col-md-4 { grid-column: span 4; }
  .ds-grid > .ds-col-md-5 { grid-column: span 5; }
  .ds-grid > .ds-col-md-6 { grid-column: span 6; }
  .ds-grid > .ds-col-md-7 { grid-column: span 7; }
  .ds-grid > .ds-col-md-8 { grid-column: span 8; }
}
@media (max-width: 639px) {
  .ds-grid > [class*="ds-col-"] { grid-column: 1 / -1; }
  .ds-grid > .ds-col-sm-1 { grid-column: span 1; }
  .ds-grid > .ds-col-sm-2 { grid-column: span 2; }
  .ds-grid > .ds-col-sm-3 { grid-column: span 3; }
  .ds-grid > .ds-col-sm-4 { grid-column: span 4; }
}
.ds-lead, .ds-measure { max-width: var(--measure); }

.ds-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing: .04em; color: var(--highlight-ink); }
.ds-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.ds-on-band .ds-eyebrow, .ds-eyebrow.on-band { color: var(--accent); }

.ds-display { margin: 0; font: 800 var(--fs-display)/1.05 var(--font-head); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.ds-h1 { margin: 0; font: 700 var(--fs-h1)/1.1 var(--font-head); letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.ds-h2 { margin: 0; font: 700 var(--fs-h2)/1.2 var(--font-head); color: var(--text); text-wrap: balance; }
.ds-lead { margin: 0; font: 400 var(--fs-lead)/1.75 var(--font-body); color: var(--text-muted); text-wrap: pretty; }
.ds-on-band .ds-display, .ds-on-band .ds-h1, .ds-on-band .ds-h2 { color: var(--on-band); }
.ds-on-band .ds-lead { color: var(--on-band-muted); }

/* Buttons: primary (forest), highlight (orange — the one key action), ghost (outline), on-band (ivory on dark), whatsapp */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h-md); padding: 0 var(--btn-px-md); border-radius: var(--r-pill); border: 1.5px solid transparent; font: 700 var(--btn-fs-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.ds-btn svg { width: 20px; height: 20px; flex: none; }
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:focus-visible { outline: 3px solid var(--highlight); outline-offset: 3px; }
.ds-btn--primary { background: var(--primary); color: var(--on-primary); }
.ds-btn--primary:hover { background: var(--primary-hover); box-shadow: 0 10px 24px -8px rgba(31,81,54,.55); }
.ds-btn--highlight { background: var(--highlight); color: var(--on-highlight); }
.ds-btn--highlight:hover { box-shadow: 0 10px 24px -8px rgba(246,147,34,.6); }
.ds-btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.ds-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.ds-btn--on-band { background: var(--on-band); color: var(--band); }
.ds-btn--ghost-band { background: transparent; color: var(--on-band); border-color: rgba(243,239,230,.35); }
.ds-btn--ghost-band:hover { border-color: var(--on-band); }
.ds-btn--whatsapp { background: #25D366; color: #0B3D20; }
.ds-btn--sm { min-height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--btn-fs-sm); }
.ds-btn--lg { min-height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: var(--btn-fs-lg); }

.ds-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font: 600 14px/1.3 var(--font-body); color: var(--text); }
.ds-chip--soft { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.ds-chip--dark { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.ds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--pad-card); }
.ds-card--lg { padding: var(--pad-card-lg); }
.ds-card--flush { padding: 0; overflow: hidden; }
.ds-band { background: var(--band); color: var(--on-band); }

.ds-stat b { display: block; font: 800 clamp(36px, 4.4vw, 64px)/1 var(--font-head); color: var(--primary); letter-spacing: -0.02em; }
.ds-stat b em { font-style: normal; color: var(--highlight); }
.ds-stat span { display: block; margin-top: 8px; font: 600 14px/1.4 var(--font-body); color: var(--text-muted); }

.ds-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-ticks li { position: relative; padding-inline-start: 30px; font: 600 15px/1.5 var(--font-body); }
.ds-ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5136' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Arabic: no letter-spacing (it breaks the joins); Latin keeps the tight tracking above */
:lang(ar) .ds-display, :lang(ar) .ds-h1, :lang(ar) .ds-eyebrow, :lang(ar) .ds-stat b { letter-spacing: 0; }

/* Joined groups. The same rules ship in /css/site.css for the boards (.hos-group / .hos-tags) and the
   hand-written pages (.dx-ctas, .og-cta .acts, .dx-chips, .dx-legend, .dx-tags, .dx-chain, .dx-org-chips, .og-meta). */
.ds-group { display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: 0; width: fit-content; max-width: 100%; border-radius: var(--r-pill); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.ds-group > * { border-radius: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; min-height: var(--btn-h-md); }
.ds-group > * + * { border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent) !important; }
.ds-tagset { display: flex; flex-wrap: wrap; gap: 1px; width: fit-content; max-width: 100%; margin: 0; padding: 0; list-style: none; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, currentColor 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.ds-tagset > * { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); margin: 0; border: 0; border-radius: 0; background: var(--surface); font: 700 var(--btn-fs-sm)/1.25 var(--font-body); }
@media (max-width: 600px) { .ds-group { display: flex; width: 100%; } .ds-group > * { flex: 1 1 0; justify-content: center; text-align: center; white-space: normal; } }
@media (max-width: 420px) { .ds-group { flex-direction: column; border-radius: 18px; } .ds-group > * + * { border-inline-start: 0 !important; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent) !important; } }