/* =========================================================
   CERAMA — management workflow showcase (v0.3.0)
   Product-focused interactive section, not pottery tutorial
   ========================================================= */
.process--management{
  background:radial-gradient(ellipse 70% 80% at 100% 0%,#254739 0%,transparent 66%),#18372d;
  padding:113px 0 92px;
  color:#faf8f1;
  isolation:isolate;
}
.process--management::before{
  width:610px;height:610px;left:-275px;top:-330px;
  border:1px solid rgba(234,203,163,.14);box-shadow:0 0 0 80px #ffffff03,0 0 0 165px #ffffff02;
  pointer-events:none;z-index:-1;
}
.process--management .section-top{margin-bottom:47px}
.process--management .overline{color:#c3d2c5;font-size:11px}
.process--management .process-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:42px;
  margin:0 0 44px;
}
.process--management .process-heading{min-width:0}
.process--management .process-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  color:#d9b394;font-size:13px;font-weight:600;
  margin-bottom:19px;
}
.process--management .process-eyebrow svg{width:21px;height:21px;stroke-width:1.6}
.process--management .process-head h2{
  font-size:clamp(49px,5vw,75px);line-height:1.36;
  letter-spacing:-1.8px;font-weight:800;margin:0;
}
.process--management .process-head h2 em{color:#dd9f78}
.process--management .process-head>p{
  max-width:385px;flex:0 0 29%;margin:0 0 9px;
  font-size:15px;line-height:2.15;color:#d7e3d8;
}
.process-workspace{
  display:grid;grid-template-columns:minmax(345px,.9fr) minmax(0,1.12fr);
  gap:26px;direction:rtl;align-items:stretch;
}
.process-step-list{
  background:rgba(250,249,241,.045);
  border:1px solid rgba(222,233,217,.18);
  border-radius:13px;overflow:hidden;
  min-width:0;
}
.process-step-list-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:18px 22px 13px;
  color:#aebfb1;font-size:12px;font-weight:600;
  border-bottom:1px solid rgba(222,233,217,.12);
}
.process-step-list-head span:last-child{direction:ltr;font-size:11px;color:#d6a482;white-space:nowrap}
.process-step{
  color:#f4f4eb;background:transparent;border:0;width:100%;
  display:flex;align-items:center;gap:16px;text-align:right;position:relative;
  padding:14px 21px;min-height:82px;
  border-bottom:1px solid rgba(224,230,218,.11);
  transition:background-color .22s ease,color .22s ease;
}
.process-step::before{
  content:'';position:absolute;inset-block:0;right:0;width:3px;
  background:transparent;transition:background-color .22s ease;
}
.process-step:hover{background:rgba(250,247,237,.075)}
.process-step.is-selected{
  background:#e8ddcc;color:#213d30;box-shadow:inset 0 1px #fef9f2;
}
.process-step.is-selected::before{background:#ad6543}
.process-step-index{
  font-family:YekanBakh,sans-serif;font-weight:800;
  color:#d5ab8c;direction:ltr;min-width:28px;
  font-size:16px;letter-spacing:.02em;
}
.process-step.is-selected .process-step-index{color:#ad6746}
.process-step-body{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0}
.process-step-body strong{font-size:16px;font-weight:700;line-height:1.55}
.process-step-body small{font-size:12px;color:#c4d2c7;line-height:1.65;font-weight:400}
.process-step.is-selected .process-step-body small{color:#536958}
.process-step-symbol{order:3}
.process-step .process-step-symbol{color:#d7ad8c;flex-shrink:0}
.process-step .process-step-symbol svg,
.process-step svg.process-step-symbol{width:23px;height:23px;stroke-width:1.6}
.process-step.is-selected .process-step-symbol{color:#6c755e}
.process-step-arrow{color:#e0a585;flex-shrink:0;opacity:.65}
.process-step svg.process-step-arrow{width:15px;height:15px}
.process-step.is-selected .process-step-arrow{opacity:1;color:#8f563d}
.process-step-footnote{
  padding:17px 22px;color:#b8cdbb;display:flex;gap:9px;
  align-items:center;font-size:12px;line-height:1.8;
}
.process-step-footnote svg{width:15px;height:15px;color:#ddb08e}
.process-preview{min-width:0;display:flex;flex-direction:column;gap:18px}
.process-preview-frame{
  min-width:0;flex:1;background:#f4f1e9;color:#1f3d30;
  border-radius:13px;overflow:hidden;
  border:6px solid #b9c4b5;box-shadow:0 30px 70px #081d182b;
}
.process-preview-topbar{
  background:#244636;color:#f7f4e9;min-height:57px;
  padding:12px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.process-preview-brand{display:flex;align-items:center;gap:8px;direction:ltr;font-family:YekanBakh,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.6px}
.process-preview-logo{
  font-size:17px;background:#ecd9c5;color:#25513d;border-radius:7px;
  width:30px;height:30px;display:grid;place-items:center;
  line-height:1;
}
.process-preview-brand-dot{color:#d99b75}
.process-preview-location{display:flex;align-items:center;gap:7px;font-size:12px;color:#c2d3c6}
.process-preview-location svg{width:14px;height:14px}
.process-preview-location span{color:#6b8c79}
.process-preview-live{
  display:inline-flex;align-items:center;gap:7px;
  color:#e4e7d8;font-size:11px;white-space:nowrap;
  padding:7px 10px;border:1px solid #557361;border-radius:20px;
}
.process-preview-live>span{width:7px;height:7px;background:#b0d1a6;border-radius:50%}
.process-preview-inner{padding:25px 27px 19px}
.process-preview-titleline{display:flex;justify-content:space-between;align-items:center;gap:15px}
.process-preview-brow{color:#a16d4d;font-weight:650;font-size:12px}
.process-preview-count{direction:ltr;color:#758779;font-size:12px}
.process-preview-mainhead{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  border-bottom:1px solid #d2dcd0;padding-bottom:21px;margin-bottom:20px;
}
.process-preview-mainhead h3{
  color:#214c37;font-weight:800;font-size:clamp(21px,2.25vw,30px);
  margin:14px 0 7px;letter-spacing:-.5px;line-height:1.35;
}
.process-preview-mainhead p{font-size:12px;line-height:1.95;color:#617264;margin:0;max-width:350px}
.process-preview-featureicon{
  width:55px;height:55px;flex-shrink:0;border-radius:12px;
  background:#e4e9de;display:grid;place-items:center;color:#54745c;
}
.process-preview-featureicon svg{height:26px;width:26px;stroke-width:1.5}
.process-preview-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:19px}
.process-preview-stat{
  display:flex;flex-direction:column;min-width:0;background:#fffefa;
  border:1px solid #dce4d8;border-radius:9px;padding:15px 14px;
}
.process-preview-stat>span{font-size:11px;color:#4e6655;line-height:1.5}
.process-preview-stat strong{font-size:34px;font-weight:800;line-height:1.5;color:#264e38}
.process-preview-stat small{font-size:11px;color:#63766a;line-height:1.5}
.process-preview-databox{
  border:1px solid #d6e0d2;background:#fffefa;border-radius:10px;
  overflow:hidden;
}
.process-preview-databox-head{
  padding:16px 17px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #e1e7df;gap:10px;
}
.process-preview-databox-head strong{font-size:13px;color:#284d38}
.process-preview-databox-head>span{display:flex;align-items:center;gap:6px;font-size:10px;color:#69806b}
.process-preview-databox-head svg{width:13px;height:13px}
.process-preview-columns,.process-preview-row{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,.92fr);
  align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid #ecf0e9;
}
.process-preview-columns{
  font-size:10px;font-weight:550;color:#758978;background:#f9faf6;padding-top:10px;padding-bottom:10px;
}
.process-preview-row:last-child{border-bottom:0}
.process-preview-row{font-size:11px;line-height:1.65;color:#3b5745}
.process-preview-row-name{display:flex;align-items:center;gap:7px;min-width:0}
.process-preview-row-name span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.process-preview-blob{
  width:20px;height:20px;background:#c9a67d;flex-shrink:0;
  display:block;border-radius:48% 46% 34% 34%;
}
.process-preview-row:nth-child(4) .process-preview-blob{background:#a9ac91;border-radius:9px 9px 4px 4px}
.process-preview-row:nth-child(5) .process-preview-blob{background:#b4a58f;border-radius:50%}
.process-preview-row-detail{color:#5c6f60;font-size:11px;white-space:nowrap}
.process-preview-pill{
  display:inline-flex;align-items:center;justify-content:center;border-radius:6px;
  padding:6px 8px;white-space:nowrap;font-size:10px;font-weight:650;text-align:center;
}
.process-preview-pill.is-green{background:#e5f2e5;color:#387443}
.process-preview-pill.is-orange{background:#f5e5d5;color:#965f3e}
.process-preview-pill.is-muted{background:#eaece5;color:#5e715c}
.process-preview-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px;
}
.process-preview-progress{display:flex;gap:12px;align-items:center;color:#526755;font-size:11px}
.process-preview-progress-pips{display:flex;gap:4px;direction:rtl}
.process-preview-progress-pips span{display:block;width:18px;height:5px;border-radius:7px;background:#d4ddcf;transition:background .2s}
.process-preview-progress-pips span.is-current{background:#ac6947}
.process-preview-sample{color:#687966;display:flex;gap:5px;align-items:center;font-size:10px}
.process-preview-sample svg{width:14px;height:14px}
.process-preview-link{
  display:inline-flex;align-items:center;gap:15px;align-self:flex-start;
  color:#ffdec7;border-bottom:1px solid #bc937b;font-size:13px;font-weight:700;
  padding:2px 0 9px;transition:gap .2s,color .2s;
}
.process-preview-link:hover{gap:21px;color:white}
.process-preview-link svg{width:17px;height:17px}
.process-lastline{
  border-top:1px solid rgba(227,233,216,.24);margin-top:35px;padding-top:23px;
  display:flex;align-items:center;gap:12px;color:#c3d3c4;font-size:13px;
}
.process-lastline strong{color:#f7f5ee;font-weight:650}
.process-lastline-mark{
  direction:ltr;margin-right:auto;letter-spacing:1.1px;font:10px/1.5 Arial,sans-serif;
  color:#9ebca6;
}
@media(max-width:1150px){
  .process-workspace{grid-template-columns:minmax(300px,.95fr) minmax(0,1fr);gap:15px}
  .process-preview-inner{padding:21px 18px 16px}
  .process-preview-stats{gap:7px}
  .process-preview-stat{padding:11px 10px}
  .process-preview-topbar{padding:10px 14px}
  .process-preview-row{font-size:10px}
  .process-preview-stat strong{font-size:31px}
  .process-step{padding:12px 14px;gap:10px}
  .process-step-body strong{font-size:14px}
  .process-step-body small{font-size:11px}
}
@media(max-width:820px){
  .process--management{padding:83px 0 72px}
  .process--management .process-head{gap:18px}
  .process--management .process-head h2{font-size:clamp(43px,6.2vw,61px)}
  .process--management .process-head>p{max-width:290px;font-size:12px;flex:0 0 37%}
  .process-workspace{grid-template-columns:1fr;gap:25px}
  .process-step-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .process-step-list-head,.process-step-footnote{grid-column:1/-1}
  .process-step:nth-of-type(odd){border-left:1px solid rgba(224,230,218,.11)}
  .process-step{min-height:80px}
  .process-preview-frame{max-width:100%}
  .process-preview-inner{padding:26px 26px}
  .process-preview-mainhead h3{font-size:28px}
  .process-step-list-head{padding:17px 20px}
}
@media(max-width:600px){
  .process--management{padding:68px 0 65px}
  .process--management .section-top{margin-bottom:29px}
  .process--management .overline{font-size:9px;letter-spacing:1px}
  .process--management .process-head{display:block;margin-bottom:30px}
  .process--management .process-eyebrow{margin-bottom:12px;font-size:12px}
  .process--management .process-head h2{font-size:clamp(37px,10.8vw,48px);line-height:1.4;letter-spacing:-.6px}
  .process--management .process-head>p{max-width:100%;font-size:13px;margin:17px 0 0;line-height:2}
  .process-workspace{gap:22px}
  .process-step-list{grid-template-columns:1fr}
  .process-step:nth-of-type(odd){border-left:0}
  .process-step{min-height:69px;padding:11px 15px;gap:12px}
  .process-step-body{gap:4px}
  .process-step-body strong{font-size:14px;line-height:1.5}
  .process-step-body small{font-size:11px;line-height:1.55}
  .process-step-index{font-size:15px}
  .process-step svg.process-step-symbol{width:22px;height:22px}
  .process-step svg.process-step-arrow{width:13px;height:13px}
  .process-step-list-head{padding:14px 15px;font-size:12px}
  .process-step-footnote{padding:15px;font-size:11px}
  .process-preview-topbar{padding:10px 12px;gap:7px;min-height:50px}
  .process-preview-brand{font-size:13px;gap:6px}
  .process-preview-logo{height:25px;width:25px;font-size:13px}
  .process-preview-location{font-size:10px;gap:3px}
  .process-preview-live{font-size:9px;padding:5px 6px;gap:4px}
  .process-preview-inner{padding:18px 12px 15px}
  .process-preview-brow{font-size:11px}
  .process-preview-count{font-size:10px}
  .process-preview-mainhead{padding-bottom:14px;margin-bottom:13px}
  .process-preview-mainhead h3{font-size:20px;line-height:1.45;margin:11px 0 4px}
  .process-preview-mainhead p{font-size:11px;line-height:1.7}
  .process-preview-featureicon{width:40px;height:40px;border-radius:10px}
  .process-preview-featureicon svg{height:20px;width:20px}
  .process-preview-stats{gap:5px;margin-bottom:12px}
  .process-preview-stat{padding:10px 7px;border-radius:6px}
  .process-preview-stat>span{font-size:10px}
  .process-preview-stat strong{font-size:25px}
  .process-preview-stat small{font-size:9px}
  .process-preview-databox-head{padding:12px 10px}
  .process-preview-databox-head strong{font-size:12px}
  .process-preview-databox-head>span{font-size:9px}
  .process-preview-columns,.process-preview-row{gap:4px;padding:10px 8px;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr) minmax(0,1fr)}
  .process-preview-columns{font-size:9px}
  .process-preview-row{font-size:10px}
  .process-preview-row-name{gap:4px}
  .process-preview-blob{width:13px;height:13px}
  .process-preview-row-detail{font-size:9px;white-space:normal}
  .process-preview-pill{font-size:9px;padding:4px}
  .process-preview-bottom{flex-wrap:wrap;gap:9px;margin-top:14px}
  .process-preview-sample{font-size:9px}
  .process-preview-link{font-size:12px}
  .process-lastline{margin-top:28px;align-items:flex-start;flex-direction:column;gap:5px;font-size:12px;line-height:1.9}
  .process-lastline-mark{margin-right:0;margin-top:7px}
}
@media(max-width:360px){
  .process-preview-location{display:none}
  .process-preview-stat strong{font-size:23px}
  .process-preview-columns,.process-preview-row{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr) minmax(0,.95fr)}
  .process-preview-pill{font-size:8px}
}

/* Keep icons at the intended end of each RTL selector row. */
.process-step-index{order:0}.process-step-body{order:1}.process-step-symbol{order:2}.process-step-arrow{order:3}