/**
 * Ghada Ataa — Challenges page: movement and small steps.
 * Strong colour blocks (each challenge keeps its own theme: lime · purple · pink), giant numbers,
 * a comparison table, a timeline of the real flow. The challenge cards, dashboard and drawer
 * are the existing system (challenges.css) and are not restyled here.
 */
.ga-chp > section > .ga-container {
  padding-inline: min(var(--ga-page-margin), var(--ga-space-400));
  max-inline-size: calc(var(--ga-layout-max-width-wide) + 2 * var(--ga-space-400));
}
.ga-chp > section { padding-block: 0 var(--ga-section-space); }
.ga-chp > section[hidden] { display: none; }
.ga-chp > .ga-chp-hero { padding-block: var(--ga-space-400) var(--ga-space-600); }
.ga-chp-list > .ga-container { outline: none; scroll-margin-block-start: var(--ga-space-300); }

.ga-chp-eyebrow { margin: 0; font: var(--ga-type-label-default); color: var(--ga-color-brand-vivid-purple); }
.ga-chp-eyebrow span { color: var(--ga-color-brand-electric-orange); }
.ga-chp-h2 { margin: 0 0 var(--ga-space-400); font: var(--ga-type-heading-h1); }

/* ═════════ Hero ═════════ */
.ga-chp-hero .ga-st-crumbs ol { margin-block-end: var(--ga-space-300); }
.ga-chp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--ga-space-600); align-items: center; }
.ga-chp-hero__text { container-type: inline-size; display: grid; justify-items: start; gap: var(--ga-space-200); min-inline-size: 0; }
.ga-chp-hero__title { margin: 0; font: var(--ga-type-display-hero); font-size: min(var(--ga-type-display-hero-font-size), 10cqi); line-height: 1.25; }
.ga-chp-hero__title { white-space: nowrap; }                /* two lines: «خطوة صغيرة ممكن» / «تغيّر حاجات كتير» */
@media (max-width: 767px) { .ga-chp-hero__title { white-space: normal; } }
.ga-chp-hero__title span { display: block; background: linear-gradient(var(--ga-color-accent-fresh-lime), var(--ga-color-accent-fresh-lime)) right 88% / 100% 34% no-repeat; inline-size: fit-content; }
.ga-chp-hero__lead { margin: 0; font: var(--ga-type-body-large); color: var(--ga-text-muted); max-inline-size: 46ch; }
.ga-chp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ga-space-200); margin-block-start: var(--ga-space-100); }
.ga-chp-hero__actions [hidden] { display: none; }

.ga-chp-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--ga-space-200); margin: 0; padding: 0; list-style: none; }
.ga-chp-num a {
  position: relative; display: grid; align-content: start; gap: 4px;
  padding: var(--ga-space-300);
  border-radius: 24px;
  color: var(--ga-text-primary); text-decoration: none;
  transition: translate var(--ga-motion-duration-base) ease;
}
.ga-chp-num a:hover { translate: 0 -6px; }
.ga-chp-num a:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 4px; }
/* heights step up like a staircase of progress */
.ga-chp-num:nth-child(1) a { min-block-size: 240px; }
.ga-chp-num:nth-child(2) a { min-block-size: 300px; }
.ga-chp-num:nth-child(3) a { min-block-size: 360px; }
.ga-chp-num--lime a { background: var(--ga-color-accent-fresh-lime); }
.ga-chp-num--purple a { background: var(--ga-color-brand-vivid-purple); color: var(--ga-color-functional-white); }
.ga-chp-num--pink a { background: var(--ga-color-accent-pop-pink); }
.ga-chp-num__n { font-weight: 700; font-size: 88px; line-height: 1; letter-spacing: -.03em; }
.ga-chp-num__unit { font: var(--ga-type-heading-h4); }
.ga-chp-num__name { margin-block-start: auto; padding-block-start: var(--ga-space-300); font: var(--ga-type-body-small); font-weight: 700; opacity: .85; }
.ga-chp-num__live { position: absolute; inset-block-start: var(--ga-space-200); inset-inline-end: var(--ga-space-200); padding: 2px 10px; border-radius: 8px; background: var(--ga-color-text-deep-ink); color: var(--ga-color-accent-fresh-lime); font-size: 12px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .ga-chp-num { animation: ga-chp-up 700ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 110ms); }
}
@keyframes ga-chp-up { from { opacity: 0; translate: 0 30px; } }

/* ═════════ Your challenge now ═════════ */
.ga-chp-now__panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--ga-space-500); align-items: center; padding: var(--ga-space-600); border-radius: 32px; background: var(--ga-color-text-deep-ink); color: var(--ga-color-functional-white); --ga-focus-ring-color: var(--ga-color-functional-white); }
.ga-chp-now__panel .ga-chp-eyebrow { color: var(--ga-color-accent-fresh-lime); }
.ga-chp-now__title { margin: var(--ga-space-100) 0; font: var(--ga-type-display-hero); font-size: 48px; line-height: 1.25; }
.ga-chp-now__desc { margin: 0; font: var(--ga-type-body-large); color: color-mix(in srgb, var(--ga-color-functional-white) 80%, transparent); }
.ga-chp-now__more { margin: var(--ga-space-200) 0 0; font: var(--ga-type-body-small); color: color-mix(in srgb, var(--ga-color-functional-white) 70%, transparent); }
.ga-chp-now__progress { display: grid; gap: var(--ga-space-200); justify-items: start; }
.ga-chp-now__label { margin: 0; font: var(--ga-type-heading-h2); }
.ga-chp-now__bar { display: block; inline-size: 100%; block-size: 14px; border-radius: 8px; background: color-mix(in srgb, var(--ga-color-functional-white) 18%, transparent); overflow: hidden; }
.ga-chp-now__bar i { display: block; block-size: 100%; min-inline-size: 14px; border-radius: 8px; background: var(--ga-color-accent-fresh-lime); }
.ga-chp-now__panel--purple .ga-chp-now__bar i { background: var(--ga-color-brand-vivid-purple); box-shadow: inset 0 0 0 2px var(--ga-color-functional-white); }
.ga-chp-now__panel--pink .ga-chp-now__bar i { background: var(--ga-color-accent-pop-pink); }

/* ═════════ Compare ═════════ */
.ga-chp-t { inline-size: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ga-chp-t thead td, .ga-chp-t tfoot td:first-child { border: 0; }
.ga-chp-t th, .ga-chp-t td { padding: var(--ga-space-200); text-align: start; vertical-align: top; font: var(--ga-type-body-default); }
.ga-chp-t tbody th { inline-size: 160px; font: var(--ga-type-label-default); font-weight: 700; color: var(--ga-text-muted); border-block-start: 1px solid var(--ga-border-default); }
.ga-chp-t tbody td { border-block-start: 1px solid var(--ga-border-default); }
.ga-chp-t tbody tr:first-child td, .ga-chp-t tbody tr:first-child th { border-block-start: 2px solid var(--ga-color-text-deep-ink); font-weight: 700; }
.ga-chp-t__head { display: table-cell; font: var(--ga-type-heading-h3); }
.ga-chp-t__head span { display: block; margin-block-end: 2px; font: var(--ga-type-body-small); font-weight: 700; }
.ga-chp-t__head--lime span { color: #5d7a00; }
.ga-chp-t__head--purple span { color: var(--ga-color-brand-vivid-purple); }
.ga-chp-t__head--pink span { color: #c4235b; }
.ga-chp-t__head { border-block-end: 6px solid; }
.ga-chp-t__head--lime { border-color: var(--ga-color-accent-fresh-lime); }
.ga-chp-t__head--purple { border-color: var(--ga-color-brand-vivid-purple); }
.ga-chp-t__head--pink { border-color: var(--ga-color-accent-pop-pink); }
.ga-chp-t tfoot td { padding-block-start: var(--ga-space-300); }
.ga-chp-stack { display: none; }

/* ═════════ How it works ═════════ */
.ga-chp-how__panel { padding: var(--ga-space-600); border-radius: 32px; background: var(--ga-color-brand-electric-orange); }
.ga-chp-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ga-space-400); margin: 0; padding: 0; list-style: none; }
.ga-chp-steps::before { content: ""; position: absolute; z-index: 0; inset-block-start: 32px; inset-inline: 32px 12%; border-block-start: 3px dashed var(--ga-color-text-deep-ink); opacity: .5; }
.ga-chp-steps li { position: relative; display: grid; align-content: start; gap: var(--ga-space-100); }
.ga-chp-steps__n { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 16px; background: var(--ga-color-text-deep-ink); color: var(--ga-color-accent-fresh-lime); font-size: 32px; font-weight: 700; margin-block-end: var(--ga-space-100); }
.ga-chp-steps b { font: var(--ga-type-heading-h3); }
.ga-chp-steps span:not(.ga-chp-steps__n) { font: var(--ga-type-body-default); }

/* ═════════ FAQ ═════════ */
.ga-chp-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--ga-space-600); align-items: start; }
.ga-chp-faq__list { border-block-start: 2px solid var(--ga-color-text-deep-ink); }
.ga-chp-q { border-block-end: 1px solid var(--ga-border-default); }
.ga-chp-q__h { margin: 0; }
.ga-chp-q__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--ga-space-200); inline-size: 100%; padding: var(--ga-space-200) 0; border: 0; background: none; color: var(--ga-text-primary); text-align: start; font: var(--ga-type-heading-h4); font-family: var(--ga-font-family); cursor: pointer; border-radius: 4px; }
.ga-chp-q__btn svg { flex: none; inline-size: 24px; block-size: 24px; transition: rotate var(--ga-motion-duration-base) ease; }
.ga-chp-q__btn[aria-expanded="true"] svg { rotate: 45deg; }
.ga-chp-q__btn:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 2px; }
.ga-chp-q__a { padding-block-end: var(--ga-space-200); }
.ga-chp-q__a[hidden] { display: none; }
.ga-chp-q__a p { margin: 0; font: var(--ga-type-body-default); color: var(--ga-text-muted); max-inline-size: 62ch; }

/* ═════════ Closing ═════════ */
.ga-chp-close__panel { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: start; gap: var(--ga-space-200); padding: var(--ga-space-800); border-radius: 32px; background: var(--ga-color-brand-vivid-purple); color: var(--ga-color-functional-white); --ga-focus-ring-color: var(--ga-color-functional-white); }
.ga-chp-close__title { margin: 0; font: var(--ga-type-display-hero); }
.ga-chp-close__lead { margin: 0 0 var(--ga-space-200); font: var(--ga-type-body-large); color: color-mix(in srgb, var(--ga-color-functional-white) 85%, transparent); }
.ga-chp-close__bars { position: absolute; z-index: -1; inset-block-end: 0; inset-inline-end: var(--ga-space-600); display: flex; align-items: flex-end; gap: 8px; }
.ga-chp-close__bars i { inline-size: 22px; border-radius: 8px 8px 0 0; background: var(--ga-color-accent-fresh-lime); }
.ga-chp-close__bars i:nth-child(1) { block-size: 30px; opacity: .3; } .ga-chp-close__bars i:nth-child(2) { block-size: 50px; opacity: .4; }
.ga-chp-close__bars i:nth-child(3) { block-size: 70px; opacity: .5; } .ga-chp-close__bars i:nth-child(4) { block-size: 90px; opacity: .65; }
.ga-chp-close__bars i:nth-child(5) { block-size: 110px; opacity: .8; } .ga-chp-close__bars i:nth-child(6) { block-size: 130px; opacity: .9; }
.ga-chp-close__bars i:nth-child(7) { block-size: 150px; background: var(--ga-color-brand-electric-orange); }

/* ═════════ Responsive ═════════ */
@media (max-width: 1199px) {
  .ga-chp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ga-space-400); }
  .ga-chp-num:nth-child(1) a { min-block-size: 190px; } .ga-chp-num:nth-child(2) a { min-block-size: 230px; } .ga-chp-num:nth-child(3) a { min-block-size: 270px; }
  .ga-chp-how__panel, .ga-chp-close__panel, .ga-chp-now__panel { padding: var(--ga-space-500); border-radius: 28px; }
  .ga-chp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ga-chp-steps::before { display: none; }
}
@media (max-width: 1023px) {
  .ga-chp-t { display: none; }
  .ga-chp-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ga-space-200); }
  .ga-chp-stack__item { display: grid; align-content: start; gap: var(--ga-space-100); padding-block-start: var(--ga-space-200); border-block-start: 6px solid; }
  .ga-chp-stack__item--lime { border-color: var(--ga-color-accent-fresh-lime); }
  .ga-chp-stack__item--purple { border-color: var(--ga-color-brand-vivid-purple); }
  .ga-chp-stack__item--pink { border-color: var(--ga-color-accent-pop-pink); }
  .ga-chp-stack__type { margin: 0; font: var(--ga-type-body-small); font-weight: 700; color: var(--ga-text-muted); }
  .ga-chp-stack__title { margin: 0; font: var(--ga-type-heading-h3); }
  .ga-chp-stack dl { display: grid; gap: var(--ga-space-100); margin: 0 0 var(--ga-space-100); }
  .ga-chp-stack dt { font: var(--ga-type-body-small); font-weight: 700; }
  .ga-chp-stack dd { margin: 0; font: var(--ga-type-body-small); color: var(--ga-text-muted); }
  .ga-chp-stack .ga-btn { justify-self: start; }
  .ga-chp-now__panel { grid-template-columns: minmax(0, 1fr); }
  .ga-chp-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 767px) {
  .ga-chp > .ga-chp-hero { padding-block-start: var(--ga-space-200); }
  .ga-chp-hero__title { font: var(--ga-type-heading-h1); }
  .ga-chp-hero__lead { font: var(--ga-type-body-default); }
  .ga-chp-hero__actions .ga-btn { flex: 1 1 100%; }
  .ga-chp-nums { gap: var(--ga-space-100); }
  .ga-chp-num a { padding: var(--ga-space-200); border-radius: 16px; }
  .ga-chp-num:nth-child(1) a { min-block-size: 140px; } .ga-chp-num:nth-child(2) a { min-block-size: 170px; } .ga-chp-num:nth-child(3) a { min-block-size: 200px; }
  .ga-chp-num__n { font-size: 48px; }
  .ga-chp-num__unit { font: var(--ga-type-body-small); font-weight: 700; }
  .ga-chp-num__name { display: none; }
  .ga-chp-num__live { position: static; justify-self: start; margin-block-start: auto; }
  .ga-chp-h2 { font: var(--ga-type-heading-h2); margin-block-end: var(--ga-space-300); }
  .ga-chp-stack { grid-template-columns: minmax(0, 1fr); gap: var(--ga-space-300); }
  .ga-chp-now__panel, .ga-chp-how__panel { padding: var(--ga-space-400) var(--ga-space-300); border-radius: 24px; }
  .ga-chp-now__title { font: var(--ga-type-heading-h1); }
  .ga-chp-now__progress .ga-btn { inline-size: 100%; }
  .ga-chp-steps { grid-template-columns: minmax(0, 1fr); gap: var(--ga-space-300); }
  .ga-chp-steps li { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--ga-space-200); }
  .ga-chp-steps__n { grid-row: 1 / span 2; inline-size: 56px; block-size: 56px; font-size: 26px; margin: 0; }
  .ga-chp-steps b { font: var(--ga-type-heading-h4); }
  .ga-chp-close__panel { padding: var(--ga-space-500) var(--ga-space-300) var(--ga-space-1000); border-radius: 24px; }
  .ga-chp-close__title { font: var(--ga-type-heading-h1); }
  .ga-chp-close__panel .ga-btn { inline-size: 100%; }
  .ga-chp-close__bars { inset-inline-end: var(--ga-space-300); gap: 5px; }
  .ga-chp-close__bars i { inline-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ga-chp-num a, .ga-chp-q__btn svg { transition: none; }
  .ga-chp-num a:hover { translate: none; }
}