/* Created: 03:24 23-Sep-2026 */
/* BAYTI Patient Support Programs — the mid-section design pass.
   Sumit, 23-Sep: "the design of all the mid sections of PSP patient support service
   is bad. You need to completely rethink it and do a better design job."

   The diagnosis was monotony, not ugliness. Six consecutive bands all used the SAME
   component — a bordered card with a teal bar down its leading edge — so a reader
   scrolling the page saw the identical shape six times and had nothing to fix on. The
   fix is not a prettier card; it is giving each band the shape its own content wants:

     routes     three doors  -> tall choice panels, one per audience
     modules    a menu       -> a quiet two-column list, no card chrome at all
     journey    a sequence   -> a numbered track with the number OUTSIDE the card
     phases     four stages  -> a wide stage strip, lettered not numbered
     why        six claims   -> airy claim cards, accent in the corner
     ecosystem  four names   -> name plates
     stats      figures      -> already distinct, tightened only

   Same rules as the rest of the design pass: transform/opacity only, hover only where
   something is clickable, logical properties so Arabic mirrors, reduced motion gets the
   final state. Loaded by the PSP pages only. */

/* ---------------------------------------------------------------- shared reset
   Every band below opts OUT of the generic .t2-card chrome and builds its own. */
#psp-routes .t2-card,#psp-modules .t2-card,#psp-journey .t2-card,
#psp-why .t2-card,#psp-ecosystem .t2-card{background:none;border:0;box-shadow:none;
  padding:0;overflow:visible}
#psp-routes .t2-card::before,#psp-modules .t2-card::before,#psp-journey .t2-card::before,
#psp-why .t2-card::before,#psp-ecosystem .t2-card::before{display:none}

/* ---------------------------------------------------------------- 1 · routes
   The first thing on the page is a fork: patients, clinicians, partners. Three tall
   panels that look like doors, each with its own list and its own way in. */
#psp-routes .psp-cards{gap:24px}
#psp-routes .t2-card{position:relative;display:flex;flex-direction:column;
  padding:30px 28px 26px;border-radius:var(--d-r-card);background:#fff;
  border:1px solid rgb(36 187 187 / .20);
  box-shadow:0 22px 48px -40px rgb(9 30 38 / .6);
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ),
             border-color .4s var(--ease-circ)}
#psp-routes .t2-card::after{content:"";position:absolute;inset-inline:0;top:0;height:4px;
  border-radius:var(--d-r-card) var(--d-r-card) 0 0;background:var(--d-grad);
  opacity:.9}
#psp-routes .t2-card-title{font-size:20px;margin-bottom:14px}
#psp-routes .t2-card li,#psp-routes .t2-card p{color:var(--text-medium)}
@media (hover:hover){
  #psp-routes .t2-card:hover{transform:translateY(-5px);
    border-color:rgb(36 187 187 / .45);box-shadow:0 30px 58px -36px rgb(26 154 154 / .6)}
}

/* ---------------------------------------------------------------- 2 · modules
   "Configurable support modules." A menu of what can be switched on, so it reads as a
   list with hairlines — no boxes at all. Boxes here competed with the routes above. */
#psp-modules .psp-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
#psp-modules .t2-card{padding:20px 0;border-bottom:1px solid rgb(22 38 46 / .09);
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start}
#psp-modules .t2-card::after{content:"";grid-row:1 / span 2;width:10px;height:10px;
  margin-top:8px;border-radius:50%;background:var(--d-grad)}
#psp-modules .t2-card-title{grid-column:2;font-size:17px}
#psp-modules .t2-card .t2-note{grid-column:2;margin-top:2px}
@media (hover:hover){#psp-modules .t2-card:hover .t2-card-title{color:var(--d-teal-deep)}}
@media (max-width:767px){#psp-modules .psp-cards{grid-template-columns:1fr;gap:0}}

/* ---------------------------------------------------------------- 3 · journey
   Six steps. The number moves OUT of the card and becomes the marker on a track, with
   the hairline running BETWEEN the markers and never across the text — the mistake
   Sumit caught on the service pages on 23-Sep. */
#psp-journey .psp-cards{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px clamp(24px,3vw,44px);counter-reset:none}
#psp-journey .t2-card{position:relative;padding-top:56px}
#psp-journey .psp-num{position:absolute;top:0;inset-inline-start:0;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  background:var(--d-grad);color:#fff;-webkit-text-fill-color:#fff;
  box-shadow:0 12px 26px -14px rgb(26 154 154 / .95);z-index:1}
/* the track: a hairline from the marker to the next card, in the gap, never over text */
#psp-journey .t2-card::after{content:"";position:absolute;top:22px;
  inset-inline-start:52px;inset-inline-end:calc(-1 * clamp(24px,3vw,44px));
  height:2px;border-radius:2px;background:rgb(36 187 187 / .28);display:block}
#psp-journey .t2-card:nth-child(3n)::after,
#psp-journey .t2-card:last-child::after{display:none}
#psp-journey .t2-card-title{font-size:18px}
@media (max-width:1023px){
  #psp-journey .psp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #psp-journey .t2-card:nth-child(3n)::after{display:block}
  #psp-journey .t2-card:nth-child(2n)::after{display:none}
}
@media (max-width:639px){
  #psp-journey .psp-cards{grid-template-columns:1fr;gap:28px}
  /* the nth-child rules in the 1023 block above out-specify a bare .t2-card::after, so
     a blanket hide here lost and one track kept sticking 8px past the page (measured). */
  #psp-journey .t2-card::after,
  #psp-journey .t2-card:nth-child(2n)::after,
  #psp-journey .t2-card:nth-child(3n)::after{display:none}
}

/* ---------------------------------------------------------------- 4 · phases
   DISCOVER / DESIGN / LAUNCH / OPTIMIZE. Stages, not items: a wide strip where the
   stage word is the object and the body sits beside it. */
#psp-journey .psp-sub-h{margin-top:clamp(48px,5vw,72px)}
#psp-journey .t2-cards--2{grid-template-columns:1fr;gap:0;margin-top:22px;
  border-top:1px solid rgb(22 38 46 / .09)}
#psp-journey .t2-cards--2 .t2-card{display:grid;
  grid-template-columns:minmax(150px,200px) 1fr;gap:6px 32px;align-items:baseline;
  padding:22px 0 22px 0;border-bottom:1px solid rgb(22 38 46 / .09);
  counter-increment:phase}
#psp-journey .t2-cards--2 .t2-card::after{display:none}
#psp-journey .t2-cards--2 .t2-card-title{font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-teal-deep);font-weight:700;
  position:relative;padding-inline-start:34px}
#psp-journey .t2-cards--2 .t2-card-title::before{
  content:counter(phase,upper-alpha);position:absolute;inset-inline-start:0;top:-2px;
  display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:rgb(36 187 187 / .14);color:var(--d-teal-deep);font-size:12px}
@media (hover:hover){
  #psp-journey .t2-cards--2 .t2-card:hover .t2-card-title::before{
    background:var(--d-grad);color:#fff}
}
@media (max-width:639px){
  #psp-journey .t2-cards--2 .t2-card{grid-template-columns:1fr;gap:8px}
}

/* ---------------------------------------------------------------- 5 · why partner
   Six claims. Cards again — but deliberately a DIFFERENT card: no leading bar, a
   brand mark in the corner instead, more air, and the claim itself set larger so the
   band reads as statements rather than list items. */
#psp-why .psp-cards{gap:20px}
#psp-why .t2-card{position:relative;padding:28px 26px 26px;border-radius:var(--d-r-card);
  background:rgb(255 255 255 / .72);border:1px solid rgb(22 38 46 / .07);
  transition:transform .35s var(--ease-circ),background-color .35s var(--ease-circ),
             border-color .35s var(--ease-circ),box-shadow .35s var(--ease-circ)}
#psp-why .t2-card::after{content:"";position:absolute;top:18px;inset-inline-end:18px;
  width:22px;height:22px;border-radius:7px;background:rgb(36 187 187 / .16);
  transition:background-color .35s var(--ease-circ)}
#psp-why .t2-card-title{font-size:18px;padding-inline-end:34px;line-height:1.35}
@media (hover:hover){
  #psp-why .t2-card:hover{transform:translateY(-3px);background:#fff;
    border-color:rgb(36 187 187 / .30);box-shadow:0 22px 44px -34px rgb(26 154 154 / .6)}
  #psp-why .t2-card:hover::after{background:var(--d-grad)}
}
/* the one-line closing claim gets weight instead of being another grey paragraph */
#psp-why .psp-line,#psp-ecosystem .psp-line{margin-top:34px;padding-top:22px;
  border-top:1px solid rgb(36 187 187 / .25);color:var(--text-strong);font-weight:600}

/* ---------------------------------------------------------------- 6 · ecosystem
   Four sister companies. Name plates, not prose cards — the name is the content. */
#psp-ecosystem .psp-cards{gap:16px}
#psp-ecosystem .t2-card{padding:22px 24px;border-radius:var(--d-r-card);
  background:#fff;border:1px solid rgb(22 38 46 / .08);
  border-inline-start:3px solid transparent;
  transition:border-color .35s var(--ease-circ),transform .35s var(--ease-circ),
             box-shadow .35s var(--ease-circ)}
#psp-ecosystem .t2-card-title{font-size:17px}
@media (hover:hover){
  #psp-ecosystem .t2-card:hover{transform:translateX(2px);
    border-inline-start-color:var(--d-teal);
    box-shadow:0 18px 36px -30px rgb(9 30 38 / .5)}
  [dir="rtl"] #psp-ecosystem .t2-card:hover{transform:translateX(-2px)}
}

/* ---------------------------------------------------------------- 7 · stats
   Already its own thing. Brand numerals and a rule between, so the row reads as one
   set rather than four floating figures. */
#psp-stats-sec .psp-stats{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;
  border-top:1px solid rgb(36 187 187 / .22);
  border-bottom:1px solid rgb(36 187 187 / .22);margin-top:34px}
#psp-stats-sec .psp-stat{display:grid;gap:6px;padding:28px 22px;
  border-inline-start:1px solid rgb(22 38 46 / .08)}
#psp-stats-sec .psp-stat:first-child{border-inline-start:0}
#psp-stats-sec .psp-stat-v{background:var(--d-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-weight:700}
#psp-stats-sec .psp-stat .label-2{color:var(--text-medium);letter-spacing:.1em}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  #psp-routes .t2-card,#psp-why .t2-card,#psp-ecosystem .t2-card{transition:none}
}

/* ---------------------------------------------------------------- 8 · digital
   The systems band. Tools and governance, so: quiet panels with the title carrying a
   small square mark, and no leading bar — the last band on the page should not look
   like the first one. */
#psp-digital .t2-card{background:none;border:0;box-shadow:none;overflow:visible;
  padding:22px 24px;border-radius:var(--d-r-card);
  background-color:rgb(255 255 255 / .6);border:1px solid rgb(22 38 46 / .07);
  transition:background-color .35s var(--ease-circ),border-color .35s var(--ease-circ)}
#psp-digital .t2-card::before{display:none}
#psp-digital .t2-card-title{position:relative;padding-inline-start:26px;font-size:17px}
#psp-digital .t2-card-title::before{content:"";position:absolute;inset-inline-start:0;
  top:6px;width:12px;height:12px;border-radius:4px;background:var(--d-grad)}
@media (hover:hover){
  #psp-digital .t2-card:hover{background-color:#fff;border-color:rgb(36 187 187 / .28)}
}
/* channel chips */
#psp-digital .psp-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
  list-style:none;padding:0}
#psp-digital .psp-chips li{padding:8px 16px;border-radius:99px;
  background:rgb(36 187 187 / .10);border:1px solid rgb(36 187 187 / .22);
  color:var(--d-teal-deep);font-weight:600}