/* Tamiyouz Alrowad — flagship premium process cards, 2026-10-24.
 * Applied after process-journey-motion.css. All selectors are scoped to
 * #process.tyz-process-journey; original content and four Lucide icons stay.
 */
#process.tyz-process-journey {
  --tyz-step-ease:cubic-bezier(.18,.78,.22,1);
}
#process.tyz-process-journey .process-grid {
  gap:clamp(16px,2vw,27px)!important;
  align-items:stretch;
  margin-top:clamp(34px,4vw,54px);
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(n){
  --tyz-step-tint:rgba(242,196,108,.1);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  min-height:332px;
  padding:29px clamp(17px,1.9vw,26px) 21px!important;
  border-radius:24px!important;
  overflow:hidden;
  text-align:center;
  background:linear-gradient(151deg,#1b344f 0%,#102842 43%,#0a1c32 100%)!important;
  color:#fcf7ef!important;
  border:1px solid rgba(231,190,120,.26)!important;
  box-shadow:
    0 19px 45px rgba(4,14,29,.26),
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(216,181,123,.055)!important;
  transition:border-color .32s ease,box-shadow .34s ease,background .3s ease,translate .35s var(--tyz-step-ease)!important;
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(2){
  background:linear-gradient(151deg,#1d3853 0%,#102a47 45%,#0b1e35 100%)!important;
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(3){
  background:linear-gradient(151deg,#21364b 0%,#122b42 45%,#0b1f34 100%)!important;
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(4){
  background:linear-gradient(151deg,#223b54 0%,#112b44 45%,#0a1f36 100%)!important;
}
/* Fine gold highlight tracing the upper corner and across the whole rim. */
#process.tyz-process-journey .process-grid>.process-card:nth-child(n) .tyz-process-card-trim {
  position:absolute;
  z-index:3;
  display:block;
  inset-inline-start:20px;
  inset-inline-end:20px;
  top:0;
  height:3px;
  border-radius:0 0 10px 10px;
  background:linear-gradient(90deg,rgba(193,135,51,0),#bc8744 22%,#ffe2a6 50%,#bd8b47 77%,rgba(193,135,51,0));
  box-shadow:0 4px 22px rgba(235,186,101,.2);
  opacity:.85;
  pointer-events:none;
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(n)::before{
  inset:0!important;
  border-radius:inherit;
  z-index:0;
  opacity:1;
  background:
    radial-gradient(ellipse 72% 38% at 50% -10%,rgba(238,192,112,.16),transparent 78%),
    radial-gradient(circle at 105% 105%,rgba(69,121,155,.075),transparent 42%)!important;
  transition:opacity .36s ease!important;
  pointer-events:none;
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(n) .tyz-process-index{
  position:absolute;
  z-index:4;
  top:20px;
  inset-inline-start:20px;
  inset-inline-end:auto;
  width:47px;
  height:38px;
  border-radius:12px;
  background:linear-gradient(150deg,rgba(234,191,119,.23),rgba(227,168,75,.055));
  border:1px solid rgba(237,200,135,.54);
  box-shadow:inset 0 1px 0 rgba(255,249,222,.18);
  color:#f6d89f;
  font:900 15px/1 system-ui,sans-serif;
  letter-spacing:.75px;
  display:grid;
  place-items:center;
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(n) .tyz-process-eyebrow{
  position:absolute;
  z-index:4;
  top:29px;
  inset-inline-end:20px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:calc(100% - 94px);
  color:#d6b989;
  font:800 10px/1.4 "Cairo",system-ui,sans-serif;
  letter-spacing:.55px;
  text-transform:uppercase;
  white-space:nowrap;
}
#process.tyz-process-journey .tyz-process-eyebrow::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:#e5bd72;
  box-shadow:0 0 12px rgba(241,187,92,.62);
  flex:none;
}
/* Icon centerpiece: floating sapphire square inside an illuminated gold halo. */
#process.tyz-process-journey .process-grid>.process-card:nth-child(n) .step-icon {
  position:relative;
  z-index:2;
  width:76px!important;
  height:76px!important;
  min-width:76px;
  flex:none;
  border:1px solid rgba(239,200,132,.51)!important;
  border-radius:23px!important;
  background:
    radial-gradient(circle at 30% 19%,rgba(250,222,168,.24),transparent 40%),
    linear-gradient(141deg,rgba(234,186,106,.19),rgba(245,209,147,.045))!important;
  color:#f5d498!important;
  box-shadow:
    0 0 0 8px rgba(226,180,100,.044),
    0 13px 30px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,248,224,.21)!important;
  margin:53px auto 21px!important;
  display:grid;
  place-items:center;
  transition:border-color .3s ease,box-shadow .34s ease!important;
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(n) .step-icon svg {
  width:33px!important;
  height:33px!important;
  color:inherit!important;
  stroke-width:1.75px;
  filter:drop-shadow(0 2px 5px rgba(249,199,105,.2));
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(n) .step-icon::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:29px;
  border:1px solid rgba(222,169,89,.14);
  pointer-events:none;
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(n) h3 {
  position:relative;
  z-index:2;
  margin:0 0 11px!important;
  color:#fffaf0!important;
  font:900 clamp(16px,1.45vw,19px)/1.55 "Cairo",system-ui,sans-serif!important;
  letter-spacing:-.28px;
  overflow-wrap:break-word;
}
#process.tyz-process-journey .process-grid>.process-card:nth-child(n) p {
  position:relative;
  z-index:2;
  color:#bfcde0!important;
  font:600 clamp(11px,.99vw,12px)/1.9 "Cairo",system-ui,sans-serif!important;
  letter-spacing:.03px;
  margin:0!important;
  max-width:245px;
  text-wrap:pretty;
  overflow-wrap:anywhere;
}
/* Card bottom is a real visual step indicator, not an inert button. */
#process.tyz-process-journey .process-grid>.process-card:nth-child(n) .tyz-process-card-footer {
  position:relative;
  z-index:3;
  width:100%;
  margin-top:auto;
  padding-top:21px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#process.tyz-process-journey .tyz-process-card-footer-label{
  color:#b9c5d6;
  font:700 10px/1.5 "Cairo",system-ui,sans-serif;
  white-space:nowrap;
}
#process.tyz-process-journey .tyz-process-card-meter{
  display:flex;
  align-items:center;
  gap:4px;
  direction:ltr;
}
#process.tyz-process-journey .tyz-process-card-meter i{
  display:block;
  width:18px;height:4px;
  border-radius:10px;
  background:rgba(217,201,176,.19);
}
#process.tyz-process-journey .tyz-process-card-meter i.is-complete{
  background:linear-gradient(90deg,#b67b33,#f2c97e);
  box-shadow:0 0 9px rgba(234,178,92,.18);
}
/* Active state is distinctive but never causes a layout jump. */
html[data-theme="dark"] #process.tyz-process-journey .process-grid>.process-card:nth-child(n).is-current,
html[data-theme="light"] #process.tyz-process-journey .process-grid>.process-card:nth-child(n).is-current {
  border-color:rgba(245,207,142,.86)!important;
  box-shadow:
    0 22px 50px rgba(2,14,27,.29),
    0 0 0 2px rgba(223,166,77,.13),
    0 0 32px rgba(241,183,88,.13),
    inset 0 1px 0 rgba(255,252,235,.13)!important;
}
#process.tyz-process-journey .process-grid>.process-card.is-current .tyz-process-card-trim{
  opacity:1;
  box-shadow:0 0 19px rgba(244,197,114,.52);
}
#process.tyz-process-journey .process-grid>.process-card.is-current .step-icon{
  border-color:rgba(255,223,159,.85)!important;
  box-shadow:
    0 0 0 9px rgba(227,180,96,.077),
    0 0 32px rgba(247,194,108,.22),
    inset 0 1px 0 rgba(255,241,210,.27)!important;
}
@media(hover:hover) and (pointer:fine){
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n):hover {
    translate:0 -7px!important;
    border-color:rgba(242,199,123,.8)!important;
    box-shadow:0 24px 48px rgba(4,13,30,.35),0 0 25px rgba(238,183,88,.11)!important;
  }
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n):hover .step-icon {
    border-color:rgba(255,219,155,.78)!important;
  }
}
/* Light mode has a genuinely bright reading surface, while preserving the
   gold/navy identity and legibility of titles/descriptions. */
html[data-theme="light"] #process.tyz-process-journey .process-grid>.process-card:nth-child(n) {
  background:linear-gradient(157deg,#ffffff 0%,#f7f9fc 62%,#edf3f8 100%)!important;
  color:#12314b!important;
  border-color:rgba(179,147,99,.38)!important;
  box-shadow:
    0 15px 38px rgba(32,55,83,.13),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}
html[data-theme="light"] #process.tyz-process-journey .process-grid>.process-card:nth-child(n)::before {
  background:
    radial-gradient(ellipse 90% 45% at 50% -8%,rgba(218,166,86,.18),transparent 78%),
    radial-gradient(circle at 105% 100%,rgba(102,161,204,.08),transparent 50%)!important;
}
html[data-theme="light"] #process.tyz-process-journey .process-grid>.process-card .tyz-process-index {
  color:#865a1d;
  border-color:rgba(181,135,64,.38);
  background:linear-gradient(145deg,#ffefcd,#f9e6c1);
}
html[data-theme="light"] #process.tyz-process-journey .process-grid>.process-card .tyz-process-eyebrow{
  color:#9a6e2a;
}
html[data-theme="light"] #process.tyz-process-journey .process-grid>.process-card .step-icon{
  background:linear-gradient(145deg,#fff1d2,#f4e3c0)!important;
  border-color:rgba(204,159,84,.45)!important;
  color:#97651d!important;
}
html[data-theme="light"] #process.tyz-process-journey .process-grid>.process-card h3{
  color:#14304b!important;
}
html[data-theme="light"] #process.tyz-process-journey .process-grid>.process-card p{
  color:#4e6379!important;
}
html[data-theme="light"] #process.tyz-process-journey .tyz-process-card-footer-label{
  color:#64778a;
}
html[data-theme="light"] #process.tyz-process-journey .tyz-process-card-meter i:not(.is-complete){
  background:#d7e0e8;
}
html[data-theme="light"] #process.tyz-process-journey .process-grid>.process-card:nth-child(n).is-current{
  border-color:#c99c56!important;
  box-shadow:
    0 18px 42px rgba(28,50,79,.17),
    0 0 0 2px rgba(205,158,79,.17),
    0 0 32px rgba(230,170,82,.12)!important;
}
@media(max-width:1100px){
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n){
    padding-inline:17px!important;
  }
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n) .tyz-process-eyebrow {
    font-size:9px;
  }
}
@media(max-width:880px){
  #process.tyz-process-journey .process-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px!important;
  }
  /* Hide desktop straight rail on the two-row tablet grid. */
  #process.tyz-process-journey .tyz-process-rail{display:none}
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n){
    min-height:314px;
    padding-inline:24px!important;
  }
}
@media(max-width:650px){
  /* Restore vertical progress rail for the one-column mobile layout. */
  #process.tyz-process-journey .tyz-process-rail{display:block}
  #process.tyz-process-journey .process-grid{
    grid-template-columns:minmax(0,1fr);
    gap:18px!important;
  }
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n){
    min-height:273px;
    padding:23px 22px 19px!important;
    margin-inline-start:14px;
  }
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n) .tyz-process-index{
    top:17px;
    inset-inline-start:16px;
    inset-inline-end:auto;
  }
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n) .tyz-process-eyebrow{
    top:28px;
    inset-inline-end:16px;
  }
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n) .step-icon{
    margin:44px auto 15px!important;
    width:68px!important;height:68px!important;min-width:68px;
    border-radius:20px!important;
  }
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n) h3{font-size:17px!important}
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n) p{font-size:12px!important;max-width:290px}
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n) .tyz-process-card-footer{
    padding-top:14px;
  }
}
@media(prefers-reduced-motion:reduce) {
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n),
  #process.tyz-process-journey .process-grid>.process-card:nth-child(n) .step-icon{
    animation:none!important;
    transition:none!important;
    translate:none!important;
  }
}