/* =============================================================================
   Homepage — built to the APPROVED REFERENCE LAYOUT, on design-system tokens.
   Structure mirrors the reference exactly:
     1. Hero band  = [ main hero | "لماذا" panel ]  side by side, both on navy
     2. تصنيف البنوك = 3 cards: glyph, count, bulleted topics, full-width CTA
     3. كيف تعمل المنصة = 5 circular steps with connectors
     4. تجربة منصة الطالب = sidebar mockup + stat tiles, on navy
     5. شاشة حل الأسئلة | نتيجة الاختبار = two paired panels
   Colour and spacing resolve to tokens throughout. A few purely decorative
   sizes (glyph circles, mock-up stat digits) stay literal on purpose: they
   are illustration, not part of the reading type scale.
   ========================================================================== */

.dhx{font-family:var(--dh-font-body);color:var(--dh-ink);background:var(--dh-surface-2);}
.dhx *{box-sizing:border-box;}

/* -----------------------------------------------------------------------
   Heading font: won by redefining their variable, not by out-shouting them.

   The vendor sheet ships `h1..h6 { font-family: var(--font_family1)!important }`.
   An !important element rule beats `.dhx-hero h1` at ANY specificity, so the
   display font silently fell back to IBMPlexArabic -- font-size and
   line-height from my own rule applied, which is exactly what made it look
   like the rule had won. (Measured via CSS.getMatchedStylesForNode; a
   screenshot would not have shown it, the two faces are close at a glance.)

   Adding !important here would work until the next rule adds its own. Instead
   we rebind --font_family1 inside .dhx: their !important rule still wins, and
   now it resolves to our display face. Their cascade, our value.
   ----------------------------------------------------------------------- */
.dhx{--font_family1:var(--dh-font-display);}
.dhx-head{text-align:center;max-width:var(--dh-measure);margin:0 auto var(--dh-s10);}
.dhx-head h2{font-family:var(--dh-font-display);font-size:var(--dh-fs-h2);
  line-height:var(--dh-lh-heading);margin:0;color:var(--dh-ink);}
.dhx-head p{color:var(--dh-ink-2);margin-top:var(--dh-s3);}
.dhx-rv{opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);}
.dhx-rv.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.dhx-rv{opacity:1;transform:none;}}

/* ===================== 1. HERO BAND (two panels) ========================= */
.dhx-band{
  background:linear-gradient(135deg,var(--dh-ground-900) 0%,var(--dh-ground-800) 60%,var(--dh-ground-700) 100%);
  color:#fff;padding-block:var(--dh-s12);
}
/* Column order note (RTL): the first DOM child lands in the RIGHT-hand column.
   The reference puts the "لماذا" panel on the right and the hero on the left,
   so the aside is authored FIRST in the markup and the hero second. Same rule
   inside the hero: the copy is first (right), the portrait second (left). */
.dhx-band__grid{display:grid;grid-template-columns:1fr 1.55fr;gap:var(--dh-s8);align-items:stretch;}
@media (max-width:1040px){
  .dhx-band__grid{grid-template-columns:1fr;}
  /* stacked, the hero must lead -- the "why" panel is supporting content */
  .dhx-band__grid > .dhx-hero{order:-1;}
}

/* --- main hero --- */
.dhx-hero{display:grid;grid-template-columns:1fr auto;gap:var(--dh-s8);align-items:center;}
@media (max-width:760px){.dhx-hero{grid-template-columns:1fr;text-align:center;}}
.dhx-hero__photo{width:210px;justify-self:center;}
.dhx-hero__photo img{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;
  border-radius:var(--dh-r-lg);box-shadow:var(--dh-e3);border:1px solid rgba(255,255,255,.16);
}
.dhx-hero__eyebrow{color:var(--dh-gold-400);font-family:var(--dh-font-display);
  font-weight:700;font-size:var(--dh-fs-h3);margin:0 0 var(--dh-s2);}
.dhx-hero h1{font-family:var(--dh-font-display);font-size:clamp(28px,3.6vw,44px);
  line-height:var(--dh-lh-display);font-weight:700;color:#fff;margin:0;}
.dhx-hero__tag{color:var(--dh-gold-400);font-family:var(--dh-font-display);
  font-size:clamp(16px,1.8vw,20px);font-weight:600;margin-top:var(--dh-s3);}
.dhx-hero__sub{color:#B9CBDE;font-size:var(--dh-fs-body-sm);line-height:var(--dh-lh-body);
  margin-top:var(--dh-s3);max-width:52ch;}
@media (max-width:760px){.dhx-hero__sub{margin-inline:auto;}}

.dhx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--dh-s4);
  margin-top:var(--dh-s8);padding-top:var(--dh-s5);border-top:1px solid rgba(255,255,255,.16);}
@media (max-width:640px){.dhx-stats{grid-template-columns:repeat(2,1fr);gap:var(--dh-s5);}}
.dhx-stat__n{font-family:var(--dh-font-display);font-size:clamp(22px,2.6vw,30px);
  font-weight:700;color:var(--dh-gold-400);line-height:1.1;font-variant-numeric:tabular-nums;}
.dhx-stat__l{font-size:var(--dh-fs-help);color:#9FB6CD;margin-top:var(--dh-s1);line-height:1.45;}
.dhx-hero__cta{display:flex;flex-wrap:wrap;gap:var(--dh-s3);margin-top:var(--dh-s8);}
@media (max-width:760px){.dhx-hero__cta{justify-content:center;}}

/* --- "لماذا" panel, inside the hero band --- */
.dhx-why{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--dh-r-lg);padding:var(--dh-s6);
  display:flex;flex-direction:column;gap:var(--dh-s3);
}
.dhx-why h2{font-family:var(--dh-font-display);font-size:var(--dh-fs-h3);
  color:#fff;margin:0 0 var(--dh-s2);}
.dhx-why__row{
  display:flex;align-items:flex-start;gap:var(--dh-s3);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--dh-r);padding:var(--dh-s4);
  transition:background .2s ease,border-color .2s ease;
}
.dhx-why__row:hover{background:rgba(255,255,255,.09);border-color:var(--dh-gold-500);}
.dhx-why__ic{width:38px;height:38px;border-radius:var(--dh-r-sm);flex:none;display:grid;
  place-items:center;background:rgba(242,183,5,.16);color:var(--dh-gold-400);}
.dhx-why__row b{display:block;font-family:var(--dh-font-display);font-size:var(--dh-fs-body-sm);
  color:#fff;margin-bottom:2px;}
.dhx-why__row span{font-size:var(--dh-fs-help);color:#9FB6CD;line-height:1.55;}

/* ========================= 2. تصنيف البنوك =============================== */
.dhx-banks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--dh-s5);}
@media (max-width:920px){.dhx-banks{grid-template-columns:1fr;max-width:520px;margin-inline:auto;}}
.dhx-bank{background:var(--dh-surface);border:1px solid var(--dh-line);border-radius:var(--dh-r-lg);
  padding:var(--dh-s6);display:flex;flex-direction:column;text-align:center;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.dhx-bank:hover{transform:translateY(-5px);box-shadow:var(--dh-e3);border-color:var(--dh-blue-400);}
.dhx-bank__glyph{width:62px;height:62px;margin:0 auto var(--dh-s4);border-radius:var(--dh-r);
  display:grid;place-items:center;font-family:var(--dh-font-display);font-size:28px;font-weight:700;}
.dhx-bank--a .dhx-bank__glyph{background:var(--dh-blue-50);color:var(--dh-blue-600);}
.dhx-bank--b .dhx-bank__glyph{background:var(--dh-gold-50);color:var(--dh-gold-600);}
.dhx-bank--c .dhx-bank__glyph{background:#F1ECFB;color:#6B3FA0;}
:root[data-theme="dark"] .dhx-bank--c .dhx-bank__glyph{background:#241B3A;color:#B9A0EA;}
.dhx-bank h3{font-family:var(--dh-font-display);font-size:var(--dh-fs-h3);margin:0;color:var(--dh-ink);}
.dhx-bank__count{font-family:var(--dh-font-display);font-weight:700;color:var(--dh-blue-600);
  margin-top:var(--dh-s1);font-variant-numeric:tabular-nums;}
.dhx-bank__topics{list-style:none;margin:var(--dh-s5) 0 0;padding:var(--dh-s5) 0 0;
  border-top:1px solid var(--dh-line-soft);display:flex;flex-direction:column;
  gap:var(--dh-s2);flex:1;text-align:start;}
.dhx-bank__topics li{display:flex;align-items:center;gap:var(--dh-s2);
  font-size:var(--dh-fs-body-sm);color:var(--dh-ink-2);}
.dhx-bank__topics li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--dh-gold-500);flex:none;}
.dhx-bank .dh-btn{width:100%;margin-top:var(--dh-s5);}

/* ======================= 3. كيف تعمل المنصة ============================== */
.dhx-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--dh-s4);}
@media (max-width:1000px){.dhx-steps{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.dhx-steps{grid-template-columns:repeat(2,1fr);}}
.dhx-step{text-align:center;position:relative;}
/* connector between steps; hidden at the row edge and on small screens */
.dhx-step:not(:last-child)::after{
  content:"";position:absolute;top:32px;inset-inline-start:-50%;width:100%;height:1.5px;
  background:linear-gradient(to left,var(--dh-line),transparent);z-index:0;
}
@media (max-width:1000px){.dhx-step::after{display:none!important;}}
.dhx-step__ic{position:relative;z-index:1;width:64px;height:64px;margin:0 auto var(--dh-s4);
  border-radius:50%;display:grid;place-items:center;background:var(--dh-surface);
  border:1.5px solid var(--dh-line);color:var(--dh-blue-600);box-shadow:var(--dh-e1);}
.dhx-step h3{font-family:var(--dh-font-display);font-size:var(--dh-fs-body-sm);
  margin:0 0 var(--dh-s1);color:var(--dh-ink);}
.dhx-step p{font-size:var(--dh-fs-help);color:var(--dh-ink-3);margin:0;line-height:1.55;}

/* ==================== 4. تجربة منصة الطالب (داشبورد) =====================
   Reads as a screenshot of the real product, not four numbers in a row.

   Three defects in the first pass, all visible in the 1440 capture:
     1. grid items default to align-items:stretch, so each stat tile inherited
        the sidebar's height and became a ~420px column with one number at the
        top. Fixed with align-items:start plus real content underneath.
     2. the panel gradient lightens toward the sidebar corner, so the sidebar's
        rgba(255,255,255,.05) rendered near-white and its nav labels fell to
        roughly 2:1. The sidebar now paints a SOLID colour of its own instead
        of relying on translucency over an unknown backdrop.
     3. no greeting, no chart, no continue-row -- nothing that says "product".
   ------------------------------------------------------------------------ */
.dhx-dash{
  background:var(--dh-ground-900);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--dh-r-lg);overflow:hidden;color:#fff;box-shadow:var(--dh-e3);

  /* This panel is ALWAYS dark, in both themes -- it depicts the product, not
     the page. So it must not consume theme tokens that flip: --dh-blue-600 is
     #2563EB in light but #6FA8E8 in dark, which dropped white button text to
     2.49:1 in dark mode while looking correct in light. Measured, not guessed.
     These locals pin the mock's palette so it renders identically either way. */
  --dhm-blue:#2563EB;
  --dhm-blue-lt:#7FB0F0;
  --dhm-gold:#F2B705;
  --dhm-ink-2:#A9C0D6;
}
/* window chrome: cheap, and it instantly frames the block as a screenshot */
.dhx-dash__chrome{
  display:flex;align-items:center;gap:var(--dh-s2);
  padding:var(--dh-s3) var(--dh-s4);background:rgba(0,0,0,.28);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dhx-dash__dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22);flex:none;}
.dhx-dash__url{
  margin-inline-start:var(--dh-s3);font-size:var(--dh-fs-help);color:#8FA6BD;
  background:rgba(255,255,255,.07);border-radius:var(--dh-r-pill);
  padding:3px var(--dh-s4);direction:ltr;
}
.dhx-dash__body{display:grid;grid-template-columns:210px 1fr;align-items:start;}
@media (max-width:860px){.dhx-dash__body{grid-template-columns:1fr;}}

/* --- sidebar: solid, not translucent --- */
.dhx-side{background:#04203F;padding:var(--dh-s5) var(--dh-s4);align-self:stretch;
  border-inline-start:1px solid rgba(255,255,255,.07);}
@media (max-width:860px){.dhx-side{display:none;}}
.dhx-side__me{display:flex;align-items:center;gap:var(--dh-s3);
  padding-bottom:var(--dh-s4);margin-bottom:var(--dh-s4);
  border-bottom:1px solid rgba(255,255,255,.12);}
.dhx-side__av{width:38px;height:38px;border-radius:50%;background:var(--dhm-gold);
  display:grid;place-items:center;color:#3A2A00;font-weight:700;flex:none;
  font-family:var(--dh-font-display);}
.dhx-side__me b{display:block;font-size:var(--dh-fs-body-sm);color:#fff;}
.dhx-side__me span{font-size:var(--dh-fs-help);color:#8FA6BD;}
.dhx-side__nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.dhx-side__nav li{
  display:flex;align-items:center;gap:var(--dh-s3);padding:var(--dh-s2) var(--dh-s3);
  border-radius:var(--dh-r-sm);font-size:var(--dh-fs-body-sm);
  color:#C2D4E6;                       /* was #B9CBDE on a washed-out ground */
  border-inline-start:2px solid transparent;
}
.dhx-side__nav li svg{width:16px;height:16px;flex:none;opacity:.8;}
.dhx-side__nav li.is-active{
  background:rgba(255,255,255,.1);color:#fff;font-weight:600;
  border-inline-start-color:var(--dh-gold-400);
}

/* --- main column --- */
.dhx-main{padding:var(--dh-s6);display:flex;flex-direction:column;gap:var(--dh-s5);}
@media (max-width:600px){.dhx-main{padding:var(--dh-s4);}}
.dhx-greet{display:flex;align-items:center;justify-content:space-between;gap:var(--dh-s4);flex-wrap:wrap;}
.dhx-greet h3{font-family:var(--dh-font-display);font-size:var(--dh-fs-h3);margin:0;color:#fff;}
.dhx-greet p{font-size:var(--dh-fs-help);color:#8FA6BD;margin:2px 0 0;}
.dhx-streak{
  display:inline-flex;align-items:center;gap:var(--dh-s2);
  background:rgba(242,183,5,.14);border:1px solid rgba(242,183,5,.32);
  color:var(--dhm-gold);border-radius:var(--dh-r-pill);
  padding:var(--dh-s2) var(--dh-s4);font-size:var(--dh-fs-help);font-weight:600;
}

/* stat tiles: align-items:start is what stops the 420px stretch */
.dhx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--dh-s3);align-items:start;}
@media (max-width:900px){.dhx-tiles{grid-template-columns:repeat(2,1fr);}}
.dhx-tile{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--dh-r);padding:var(--dh-s4);
}
.dhx-tile__l{font-size:var(--dh-fs-help);color:#8FA6BD;}
.dhx-tile__v{font-family:var(--dh-font-display);font-size:24px;font-weight:700;
  color:#fff;margin-top:2px;line-height:1.2;font-variant-numeric:tabular-nums;}
.dhx-tile__v small{font-size:13px;font-weight:400;color:#8FA6BD;margin-inline-start:4px;}
.dhx-tile__v--ok{color:#5FD69A;}
.dhx-bar{height:5px;border-radius:var(--dh-r-pill);background:rgba(255,255,255,.14);
  margin-top:var(--dh-s3);overflow:hidden;}
.dhx-bar>span{display:block;height:100%;border-radius:var(--dh-r-pill);background:var(--dhm-gold);}
.dhx-bar--ok>span{background:#5FD69A;}

/* lower row: weekly chart + continue card */
.dhx-lower{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--dh-s3);align-items:start;}
@media (max-width:900px){.dhx-lower{grid-template-columns:1fr;}}
.dhx-panelbox{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--dh-r);padding:var(--dh-s4);}
.dhx-panelbox h4{font-family:var(--dh-font-display);font-size:var(--dh-fs-body-sm);
  margin:0 0 var(--dh-s4);color:#fff;}
.dhx-week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--dh-s2);
  align-items:end;height:96px;}
.dhx-week__col{display:flex;flex-direction:column;align-items:center;gap:var(--dh-s2);
  height:100%;justify-content:flex-end;}
.dhx-week__fill{width:100%;max-width:26px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--dhm-blue-lt),var(--dhm-blue));}
.dhx-week__col--today .dhx-week__fill{background:linear-gradient(180deg,var(--dhm-gold),#C59848);}
/* 11px here was a regression I reintroduced with this section -- the audit
   caught it only because it counts sub-13px nodes. */
.dhx-week__d{font-size:var(--dh-fs-help);color:var(--dhm-ink-2);}
/* continue-studying row */
.dhx-cont{display:flex;align-items:center;gap:var(--dh-s3);}
.dhx-cont__ic{width:42px;height:42px;border-radius:var(--dh-r-sm);flex:none;display:grid;
  place-items:center;background:rgba(59,130,246,.2);color:var(--dhm-blue-lt);
  font-family:var(--dh-font-display);font-weight:700;}
.dhx-cont b{display:block;font-size:var(--dh-fs-body-sm);color:#fff;}
.dhx-cont span{font-size:var(--dh-fs-help);color:#8FA6BD;}
.dhx-cont__btn{
  margin-top:var(--dh-s4);display:block;width:100%;text-align:center;
  background:var(--dhm-blue);color:#fff;border-radius:var(--dh-r-sm);
  padding:var(--dh-s3);font-size:var(--dh-fs-body-sm);font-weight:600;
}

/* ============= 5. شاشة حل الأسئلة | نتيجة الاختبار ====================== */
.dhx-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--dh-s5);}
@media (max-width:900px){.dhx-pair{grid-template-columns:1fr;}}
.dhx-panel{background:var(--dh-surface);border:1px solid var(--dh-line);
  border-radius:var(--dh-r-lg);padding:var(--dh-s6);box-shadow:var(--dh-e1);}
.dhx-panel__t{font-family:var(--dh-font-display);font-size:var(--dh-fs-h3);
  text-align:center;margin:0 0 var(--dh-s5);color:var(--dh-ink);}
/* exam screen */
.dhx-exam__bar{display:flex;align-items:center;justify-content:space-between;
  font-size:var(--dh-fs-help);color:var(--dh-ink-3);margin-bottom:var(--dh-s4);}
.dhx-exam__nums{display:flex;flex-wrap:wrap;gap:var(--dh-s1);margin-bottom:var(--dh-s5);}
.dhx-exam__nums span{width:26px;height:26px;border-radius:var(--dh-r-sm);display:grid;
  place-items:center;font-size:var(--dh-fs-help);background:var(--dh-surface-3);color:var(--dh-ink-2);
  font-variant-numeric:tabular-nums;}
.dhx-exam__nums span.is-now{background:var(--dh-blue-600);color:#fff;font-weight:700;}
.dhx-exam__q{font-weight:700;color:var(--dh-ink);margin-bottom:var(--dh-s4);line-height:1.7;}
.dhx-opt{display:flex;align-items:center;gap:var(--dh-s3);padding:var(--dh-s3) var(--dh-s4);
  border:1.5px solid var(--dh-line);border-radius:var(--dh-r-sm);margin-bottom:var(--dh-s2);
  font-size:var(--dh-fs-body-sm);color:var(--dh-ink-2);}
.dhx-opt.is-picked{border-color:var(--dh-blue-600);background:var(--dh-blue-50);color:var(--dh-ink);}
.dhx-opt i{font-style:normal;width:24px;height:24px;border-radius:var(--dh-r-sm);flex:none;
  display:grid;place-items:center;background:var(--dh-surface-3);color:var(--dh-ink-2);
  font-size:12px;font-weight:700;}
.dhx-opt.is-picked i{background:var(--dh-blue-600);color:#fff;}
/* result screen */
.dhx-score{text-align:center;margin-bottom:var(--dh-s5);}
.dhx-score__v{font-family:var(--dh-font-display);font-size:44px;font-weight:700;
  color:var(--dh-success);line-height:1;font-variant-numeric:tabular-nums;}
.dhx-score__l{font-size:var(--dh-fs-help);color:var(--dh-ink-3);margin-top:var(--dh-s1);}
.dhx-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--dh-s4);
  align-items:end;height:120px;margin-top:var(--dh-s5);}
.dhx-bars__col{display:flex;flex-direction:column;align-items:center;gap:var(--dh-s2);height:100%;
  justify-content:flex-end;}
.dhx-bars__fill{width:100%;border-radius:var(--dh-r-sm) var(--dh-r-sm) 0 0;background:var(--dh-blue-600);}
.dhx-bars__col:nth-child(2) .dhx-bars__fill{background:var(--dh-gold-500);}
.dhx-bars__col:nth-child(3) .dhx-bars__fill{background:var(--dh-blue-400);}
.dhx-bars__lab{font-size:var(--dh-fs-help);color:var(--dh-ink-3);}
.dhx-bars__pct{font-family:var(--dh-font-display);font-weight:700;font-size:var(--dh-fs-body-sm);
  color:var(--dh-ink);font-variant-numeric:tabular-nums;}

/* =============================================================================
   Legacy .dh sections — accessibility pass.
   These sections predate the token system and were built with hand-picked px
   sizes; six selectors landed under 13px. Rather than rewrite their (Arabic)
   markup and risk the layout the owner has already approved, the type is
   lifted onto tokens in place.

   The phone mock-up is aria-hidden decoration, so its small type is not a
   screen-reader issue -- but it is still a low-vision one, so it moves up to
   --dh-fs-help (13px) and the mock-up is widened just enough to absorb it
   without reflowing the section.
   ========================================================================== */
.dh .store small{font-size:var(--dh-fs-help);}          /* was 11px  -- real UI */
.dh .try-n{font-size:var(--dh-fs-help);}                /* was 12px  -- real UI */
.dh .fc-lab{font-size:var(--dh-fs-help);}               /* was 11px */
.dh .pq{font-size:var(--dh-fs-help);}                   /* was 11px   decorative */
.dh .pq .qh{font-size:var(--dh-fs-help);line-height:1.65;} /* was 11.5px */
.dh .pgrid span{font-size:var(--dh-fs-help);}           /* was 10.5px */
.dh .phone{width:min(310px,100%);}                      /* +26px so the above fits */
.dh .pbar{font-size:var(--dh-fs-help);}      /* was 12px */
.dh .try-tag{font-size:var(--dh-fs-help);}   /* was 11.5px */
/* <sup> inherits 0.75em, which drops an already-small parent below the floor;
   Arabic exponents (٢^ن) become unreadable well before Latin ones do. */
.dh sup,.dhx sup{font-size:.8em;}
.dh .try-q,.dh .solve{font-size:var(--dh-fs-body-sm);}

/* --- residual contrast fixes found by the full audit ---------------------
   .pbar paints white text on linear-gradient(--navy, --navy-2). Those legacy
   tokens flip LIGHT in dark theme (--navy becomes #6FA8E8), so the bar went to
   2.19:1 -- the same "theme token used as an always-dark ground" bug as the
   hero band and the primary button. Pinned to the ground tokens.
   .slot is a dashed placeholder box; its label was 3.67:1. */
.dh .pbar{background:linear-gradient(135deg,var(--dh-ground-700),var(--dh-ground-800));}
.dh .slot{color:var(--dh-ink-2);}

/* =============================================================================
   Phase 6 additions: §5 diagnostic, §8 benefits, §10 proof.
   All three use the existing tokens; the diagnostic panel is an always-dark
   ground so it uses --dh-ground-* / --dhm-* and not the theme-flipping tokens.
   ========================================================================== */

/* ---------------------- §5 free diagnostic exam ------------------------- */
.dhx-diag{
  display:grid;grid-template-columns:1fr auto;gap:var(--dh-s10);align-items:center;
  background:linear-gradient(135deg,var(--dh-ground-900),var(--dh-ground-700));
  border-radius:var(--dh-r-lg);padding:var(--dh-s10);color:#fff;box-shadow:var(--dh-e2);
  --dhm-gold:#F2B705;
}
@media (max-width:860px){.dhx-diag{grid-template-columns:1fr;padding:var(--dh-s6);}}
.dhx-diag__chip{
  display:inline-block;background:rgba(242,183,5,.16);border:1px solid rgba(242,183,5,.34);
  color:#F2B705;border-radius:var(--dh-r-pill);padding:2px var(--dh-s4);
  font-size:var(--dh-fs-help);font-weight:700;margin-bottom:var(--dh-s3);
}
.dhx-diag h2{font-family:var(--dh-font-display);font-size:var(--dh-fs-h2);
  line-height:var(--dh-lh-heading);color:#fff;margin:0 0 var(--dh-s3);}
.dhx-diag p{color:#B9CBDE;font-size:var(--dh-fs-body-sm);line-height:var(--dh-lh-body);
  max-width:56ch;margin:0;}
.dhx-diag__list{list-style:none;margin:var(--dh-s5) 0 var(--dh-s6);padding:0;
  display:flex;flex-direction:column;gap:var(--dh-s2);}
.dhx-diag__list li{display:flex;align-items:center;gap:var(--dh-s2);
  font-size:var(--dh-fs-body-sm);color:#D7E3EE;}
.dhx-diag__list li::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#F2B705;flex:none;}
.dhx-diag__viz{justify-self:center;}
.dhx-diag__ring{position:relative;display:grid;place-items:center;}
.dhx-diag__ringtxt{position:absolute;text-align:center;}
.dhx-diag__ringtxt b{display:block;font-family:var(--dh-font-display);font-size:30px;
  color:#fff;font-variant-numeric:tabular-nums;line-height:1;}
.dhx-diag__ringtxt span{font-size:var(--dh-fs-help);color:#9FB6CD;}
@media (max-width:860px){.dhx-diag__viz{display:none;}}

/* Reusable honest empty state -- no data yet, and saying so. */
.dhx-empty{
  background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.28);
  border-radius:var(--dh-r);padding:var(--dh-s5);max-width:52ch;
}
.dhx-empty b{display:block;font-family:var(--dh-font-display);color:#fff;
  font-size:var(--dh-fs-body);margin-bottom:var(--dh-s1);}
.dhx-empty span{display:block;font-size:var(--dh-fs-body-sm);color:#B9CBDE;
  line-height:1.6;margin-bottom:var(--dh-s4);}
.dhx-empty .dh-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.dhx-empty .dh-btn:hover{background:rgba(255,255,255,.1);color:#fff;}

/* -------------------------- §8 student benefits ------------------------- */
.dhx-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--dh-s4);align-items:start;}
@media (max-width:1000px){.dhx-benefits{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.dhx-benefits{grid-template-columns:1fr;}}
.dhx-benefit{background:var(--dh-surface);border:1px solid var(--dh-line);
  border-radius:var(--dh-r);padding:var(--dh-s6);
  transition:transform .2s ease,box-shadow .2s ease;}
.dhx-benefit:hover{transform:translateY(-4px);box-shadow:var(--dh-e2);}
.dhx-benefit__ic{width:44px;height:44px;border-radius:var(--dh-r-sm);display:grid;
  place-items:center;background:var(--dh-blue-50);color:var(--dh-blue-600);
  margin-bottom:var(--dh-s4);}
.dhx-benefit h3{font-family:var(--dh-font-display);font-size:var(--dh-fs-h3);
  margin:0 0 var(--dh-s2);color:var(--dh-ink);}
.dhx-benefit p{font-size:var(--dh-fs-body-sm);color:var(--dh-ink-2);line-height:1.7;margin:0;}

/* ----------------------------- §10 proof -------------------------------- */
.dhx-proof{background:var(--dh-surface);border:1px solid var(--dh-line);
  border-radius:var(--dh-r-lg);padding:var(--dh-s10);box-shadow:var(--dh-e1);}
@media (max-width:600px){.dhx-proof{padding:var(--dh-s6);}}
.dhx-proof__head{text-align:center;max-width:var(--dh-measure);margin:0 auto var(--dh-s8);}
.dhx-proof__head h2{font-family:var(--dh-font-display);font-size:var(--dh-fs-h2);
  line-height:var(--dh-lh-heading);margin:0;color:var(--dh-ink);}
.dhx-proof__head p{color:var(--dh-ink-2);margin-top:var(--dh-s3);font-size:var(--dh-fs-body-sm);}
.dhx-proof__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--dh-s5);
  padding-top:var(--dh-s6);border-top:1px solid var(--dh-line-soft);}
@media (max-width:760px){.dhx-proof__grid{grid-template-columns:repeat(2,1fr);}}
.dhx-proof__item{text-align:center;}
.dhx-proof__item b{display:block;font-family:var(--dh-font-display);
  font-size:clamp(28px,3.4vw,38px);font-weight:700;color:var(--dh-gold-ink);
  line-height:1.1;font-variant-numeric:tabular-nums;}
.dhx-proof__item span{display:block;font-size:var(--dh-fs-help);color:var(--dh-ink-2);
  margin-top:var(--dh-s2);line-height:1.5;}
.dhx-proof__note{text-align:center;max-width:var(--dh-measure);margin:var(--dh-s8) auto 0;
  font-size:var(--dh-fs-body-sm);color:var(--dh-ink-2);line-height:1.75;}

/* ------------------------- /about-us hero ------------------------------- */
.dhx-abouthero{display:grid;grid-template-columns:1fr auto;gap:var(--dh-s10);align-items:center;}
@media (max-width:860px){.dhx-abouthero{grid-template-columns:1fr;text-align:center;}}
.dhx-abouthero__copy h1{
  font-family:var(--dh-font-display);font-size:clamp(30px,4vw,46px);
  line-height:var(--dh-lh-display);font-weight:700;color:#fff;margin:0;
}
.dhx-abouthero__photo{width:230px;justify-self:center;}
.dhx-abouthero__photo img{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;
  border-radius:var(--dh-r-lg);box-shadow:var(--dh-e3);
  border:1px solid rgba(255,255,255,.16);
}
@media (max-width:860px){.dhx-abouthero__copy .dhx-hero__sub{margin-inline:auto;}
  .dhx-abouthero__copy .dhx-hero__cta{justify-content:center;}}