/* ========================================================================
   RSCM IoMT V4.3.163 — INFORMASI PUBLIK & SIMULASI SIDERAIL
   Shared presentation for tentang-iomt.html + simulasi-siderail.html.
   Uses exactly the approved Index V4.3.152 topbar, footer, typography,
   monitor, keyboard/mouse and local Font Awesome assets.
   Public demo is client-side only; no Firestore, Firebase or patient data.
   ======================================================================== */

body.rscm-public-page {
  --rscm-public-teal:#218b85;
  --rscm-public-navy:#17384c;
  --rscm-public-line:#e1eaf0;
  --rscm-public-muted:#617b8c;
  background:#fff;
}
body.rscm-public-page i.fa-classic.fa-solid,
body.rscm-public-page i.fa-classic.fa-solid::before {
  font-family:"RSCM Sidebar Classic Solid", "Font Awesome 7 Pro", sans-serif !important;
  font-style:normal !important;
  font-weight:900 !important;
  line-height:1;
  -webkit-font-smoothing:antialiased;
}
body.rscm-public-page .public-nav > a[aria-current="page"] {
  color:var(--rscm-public-teal);
}
body.rscm-public-page .rscm-public-eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  color:#218b85;
  font-size:11px;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.085em;
}
body.rscm-public-page .rscm-public-eyebrow > i {
  flex:0 0 16px;
  font-size:15px;
  text-align:center;
}
body.rscm-public-page .rscm-public-section-head > h2 {
  margin:10px 0 0;
  color:var(--rscm-public-navy);
  font-size:clamp(24px,2.35vw,31px);
  font-weight:780;
  line-height:1.24;
  letter-spacing:-.035em;
}
body.rscm-public-page .rscm-public-section-head > p:last-child:not(.rscm-public-eyebrow) {
  max-width:650px;
  margin-top:12px;
  color:var(--rscm-public-muted);
  font-size:13px;
  line-height:1.72;
}
body.rscm-public-page .rscm-public-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:27px;
}
body.rscm-public-page .rscm-public-actions > a.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:45px;
  padding:10px 16px;
  border-radius:10px;
  font-size:12px;
  font-weight:735;
  line-height:1.25;
  transition:transform .18s ease,box-shadow .2s ease;
}
body.rscm-public-page .rscm-public-actions > .button-primary {
  box-shadow:0 5px 10px rgba(22,87,91,.10),0 13px 25px rgba(21,130,121,.16),inset 0 1px 0 rgba(255,255,255,.35);
}
body.rscm-public-page .rscm-public-actions > .button-quiet {
  box-shadow:0 4px 11px rgba(28,77,89,.06),0 13px 24px rgba(26,91,97,.10),inset 0 1px 0 #fff;
}
body.rscm-public-page .rscm-public-actions > a.button:hover {transform:translateY(-1px);}
body.rscm-public-page .rscm-public-actions > a.button:active {transform:translateY(1px);}
body.rscm-public-page .rscm-public-actions i {font-size:14px;}

/* Tentang IoMT — introduction, system flow and three feature cards. */
body.rscm-about-page .rscm-public-main {
  display:flex;
  flex-direction:column;
  width:100%;
  padding-top:129px;
  padding-bottom:65px;
}
body.rscm-about-page .rscm-about-hero {
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  align-items:center;
  gap:clamp(32px,5.3vw,94px);
  padding-top:35px;
  padding-bottom:72px;
}
body.rscm-about-page .rscm-about-introduction {min-width:0;max-width:645px;}
body.rscm-about-page .rscm-about-introduction > h1 {
  max-width:660px;
  margin:20px 0 19px;
  color:var(--rscm-public-navy);
  font-size:clamp(32px,3vw,46px);
  font-weight:810;
  letter-spacing:-.042em;
  line-height:1.14;
  text-wrap:pretty;
}
body.rscm-about-page .rscm-about-introduction > h1 > em {
  color:#278e86;
  font-style:normal;
}
body.rscm-about-page .rscm-about-introduction .rscm-public-lead {
  max-width:620px;
  color:#526e7d;
  font-size:15px;
  line-height:1.73;
}
body.rscm-about-page .rscm-about-introduction .rscm-public-bodycopy {
  max-width:620px;
  margin-top:14px;
  color:#728898;
  font-size:13px;
  line-height:1.78;
}
body.rscm-about-page .rscm-about-flow {
  min-width:0;
  padding:24px 24px 22px;
  border:1px solid #deebee;
  border-radius:19px;
  background:linear-gradient(150deg,#fff 0%,#f8fcfb 100%);
  box-shadow:0 7px 16px rgba(36,76,93,.07),0 22px 40px rgba(36,76,93,.07),inset 0 1px 0 #fff;
}
body.rscm-about-page .rscm-about-flow-header {
  display:flex;align-items:center;gap:13px;
  padding-bottom:17px;
  border-bottom:1px solid #e7eff1;
}
body.rscm-about-page .rscm-about-flow-mark,
body.rscm-about-page .rscm-about-step-icon {
  display:grid;place-items:center;
  flex:0 0 43px;
  width:43px;height:43px;
  border:1px solid #d8e9e7;
  border-radius:12px;
  color:#218b85;
  background:#eaf7f4;
}
body.rscm-about-page .rscm-about-flow-mark {font-size:19px;}
body.rscm-about-page .rscm-about-flow-header p {
  color:#69818c;font-size:10px;font-weight:725;line-height:1.4;
}
body.rscm-about-page .rscm-about-flow-header h2 {
  margin-top:3px;
  color:#1b3d50;
  font-size:18px;
  font-weight:780;
  line-height:1.3;
}
body.rscm-about-page .rscm-about-flow-steps {
  display:grid;
  gap:0;
  margin:0;
  padding:8px 0 4px;
  list-style:none;
}
body.rscm-about-page .rscm-about-flow-steps > li {
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:15px 0;
}
body.rscm-about-page .rscm-about-flow-steps > li:not(:last-child)::after {
  content:"";
  position:absolute;
  top:58px;bottom:-1px;left:21px;
  border-left:1px dashed #a9d2ce;
}
body.rscm-about-page .rscm-about-step-icon {z-index:1;font-size:18px;}
body.rscm-about-page .rscm-about-flow-steps li:nth-child(2) > .rscm-about-step-icon {
  color:#328ea4;background:#ebf5fa;border-color:#d9e8ef;
}
body.rscm-about-page .rscm-about-flow-steps li:nth-child(3) > .rscm-about-step-icon {
  color:#627d1b;background:#f5f9e8;border-color:#e5edc6;
}
body.rscm-about-page .rscm-about-flow-steps > li > div {display:grid;gap:4px;min-width:0;}
body.rscm-about-page .rscm-about-flow-steps strong {
  color:#1b3c50;font-size:14px;font-weight:765;line-height:1.25;
}
body.rscm-about-page .rscm-about-flow-steps small {
  color:#688190;font-size:11.5px;line-height:1.55;
}
body.rscm-about-page .rscm-about-flow-disclaimer {
  display:flex;align-items:flex-start;gap:8px;
  margin-top:7px;
  padding:12px;
  border-radius:9px;
  color:#63808b;background:#eef7f5;
  font-size:10.5px;line-height:1.55;
}
body.rscm-about-page .rscm-about-flow-disclaimer i {margin-top:2px;}
body.rscm-about-page .rscm-about-features {padding-top:4px;padding-bottom:34px;}
body.rscm-about-page .rscm-about-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}
body.rscm-about-page .rscm-public-feature-card {
  min-width:0;
  padding:23px 22px 25px;
  border:1px solid #e0eaf0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 4px 10px rgba(34,74,94,.035),0 14px 27px rgba(34,74,94,.045);
}
body.rscm-about-page .rscm-public-feature-icon {
  display:grid;place-items:center;
  width:42px;height:42px;
  border-radius:12px;
  font-size:22px;
}
body.rscm-about-page .rscm-public-feature-icon.blue {color:#60c0d0;background:#eaf8fa;}
body.rscm-about-page .rscm-public-feature-icon.red {color:#f4475f;background:#fff0f2;}
body.rscm-about-page .rscm-public-feature-icon.lime {color:#b8cd12;background:#f6fbe2;}
body.rscm-about-page .rscm-public-feature-card h3 {
  margin:14px 0 9px;
  color:#1b3d50;
  font-size:16px;
  font-weight:775;
  line-height:1.3;
}
body.rscm-about-page .rscm-public-feature-card p {
  color:#657e8e;
  font-size:12px;
  line-height:1.7;
}
body.rscm-about-page .rscm-public-bottom-note {
  display:flex;align-items:center;justify-content:space-between;gap:23px;
  margin-top:4px;
  padding:21px 23px;
  border:1px solid #d7eae6;
  border-radius:15px;
  background:linear-gradient(120deg,#f0faf7,#f9fcfb);
}
body.rscm-about-page .rscm-public-bottom-note > div {
  display:flex;align-items:flex-start;gap:14px;
  min-width:0;
}
body.rscm-about-page .rscm-public-note-icon {
  display:grid;place-items:center;
  flex:0 0 37px;width:37px;height:37px;
  border-radius:10px;
  background:#e2f4ed;color:#268b79;font-size:18px;
}
body.rscm-about-page .rscm-public-bottom-note h2 {
  color:#1b3d50;font-size:15px;font-weight:765;line-height:1.4;
}
body.rscm-about-page .rscm-public-bottom-note p {
  max-width:850px;margin-top:5px;
  color:#637d8a;font-size:11.5px;line-height:1.7;
}
body.rscm-about-page .rscm-public-bottom-note > a {
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:745;color:#16867d;white-space:nowrap;
}

/* Simulasi Siderail — approved Index preview + larger manual controls. */
body.rscm-simulation-page .rscm-simulation-hero {
  border-bottom:0;
}
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-hero .hero-grid {
    padding-bottom:96px;
  }
}
body.rscm-simulation-page .hero-copy.rscm-simulation-copy {
  min-width:0;
}
body.rscm-simulation-page .rscm-simulation-copy > h1 {
  margin:14px 0 14px;
  max-width:490px;
  font-size:clamp(29px,2.7vw,37px);
  line-height:1.19;
}
body.rscm-simulation-page .rscm-simulation-copy > .hero-description {
  max-width:475px;
  font-size:13.5px;
  line-height:1.7;
}
body.rscm-simulation-page .rscm-simulation-controls {
  margin-top:25px;
  padding:18px;
  border:1px solid #dce9ed;
  border-radius:16px;
  background:#fff;
  box-shadow:0 5px 12px rgba(34,73,92,.045),0 15px 27px rgba(34,73,92,.06),inset 0 1px 0 #fff;
}
body.rscm-simulation-page .rscm-simulation-controls-heading h2 {
  color:#1c3e52;
  font-size:16px;
  font-weight:790;
  line-height:1.3;
}
body.rscm-simulation-page .rscm-simulation-controls-heading p {
  margin-top:5px;
  color:#667f8d;
  font-size:11px;
  line-height:1.6;
}
body.rscm-simulation-page .rscm-simulation-control-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:15px;
}
body.rscm-simulation-page button.rscm-simulation-control {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  min-height:66px;
  padding:11px 10px;
  border:1px solid #dfe9ef;
  border-radius:11px;
  background:#fff;
  color:#267b75;
  box-shadow:0 2px 6px rgba(34,73,92,.04);
  text-align:left;
  cursor:pointer;
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;
}
body.rscm-simulation-page button.rscm-simulation-control > i:first-child {
  flex:0 0 20px;width:20px;font-size:20px;
}
body.rscm-simulation-page button.rscm-simulation-control > span {
  display:grid;gap:4px;min-width:0;
}
body.rscm-simulation-page button.rscm-simulation-control strong {
  color:#203f51;font-size:12px;font-weight:760;line-height:1.3;
}
body.rscm-simulation-page button.rscm-simulation-control small {
  color:#2b927f;font-size:10px;font-weight:730;line-height:1.25;
}
body.rscm-simulation-page button.rscm-simulation-control .rscm-control-action {
  margin-left:auto;font-size:11px;opacity:.7;
}
body.rscm-simulation-page button.rscm-simulation-control:hover {
  border-color:#9fcfc9;
  background:#f5fbf9;
  box-shadow:0 5px 12px rgba(35,99,99,.09);
  transform:translateY(-1px);
}
body.rscm-simulation-page button.rscm-simulation-control.is-open {
  border-color:#df3050;
  background:linear-gradient(150deg,#f44b63,#d51f3e);
  color:#fff;
  box-shadow:0 5px 12px rgba(219,34,68,.17);
}
body.rscm-simulation-page button.rscm-simulation-control.is-open strong,
body.rscm-simulation-page button.rscm-simulation-control.is-open small {
  color:#fff;
}
body.rscm-simulation-page button.rscm-simulation-control.is-open:hover {
  background:linear-gradient(150deg,#ed415b,#bf1b37);
}
body.rscm-simulation-page .rscm-simulation-summary {
  display:flex;align-items:center;gap:8px;
  margin-top:14px;
  padding:11px 12px;
  border:1px solid #dfece9;
  border-radius:9px;
  background:#f4faf8;
  color:#397b72;
  font-size:11px;line-height:1.5;
}
body.rscm-simulation-page .rscm-simulation-summary.is-open {
  background:#fff4f5;
  border-color:#f2d0d6;
  color:#ac3449;
}
body.rscm-simulation-page .rscm-simulation-caveat {
  display:flex;align-items:flex-start;gap:9px;
  margin-top:17px;
  color:#708796;
  font-size:11px;
  line-height:1.65;
}
body.rscm-simulation-page .rscm-simulation-caveat > i {margin-top:3px;color:#278e83;}
body.rscm-simulation-page .rscm-simulation-more {
  display:inline-flex;align-items:center;gap:9px;
  margin-top:17px;
  color:#16877e;
  font-size:12px;font-weight:760;
}
body.rscm-simulation-page .rscm-simulation-more:hover {text-decoration:underline;text-underline-offset:4px;}
body.rscm-simulation-page .rscm-simulation-guide {
  padding-top:0;
  padding-bottom:55px;
}
body.rscm-simulation-page .rscm-simulation-guide-grid {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin-top:21px;
}
body.rscm-simulation-page .rscm-simulation-guide-grid > article {
  min-width:0;
  padding:19px 20px 21px;
  border:1px solid #e1eaf0;
  border-radius:15px;
  background:#fff;
  box-shadow:0 5px 13px rgba(34,73,92,.035);
}
body.rscm-simulation-page .rscm-simulation-step-count {
  display:inline-flex;align-items:center;justify-content:center;
  width:31px;height:31px;border-radius:9px;
  background:#eaf6f3;color:#218b85;
  font-size:11px;font-weight:800;
}
body.rscm-simulation-page .rscm-simulation-guide-grid h3 {
  margin:13px 0 7px;color:#1d3f52;font-size:14px;font-weight:760;
}
body.rscm-simulation-page .rscm-simulation-guide-grid p {
  color:#687f8c;font-size:11.8px;line-height:1.68;
}

/* Tablet and mobile: retain original Index header / footer behaviors. */
@media (max-width:1190px) {
  body.rscm-about-page .rscm-public-main {padding-top:110px;}
  body.rscm-about-page .rscm-about-hero {gap:30px;padding-top:15px;}
  body.rscm-simulation-page .rscm-simulation-hero .hero-grid {padding-bottom:70px;}
  body.rscm-simulation-page .hero-copy.rscm-simulation-copy {width:100%;max-width:720px;}
}
@media (max-width:900px) {
  body.rscm-about-page .rscm-about-hero {grid-template-columns:1fr;}
  body.rscm-about-page .rscm-about-introduction {max-width:720px;}
  body.rscm-about-page .rscm-about-flow {max-width:730px;width:100%;}
  body.rscm-about-page .rscm-about-feature-grid {gap:11px;}
  body.rscm-about-page .rscm-public-feature-card {padding:19px 17px;}
  body.rscm-simulation-page .rscm-simulation-copy > h1 {font-size:clamp(29px,4.5vw,36px);}
  body.rscm-simulation-page .rscm-simulation-controls {max-width:590px;}
}
@media (max-width:700px) {
  body.rscm-about-page .rscm-about-feature-grid,
  body.rscm-simulation-page .rscm-simulation-guide-grid {grid-template-columns:1fr;}
  body.rscm-about-page .rscm-public-bottom-note {flex-wrap:wrap;}
}
@media (max-width:600px) {
  body.rscm-about-page .rscm-public-main {padding-top:91px;padding-bottom:30px;}
  body.rscm-about-page .rscm-about-hero {padding-top:8px;padding-bottom:38px;}
  body.rscm-public-page .rscm-public-eyebrow {font-size:9px;letter-spacing:.04em;}
  body.rscm-about-page .rscm-about-introduction > h1 {font-size:clamp(29px,7.4vw,35px);margin:15px 0;}
  body.rscm-about-page .rscm-about-introduction .rscm-public-lead {font-size:13.3px;}
  body.rscm-about-page .rscm-about-introduction .rscm-public-bodycopy {font-size:12px;}
  body.rscm-public-page .rscm-public-actions {gap:9px;}
  body.rscm-public-page .rscm-public-actions > a.button {min-height:42px;font-size:11.5px;}
  body.rscm-about-page .rscm-about-flow {padding:19px 18px;}
  body.rscm-about-page .rscm-about-flow-header h2 {font-size:16px;}
  body.rscm-about-page .rscm-about-flow-steps small {font-size:11px;}
  body.rscm-about-page .rscm-about-features {padding-bottom:28px;}
  body.rscm-about-page .rscm-about-feature-grid {margin-top:17px;}
  body.rscm-about-page .rscm-public-feature-card h3 {margin-top:12px;}
  body.rscm-about-page .rscm-public-bottom-note {padding:17px;gap:13px;}
  body.rscm-about-page .rscm-public-bottom-note > div {gap:10px;}
  body.rscm-simulation-page .rscm-simulation-hero .hero-grid {padding-top:109px;padding-bottom:48px;}
  body.rscm-simulation-page .rscm-simulation-copy > h1 {font-size:clamp(28px,7vw,34px);}
  body.rscm-simulation-page .rscm-simulation-copy > .hero-description {font-size:12.6px;}
  body.rscm-simulation-page .rscm-simulation-controls {padding:15px;margin-top:20px;}
  body.rscm-simulation-page button.rscm-simulation-control {min-height:61px;padding:9px;}
  body.rscm-simulation-page .rscm-simulation-guide {padding-bottom:37px;}
}
@media (max-width:380px) {
  body.rscm-simulation-page .rscm-simulation-control-grid {grid-template-columns:1fr;}
  body.rscm-about-page .rscm-public-bottom-note > a {margin-left:0;}
}
@media (prefers-reduced-motion:reduce) {
  body.rscm-public-page .rscm-public-actions > a.button,
  body.rscm-simulation-page button.rscm-simulation-control {transition:none;}
}


/* ========================================================================
   RSCM IoMT V4.3.164 — PUBLIC ACCESS PORTAL INFORMATION PAGE
   Scope: only akses-petugas.html. Shared topbar, footer, other pages and
   Firebase login are untouched. All text is nontechnical and user-facing.
   ======================================================================== */
body.rscm-access-page .rscm-public-main {
  display:flex;
  flex-direction:column;
  width:100%;
  padding-top:130px;
  padding-bottom:58px;
}
body.rscm-access-page .rscm-access-hero {
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:clamp(30px,5.2vw,85px);
  align-items:center;
  padding-top:31px;
  padding-bottom:69px;
}
body.rscm-access-page .rscm-access-intro {min-width:0;max-width:650px;}
body.rscm-access-page .rscm-access-intro > h1 {
  max-width:630px;
  margin:20px 0 19px;
  color:#17384c;
  font-size:clamp(33px,3.05vw,46px);
  font-weight:810;
  letter-spacing:-.042em;
  line-height:1.14;
  text-wrap:pretty;
}
body.rscm-access-page .rscm-access-intro > h1 em {color:#278e86;font-style:normal;}
body.rscm-access-page .rscm-access-intro .rscm-public-lead {
  max-width:600px;color:#526e7d;font-size:15px;line-height:1.74;
}
body.rscm-access-page .rscm-access-intro .rscm-public-bodycopy {
  max-width:600px;margin-top:14px;color:#718796;font-size:13px;line-height:1.78;
}
body.rscm-access-page .rscm-access-inline-note {
  display:flex;align-items:flex-start;gap:9px;
  margin-top:22px;
  color:#6c8490;font-size:11px;line-height:1.65;
}
body.rscm-access-page .rscm-access-inline-note i {margin-top:2px;color:#288b83;}
body.rscm-access-page .rscm-access-panel {
  min-width:0;padding:25px 25px 22px;
  border:1px solid #dce9ed;border-radius:20px;
  background:linear-gradient(145deg,#fff 0%,#f9fcfb 100%);
  box-shadow:0 7px 16px rgba(36,76,93,.07),0 22px 43px rgba(36,76,93,.08),inset 0 1px 0 #fff;
}
body.rscm-access-page .rscm-access-panel-head {
  display:flex;align-items:center;gap:14px;
  padding-bottom:20px;border-bottom:1px solid #e6eff1;
}
body.rscm-access-page .rscm-access-panel-icon {
  width:53px;height:53px;flex:0 0 53px;
  display:grid;place-items:center;
  border:1px solid #d5eae5;border-radius:15px;
  background:linear-gradient(150deg,#e9f8f3,#dff3ee);color:#238b80;
  font-size:25px;box-shadow:inset 0 1px 0 #fff;
}
body.rscm-access-page .rscm-access-panel-head small {
  color:#728994;font-size:10px;font-weight:800;letter-spacing:.08em;
}
body.rscm-access-page .rscm-access-panel-head h2 {
  margin-top:4px;color:#193c50;font-size:21px;font-weight:800;line-height:1.28;
}
body.rscm-access-page .rscm-access-panel-list {padding:5px 0;}
body.rscm-access-page .rscm-access-panel-item {
  display:flex;align-items:flex-start;gap:15px;min-width:0;padding:17px 0;
}
body.rscm-access-page .rscm-access-panel-item + .rscm-access-panel-item {
  border-top:1px solid #e9eff1;
}
body.rscm-access-page .rscm-access-row-icon {
  display:grid;place-items:center;
  width:40px;height:40px;flex:0 0 40px;border-radius:11px;
  border:1px solid #dceae8;background:#eef8f5;color:#258d84;font-size:18px;
}
body.rscm-access-page .rscm-access-panel-item:nth-child(2) .rscm-access-row-icon {
  background:#ecf7fa;border-color:#d7e9ee;color:#338ea4;
}
body.rscm-access-page .rscm-access-panel-item:nth-child(3) .rscm-access-row-icon {
  background:#f5f9e8;border-color:#e3ebcc;color:#7a921e;
}
body.rscm-access-page .rscm-access-panel-item > div {min-width:0;}
body.rscm-access-page .rscm-access-panel-item strong {
  display:block;color:#1c3e52;font-size:14px;font-weight:785;line-height:1.35;
}
body.rscm-access-page .rscm-access-panel-item p {
  margin-top:5px;color:#6b8290;font-size:11.7px;line-height:1.6;
}
body.rscm-access-page .rscm-access-panel-foot {
  display:flex;align-items:flex-start;gap:9px;
  padding:13px;border:1px solid #d8eae4;border-radius:10px;
  color:#397f73;background:#f0faf5;font-size:11px;line-height:1.55;
}
body.rscm-access-page .rscm-access-panel-foot i {margin-top:2px;font-size:14px;}
body.rscm-access-page .rscm-access-guide {padding-top:0;padding-bottom:34px;scroll-margin-top:100px;}
body.rscm-access-page .rscm-access-guide-grid {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px;
}
body.rscm-access-page .rscm-access-guide-grid > article {
  min-width:0;padding:22px 22px 24px;border:1px solid #e0eaf0;
  border-radius:16px;background:#fff;
  box-shadow:0 4px 11px rgba(34,74,94,.035),0 14px 26px rgba(34,74,94,.045);
}
body.rscm-access-page .rscm-access-guide-number {
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  color:#258e85;background:#e9f7f3;font-size:12px;font-weight:840;
}
body.rscm-access-page .rscm-access-guide-grid h3 {
  margin:16px 0 8px;color:#1b3d50;font-size:16px;font-weight:770;line-height:1.3;
}
body.rscm-access-page .rscm-access-guide-grid p {
  color:#657d8b;font-size:12px;line-height:1.7;
}
body.rscm-access-page .rscm-access-bottom-note {
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px;border:1px solid #d7eae6;border-radius:15px;
  background:linear-gradient(120deg,#eff9f6,#f9fcfb);
}
body.rscm-access-page .rscm-access-bottom-note > div {
  display:flex;align-items:flex-start;gap:14px;min-width:0;
}
body.rscm-access-page .rscm-access-bottom-icon {
  display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;
  background:#e0f3ec;border-radius:11px;color:#268b79;font-size:19px;
}
body.rscm-access-page .rscm-access-bottom-note h2 {
  color:#1b3c50;font-size:15px;font-weight:770;line-height:1.4;
}
body.rscm-access-page .rscm-access-bottom-note p {
  max-width:850px;margin-top:5px;color:#627e89;font-size:11.5px;line-height:1.65;
}
body.rscm-access-page .rscm-access-bottom-note > a {
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  color:#16877d;font-size:12px;font-weight:760;white-space:nowrap;
}
body.rscm-access-page .rscm-access-bottom-note > a:hover {text-decoration:underline;text-underline-offset:4px;}
@media (max-width:1190px) {
  body.rscm-access-page .rscm-public-main {padding-top:110px;}
  body.rscm-access-page .rscm-access-hero {gap:31px;padding-top:15px;}
}
@media (max-width:900px) {
  body.rscm-access-page .rscm-access-hero {grid-template-columns:1fr;gap:32px;}
  body.rscm-access-page .rscm-access-intro {max-width:720px;}
  body.rscm-access-page .rscm-access-panel {width:100%;max-width:730px;}
  body.rscm-access-page .rscm-access-guide-grid {gap:11px;}
  body.rscm-access-page .rscm-access-guide-grid > article {padding:20px 18px;}
}
@media (max-width:700px) {
  body.rscm-access-page .rscm-access-guide-grid {grid-template-columns:1fr;}
  body.rscm-access-page .rscm-access-bottom-note {flex-wrap:wrap;}
}
@media (max-width:600px) {
  body.rscm-access-page .rscm-public-main {padding-top:91px;padding-bottom:30px;}
  body.rscm-access-page .rscm-access-hero {padding-top:8px;padding-bottom:37px;gap:26px;}
  body.rscm-access-page .rscm-access-intro > h1 {
    margin:15px 0;font-size:clamp(30px,7.4vw,35px);
  }
  body.rscm-access-page .rscm-access-intro .rscm-public-lead {font-size:13.3px;}
  body.rscm-access-page .rscm-access-intro .rscm-public-bodycopy {font-size:12px;}
  body.rscm-access-page .rscm-access-panel {padding:19px 18px;}
  body.rscm-access-page .rscm-access-panel-head h2 {font-size:18px;}
  body.rscm-access-page .rscm-access-guide {padding-bottom:27px;}
  body.rscm-access-page .rscm-access-guide-grid {margin-top:17px;}
  body.rscm-access-page .rscm-access-guide-grid h3 {margin-top:11px;font-size:15px;}
  body.rscm-access-page .rscm-access-bottom-note {padding:18px;gap:14px;}
}


/* ========================================================================
   RSCM IoMT V4.3.166 — 4-STAGE SIDERAIL SIMULATION FLOW
   Laman simulasi saja: kontrol dibuat ringkas, lalu alur empat komponen
   Bed Pasien — IoMT — Router — Dashboard terhubung garis teal.
   Dashboard dan SVG asli digunakan; JS demo lokal tetap menjadi pengendali.
   Tidak mengubah Index, Login, backend, autentikasi, atau footer.
   ======================================================================== */
body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:25px;
  min-height:0;
  padding-top:114px;
  padding-bottom:60px;
}
body.rscm-simulation-page .rscm-simulation-hero .hero-grid > .hero-copy.rscm-simulation-copy {
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  max-width:none;
  transform:none;
}
body.rscm-simulation-page .rscm-simulation-copy > h1 {
  max-width:none;
  margin:0 0 10px;
  font-size:clamp(26px,2.5vw,34px);
  line-height:1.2;
}
body.rscm-simulation-page .rscm-simulation-copy > .hero-description {
  max-width:760px;
  font-size:12.75px;
  line-height:1.6;
}
body.rscm-simulation-page .rscm-simulation-controls {
  box-sizing:border-box;
  max-width:434px;
  margin-top:18px;
  padding:12px 13px 11px;
  border-radius:13px;
  box-shadow:0 5px 15px rgba(30,67,88,.045),0 12px 25px rgba(30,67,88,.035),inset 0 1px 0 #fff;
}
body.rscm-simulation-page .rscm-simulation-controls-heading h2 {font-size:14px;}
body.rscm-simulation-page .rscm-simulation-controls-heading p {margin-top:2px;font-size:9.5px;line-height:1.45;}
body.rscm-simulation-page .rscm-simulation-control-grid {gap:8px;margin-top:10px;}
body.rscm-simulation-page button.rscm-simulation-control {
  min-height:46px;
  gap:7px;
  padding:7px 9px;
  border-radius:9px;
}
body.rscm-simulation-page button.rscm-simulation-control > i:first-child {width:16px;flex-basis:16px;font-size:15px;}
body.rscm-simulation-page button.rscm-simulation-control strong {font-size:10.3px;}
body.rscm-simulation-page button.rscm-simulation-control small {font-size:9px;}
body.rscm-simulation-page button.rscm-simulation-control > span {gap:1px;}
body.rscm-simulation-page .rscm-simulation-summary {
  margin-top:9px;
  padding:7px 10px;
  font-size:9.5px;
  border-radius:8px;
}
body.rscm-simulation-page .rscm-simulation-flow {
  display:grid;
  grid-template-columns:minmax(0,1.07fr) minmax(0,.53fr) minmax(0,.53fr) minmax(0,2.8fr);
  align-items:start;
  gap:24px;
  width:100%;
  min-width:0;
  isolation:isolate;
}
body.rscm-simulation-page .rscm-sim-flow-step,
body.rscm-simulation-page .rscm-sim-flow-dashboard {
  position:relative;
  min-width:0;
}
body.rscm-simulation-page .rscm-sim-flow-step {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:210px;
  padding:17px 10px 15px;
  border:1px solid #dfe9ed;
  border-radius:16px;
  background:#fff;
  box-shadow:0 4px 10px rgba(24,69,81,.045),0 11px 22px rgba(24,69,81,.06),inset 0 1px 0 #fff;
  text-align:center;
}
body.rscm-simulation-page .rscm-sim-flow-step h3 {
  color:#1a4151;
  font-size:13px;
  font-weight:780;
  line-height:1.3;
  white-space:nowrap;
}
body.rscm-simulation-page .rscm-sim-flow-step > p {
  margin-top:8px;
  color:#657f8f;
  font-size:9.6px;
  line-height:1.4;
}
/* Crisp teal connector lines between adjacent stages, no fabricated arrows or signal data. */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::after {
    content:"";
    position:absolute;
    z-index:0;
    left:calc(100% + 1px);
    top:50%;
    width:23px;
    height:2px;
    background:linear-gradient(90deg,#7bc6bd,#218b85);
    pointer-events:none;
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::before {
    content:"";
    position:absolute;
    z-index:2;
    left:calc(100% + 10px);
    top:calc(50% - 3px);
    width:7px;
    height:7px;
    border:1px solid #218b85;
    border-radius:50%;
    background:#fff;
    pointer-events:none;
  }
}
body.rscm-simulation-page .rscm-sim-bed-art {
  display:grid;
  place-items:center;
  width:100%;
  max-width:270px;
  min-height:134px;
  padding-top:5px;
}
body.rscm-simulation-page .rscm-sim-bed-art .hero-bed.rscm-sim-bed-figure {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:auto;
  inset:auto;
  margin:0;
  padding:0;
}
body.rscm-simulation-page .rscm-sim-bed-art .bed-illustration {
  display:block;
  width:100%;
  max-width:245px;
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 5px 6px rgba(36,73,98,.1));
}
body.rscm-simulation-page .rscm-sim-device-model {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  width:69px;
  height:94px;
  margin-top:18px;
  padding:12px 7px 9px;
  border:2px solid #243946;
  border-radius:13px;
  color:#d5f3e9;
  background:linear-gradient(140deg,#354b56,#172b34 64%,#10222b);
  box-shadow:0 8px 15px rgba(20,51,63,.23),inset 0 2px 0 rgba(255,255,255,.13);
}
body.rscm-simulation-page .rscm-sim-device-chip {
  font-size:31px;
  color:#5bc3af;
  text-shadow:0 1px 3px rgba(0,0,0,.28);
}
body.rscm-simulation-page .rscm-sim-device-led {
  position:absolute;
  right:9px;
  top:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#a9ef54;
  box-shadow:0 0 7px rgba(138,237,80,.75);
}
body.rscm-simulation-page .rscm-sim-device-sensors {display:flex;gap:7px;}
body.rscm-simulation-page .rscm-sim-device-sensors > b {width:6px;height:6px;border:1px solid #84a6b0;border-radius:50%;background:#0d222a;}
body.rscm-simulation-page .rscm-sim-device-name {font-size:7.3px;color:#eafbf5;line-height:1;white-space:nowrap;}
body.rscm-simulation-page .rscm-sim-router-icon {
  display:grid;
  place-items:center;
  width:91px;
  height:91px;
  max-width:100%;
  margin-top:20px;
  border:1px solid #d8e9e6;
  border-radius:18px;
  color:#218b85;
  background:linear-gradient(145deg,#f7fcfb,#e9f7f4);
  box-shadow:inset 0 1px 0 #fff,0 9px 16px rgba(33,113,105,.075);
}
body.rscm-simulation-page .rscm-sim-router-icon i {font-size:47px;}
/* Dashboard preview is exactly the existing user-approved DOM, just relocated
   to flow stage #4; normalize its old right offset/zoom to fill the column. */
body.rscm-simulation-page .rscm-sim-flow-dashboard {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  align-self:center;
}
body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview {
  align-items:center;
  justify-self:center;
  width:100%;
  max-width:none;
  min-width:0;
}
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    --rscm-stage-zoom:.90;
    width:100%;
    zoom:var(--rscm-stage-zoom);
    right:0;
    max-width:none;
    flex:0 0 auto;
  }
  body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    align-self:center;
    width:90%;
    right:0;
    margin:5px 0 0;
  }
}
@media (max-width:1190px) {
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid {
    gap:29px;
    padding-top:109px;
    padding-bottom:45px;
  }
  body.rscm-simulation-page .rscm-simulation-flow {
    grid-template-columns:1fr;
    justify-items:center;
    gap:29px;
  }
  body.rscm-simulation-page .rscm-sim-flow-step {
    min-height:190px;
    width:min(100%,440px);
  }
  body.rscm-simulation-page .rscm-sim-flow-dashboard {width:min(100%,820px);}
  body.rscm-simulation-page .rscm-sim-flow-step::after {
    content:"";
    position:absolute;
    z-index:2;
    top:100%;
    left:50%;
    width:2px;
    height:29px;
    background:#55b7a7;
    pointer-events:none;
  }
}
@media (max-width:600px) {
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid {
    gap:24px;
    padding-top:98px;
    padding-bottom:35px;
  }
  body.rscm-simulation-page .rscm-simulation-copy > h1 {font-size:clamp(25px,6.4vw,32px);}
  body.rscm-simulation-page .rscm-simulation-controls {max-width:100%;margin-top:15px;padding:12px;}
  body.rscm-simulation-page .rscm-simulation-control-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  body.rscm-simulation-page button.rscm-simulation-control {min-height:44px;padding:7px;}
  body.rscm-simulation-page .rscm-simulation-flow {gap:25px;}
  body.rscm-simulation-page .rscm-sim-flow-step {width:100%;min-height:180px;}
  body.rscm-simulation-page .rscm-sim-flow-step::after {height:25px;}
}
@media (max-width:380px) {
  body.rscm-simulation-page button.rscm-simulation-control > i:first-child {font-size:13px;}
  body.rscm-simulation-page button.rscm-simulation-control strong {font-size:9.4px;}
}
@media (prefers-reduced-motion:reduce) {
  body.rscm-simulation-page .rscm-sim-device-led {box-shadow:none;}
}


/* ========================================================================
   RSCM IoMT V4.3.168 — EXTRA COMPACT DASHBOARD IN FOUR-STAGE SIMULATION
   Scope: Stage 4 only, desktop/laptop >=1191px.
   Reduce the complete workstation a further ~34% from V4.3.167,
   while anchoring the stage at its left boundary so the Router connector
   continues to meet the monitor. All demo controls, SVG and JS are intact.
   Tablet/phone layouts retain their existing responsive sizing.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-sim-flow-dashboard {
    justify-content:flex-start;
  }
  body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview {
    width:65%;
    align-items:flex-start;
    justify-self:start;
  }
  body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    --rscm-stage-zoom:.65;
    width:100%;
    zoom:var(--rscm-stage-zoom);
    right:0;
  }
  body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    width:65%;
    align-self:flex-start;
    right:0;
    margin:7px 0 0;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.169 — SIMULATION DASHBOARD RIGHT GUTTER ALIGNMENT
   Desktop/laptop >=1191px only. Keep 65% monitor/workstation size from
   V4.3.168, but anchor the entire stage to the right edge of its grid column.
   The flow column ends at the same container gutter as Bed Pasien starts.
   Bridge the resulting space with the existing teal connector visual.
   All controls, simulation logic and public layouts remain unchanged.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-sim-flow-dashboard {
    justify-content:flex-end;
  }
  /* Continue the Router-to-Dashboard line across the now-unused 35% track.
     Router already draws the 24px connector up to the stage boundary. */
  body.rscm-simulation-page .rscm-sim-flow-dashboard::before {
    content:"";
    position:absolute;
    left:0;
    width:35%;
    top:105px;
    height:2px;
    background:linear-gradient(90deg,#7bc6bd,#218b85);
    pointer-events:none;
    z-index:0;
  }
  body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview {
    position:relative;
    z-index:1;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.170 — EQUALLY SPACED FOUR-STAGE FLOW (DESKTOP ONLY)
   Bed Pasien / IoMT / Router / Dashboard: same visual gap between stages.
   Existing bed and workstation sizes, left/right page gutters, demo state,
   connectors, and <=1190px layouts remain intact.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:0;
    container-type:inline-size;
    /* Remaining horizontal space after the four unchanged component widths,
       divided into three equal inter-component distances. */
    --rscm-sim-equal-gap:calc(6.6261cqw + 19.229px);
  }

  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-bed {
    flex:0 0 calc((100% - 72px) * .21703854);
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-iomt,
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-router {
    flex:0 0 calc((100% - 72px) * .10750507);
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-dashboard {
    flex:0 0 calc((100% - 72px) * .36916836);
    width:calc((100% - 72px) * .36916836);
    justify-content:flex-end;
  }
  body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview {
    width:100%;
    align-items:flex-start;
  }

  /* Stretch each existing connector across its new equal-sized gap. */
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::after {
    left:100%;
    width:var(--rscm-sim-equal-gap);
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::before {
    left:calc(100% + 3.31305cqw + 9.6145px - 4px);
  }
  /* The Router connector now reaches the Dashboard directly; the old
     overlay spanning the unused portion of the last grid column is obsolete. */
  body.rscm-simulation-page .rscm-sim-flow-dashboard::before {
    display:none;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.171 — STRAIGHT CONNECTOR + SMALLER DASHBOARD
   Desktop/laptop >=1191px only. Four component boxes remain evenly spaced;
   the Dashboard workstation is 78% of its V4.3.170 width, right-aligned.
   Every connector is placed on the SAME y-axis relative to the flow row,
   instead of using each differently-sized card's vertical midpoint.
   Public demo/rail functions, index, login and mobile styles are untouched.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow {
    --rscm-sim-connector-y:120px;
    /* Equal gaps after reducing the final item to 78% of V4.3.170. */
    --rscm-sim-equal-gap:calc(9.333335cqw + 17.2798px);
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-dashboard {
    flex:0 0 calc((100% - 72px) * .2879513208);
    width:calc((100% - 72px) * .2879513208);
    justify-content:flex-end;
  }
  /* Keep the mini-Dashboard intrinsic layout constant while scaling both
     dimensions to 78%: .65 (V4.3.170) × .78 = .507. */
  body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    --rscm-stage-zoom:.507;
    zoom:var(--rscm-stage-zoom);
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::after {
    top:var(--rscm-sim-connector-y);
    left:calc(100% + 2px);
    width:calc(var(--rscm-sim-equal-gap) - 2px);
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::before {
    top:calc(var(--rscm-sim-connector-y) - 3px);
    /* Place each indicator at the midpoint of its actual connector. */
    left:calc(100% + 4.666667cqw + 6.1399px);
  }
}

/* =======================================================================
   RSCM IoMT V4.3.172 — SEQUENTIAL VISUAL SIGNAL, PUBLIC SIMULATION ONLY
   Initial line is grey; an active teal signal travels across three straight
   connectors. Dashboard state is committed by simulasi-siderail.js only after
   the third signal hop has finished. Original placement and sizes unchanged.
   ======================================================================= */
body.rscm-simulation-page .rscm-simulation-flow {
  --rscm-signal-grey:#c0ced3;
  --rscm-signal-active:#10a99c;
}
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::after {
  background-image:
    linear-gradient(90deg,#64d5c4 0%,#15ae9f 58%,#078f87 100%),
    linear-gradient(var(--rscm-signal-grey),var(--rscm-signal-grey));
  background-position:left center,left center;
  background-repeat:no-repeat,no-repeat;
  background-size:0% 100%,100% 100%;
}
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::before {
    border-color:#b9cbd0;
    background:#fff;
    box-shadow:none;
  }
  @keyframes rscm-sim-wire-travel-v172 {
    from {background-size:0% 100%,100% 100%;}
    to   {background-size:100% 100%,100% 100%;}
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step::after {
    animation:rscm-sim-wire-travel-v172 560ms cubic-bezier(.24,.66,.2,1) both;
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(1)::after {animation-delay:0ms;}
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(2)::after {animation-delay:610ms;}
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(3)::after {animation-delay:1220ms;}
  @keyframes rscm-sim-signal-node-v172 {
    0%,12% {border-color:#b9cbd0;background:#fff;box-shadow:none;}
    35%,100% {border-color:#169f94;background:#47d1bf;box-shadow:0 0 0 4px rgba(26,185,167,.15),0 0 11px rgba(24,180,162,.4);}
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step::before {
    animation:rscm-sim-signal-node-v172 500ms ease-out both;
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(1)::before {animation-delay:340ms;}
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(2)::before {animation-delay:950ms;}
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(3)::before {animation-delay:1560ms;}
}
@media (max-width:1190px) {
  /* Vertical version of the SAME grey-to-teal signal for stacked stages. */
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::after {
    background-image:
      linear-gradient(180deg,#64d5c4 0%,#15ae9f 58%,#078f87 100%),
      linear-gradient(var(--rscm-signal-grey),var(--rscm-signal-grey));
    background-size:100% 0%,100% 100%;
    background-position:center top,center top;
  }
  @keyframes rscm-sim-wire-vertical-v172 {
    from {background-size:100% 0%,100% 100%;}
    to {background-size:100% 100%,100% 100%;}
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step::after {
    animation:rscm-sim-wire-vertical-v172 560ms cubic-bezier(.24,.66,.2,1) both;
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(1)::after {animation-delay:0ms;}
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(2)::after {animation-delay:610ms;}
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(3)::after {animation-delay:1220ms;}
}
body.rscm-simulation-page .rscm-sim-device-model,
body.rscm-simulation-page .rscm-sim-router-icon,
body.rscm-simulation-page .rscm-sim-flow-dashboard .rscm-preview-bezel {
  transition:box-shadow .24s ease,outline-color .24s ease;
}


@media (prefers-reduced-motion:reduce) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::after,
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::before {
    animation:none!important;
  }
  body.rscm-simulation-page .rscm-sim-device-model,
  body.rscm-simulation-page .rscm-sim-router-icon,
  body.rscm-simulation-page .rscm-sim-flow-dashboard .rscm-preview-bezel {
    transition:none!important;
  }
}


/* =======================================================================
   RSCM IoMT V4.3.173 — HOTFIX MOTION SVG BED PASIEN
   The rail status classes have to produce a physical SVG movement, not just
   a status label. Local to the standalone bed in simulasi-siderail.html.
   Each rail keeps its own existing matrix transform on .bed4-rail-project.
   This parent-<g> translation represents lowering/opening the siderail;
   the controller still owns timing, line propagation and Dashboard delivery.
   ======================================================================= */
body.rscm-simulation-page .rscm-sim-bed-art .bed-illustration [data-sim-illustration-rail] {
  transform:translateY(0);
  transform-origin:0 0;
  transform-box:view-box;
  transition:transform 420ms cubic-bezier(.22,.72,.19,1);
}
body.rscm-simulation-page .rscm-sim-bed-art .bed-illustration [data-sim-illustration-rail="left"].open {
  transform:translateY(122px);
}
body.rscm-simulation-page .rscm-sim-bed-art .bed-illustration [data-sim-illustration-rail="right"].open {
  transform:translateY(122px);
}
@media (prefers-reduced-motion:reduce) {
  body.rscm-simulation-page .rscm-sim-bed-art .bed-illustration [data-sim-illustration-rail] {
    transition:none;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.174 — DASHBOARD 10% WIDER + CENTERED ACCESSORIES
   Desktop/laptop >=1191px only. Increase stage-four's visual width by 10%
   relative to V4.3.173; keep its right edge aligned to the approved gutter.
   Recalculate the three equal inter-component connector gaps. Center the
   keyboard-and-mouse group beneath the monitor as ONE visual unit.
   No changes to device demo states, SVG rail motion, or signal propagation.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow {
    --rscm-sim-equal-gap:calc(8.37349cqw + 17.9711px);
  }

  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-dashboard {
    flex:0 0 calc((100% - 72px) * .3167464529);
    width:calc((100% - 72px) * .3167464529);
    justify-content:flex-end;
  }

  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::before {
    left:calc(100% + 4.186745cqw + 4.98555px);
  }

  body.rscm-simulation-page .rscm-sim-flow-dashboard .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    align-self:center;
    right:0;
    margin-inline:0;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.175 — CENTER PUBLIC SIMULATION TITLE + COMPACT CONTROLS
   Place the two existing rail controls UNDER the Bed Pasien illustration,
   within the first stage, keeping the four stages in original DOM order.
   No changes to signal timing, rail data hooks or responsive monitor sizing.
   ======================================================================== */
body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid > .hero-copy.rscm-simulation-copy {
  text-align:center;
  align-items:center;
}
body.rscm-simulation-page .rscm-simulation-copy > h1 {
  margin-inline:auto;
  text-align:center;
}
body.rscm-simulation-page .rscm-simulation-copy > .hero-description {
  margin-inline:auto;
  text-align:center;
}
/* All rail controls remain descendants of the same simulation flow, now
   tucked into the Bed Pasien card to free the former full-width top area. */
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-bed > .rscm-simulation-controls {
  width:100%;
  max-width:none;
  min-width:0;
  margin:12px 0 0;
  padding:10px 8px 9px;
  border:1px solid #e0ebee;
  border-radius:10px;
  background:#f9fcfb;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
  text-align:left;
}
body.rscm-simulation-page .rscm-sim-flow-bed .rscm-simulation-controls-heading h2 {
  font-size:11.5px;
  line-height:1.32;
}
body.rscm-simulation-page .rscm-sim-flow-bed .rscm-simulation-controls-heading p {
  margin-top:3px;
  font-size:8.5px;
  line-height:1.45;
}
body.rscm-simulation-page .rscm-sim-flow-bed .rscm-simulation-control-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:8px;
}
body.rscm-simulation-page .rscm-sim-flow-bed button.rscm-simulation-control {
  min-height:40px;
  gap:5px;
  padding:6px;
}
body.rscm-simulation-page .rscm-sim-flow-bed button.rscm-simulation-control > i:first-child {
  flex:0 0 12px;
  width:12px;
  font-size:12px;
}
body.rscm-simulation-page .rscm-sim-flow-bed button.rscm-simulation-control strong {
  font-size:9px;
}
body.rscm-simulation-page .rscm-sim-flow-bed button.rscm-simulation-control small {
  font-size:8px;
}
body.rscm-simulation-page .rscm-sim-flow-bed button.rscm-simulation-control .rscm-control-action {
  font-size:9px;
}
body.rscm-simulation-page .rscm-sim-flow-bed .rscm-simulation-summary {
  margin-top:7px;
  padding:6px 7px;
  font-size:8.8px;
  line-height:1.45;
}
/* Do not wrap the final signal line around the taller first stage: existing
   desktop connector coordinates remain exactly the approved straight line. */
@media (min-width:1191px) and (max-width:1340px) {
  body.rscm-simulation-page .rscm-sim-flow-bed button.rscm-simulation-control .rscm-control-action {
    display:none;
  }
}
@media (max-width:1190px) {
  body.rscm-simulation-page .rscm-sim-flow-bed .rscm-simulation-control-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-bed > .rscm-simulation-controls {
    max-width:100%;
    margin-top:12px;
    padding:11px 10px 10px;
  }
}
@media (max-width:360px) {
  body.rscm-simulation-page .rscm-sim-flow-bed button.rscm-simulation-control .rscm-control-action {
    display:none;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.176 — STANDALONE CONTROL CARD + MANUAL/AUTO MODES
   Public simulation ONLY. First connector stage remains the first direct
   child of .rscm-simulation-flow so V4.3.172 CSS timing is unchanged.
   ======================================================================== */
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:12px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:initial;
}
body.rscm-simulation-page .rscm-sim-bed-stack > .rscm-sim-bed-panel {
  width:100%;
  min-height:0;
  box-sizing:border-box;
  margin:0;
  padding:17px 10px 15px;
}
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack > .rscm-simulation-controls {
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0;
  padding:12px 10px 11px;
  border:1px solid #dfe9ed;
  border-radius:13px;
  background:#fff;
  box-shadow:0 4px 10px rgba(24,69,81,.045),0 11px 22px rgba(24,69,81,.06),inset 0 1px 0 #fff;
}
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-simulation-controls-heading h2 {
  font-size:12px;
  font-weight:780;
}
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-sim-mode-switch {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:4px;
  margin-top:8px;
  padding:3px;
  border:1px solid #dce9e8;
  border-radius:9px;
  background:#f3f8f7;
}
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-sim-mode-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:5px 6px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#526e7b;
  font-family:inherit;
  font-size:10.5px;
  font-weight:750;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-sim-mode-button.is-active {
  background:linear-gradient(180deg,#47b3ab,#228d85);
  color:white;
  box-shadow:0 2px 5px rgba(29,111,103,.16),inset 0 1px 0 rgba(255,255,255,.17);
}
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-sim-mode-button:focus-visible {
  outline:2px solid #0a817a;
  outline-offset:3px;
}
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-sim-mode-button:disabled {
  opacity:.42;
  cursor:not-allowed;
}
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-sim-mode-description {
  margin:8px 0 0;
  font-size:9px;
  color:#627f8c;
  line-height:1.5;
}
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-simulation-control-grid {
  margin-top:9px;
}
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-simulation-controls[data-sim-mode="automatic"] button.rscm-simulation-control {
  cursor:not-allowed;
  opacity:.69;
}
/* The animated line is drawn on the transparent first-stage stack, not
   the inner Bed Pasien card. Existing 120px desktop y-coordinate remains. */
@media (max-width:1190px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack {
    width:min(100%,440px);
  }
  body.rscm-simulation-page .rscm-sim-bed-stack > .rscm-sim-bed-panel {
    min-height:190px;
  }
}
@media (max-width:600px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack,
  body.rscm-simulation-page .rscm-sim-bed-stack > .rscm-sim-bed-panel {
    width:100%;
  }
  body.rscm-simulation-page .rscm-sim-bed-stack .rscm-sim-mode-button {min-height:34px;}
}
@media (prefers-reduced-motion:reduce) {
  body.rscm-simulation-page .rscm-sim-bed-stack .rscm-sim-mode-button {transition:none;}
}
/* On stacked layouts the signal connector belongs to the outer stage only. */
@media (max-width:1190px) {
  body.rscm-simulation-page .rscm-sim-bed-stack > .rscm-sim-bed-panel::after {
    content:none;
    display:none;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.177 — CONTROL CARD CENTERED UNDER IoMT + ROUTER
   Desktop only: visually relocate the existing Manual/Otomatis control panel
   without moving it in DOM. Preserve the four direct signal stages, CSS
   nth-child timing, JS event handlers, rail animation, and dashboard delivery.
   The first stage stays a positioned ancestor for existing wire pseudo-elements.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow {
    /* Reserve enough vertical clearance so the relocated card cannot reach the footer. */
    min-height:440px;
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-dashboard {
    /* The card is out of flow: do not vertically recenter the monitor. */
    align-self:flex-start;
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack > .rscm-simulation-controls {
    position:absolute;
    top:229px;
    /* cqw refers to the full four-stage flow, not the narrower Bed card. */
    left:50cqw;
    width:100%;
    transform:translateX(-50%);
    margin:0;
    z-index:4;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.178 — LOWER SIMULATION FLOW 20PX / CONTROLS EXTRA 30PX
   Desktop only. Move the ENTIRE approved four-stage flow 20px lower, then
   move the centered Manual/Otomatis card an additional 30px down relative
   to the four components. Retain the original connector y-axis and widths.
   Reserve added flow height so the controls do not overlap the footer.
   Mobile/tablet layout, device sizing and simulation JS remain unchanged.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid > .rscm-simulation-flow {
    margin-top:20px;
    min-height:470px;
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack > .rscm-simulation-controls {
    top:259px; /* V4.3.177 229px + 30px (additional to flow offset). */
  }
}


/* ========================================================================
   RSCM IoMT V4.3.179 — CONTROL CARD DOWN 40PX + CENTER HEADING ONLY
   Move standalone manual/automatic control card a further 40px below its
   V4.3.178 desktop position. Keep bed, IoMT, router, Dashboard, signal
   connector geometry and all existing JS unchanged. Reserve flow height.
   Heading is centered on all screen sizes; other text alignment unchanged.
   ======================================================================== */
body.rscm-simulation-page .rscm-sim-bed-stack .rscm-simulation-controls-heading h2 {
  display:block;
  width:100%;
  text-align:center;
}
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid > .rscm-simulation-flow {
    min-height:510px; /* V4.3.178: 470px + 40px clearance */
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack > .rscm-simulation-controls {
    top:299px; /* V4.3.178: 259px + 40px */
  }
}

/* ========================================================================
   RSCM IoMT V4.3.180 — CONTROL CARD DOWN 20PX MORE (DESKTOP ONLY)
   Relative to V4.3.179: top 299px -> 319px.
   Reserve another 20px of vertical clearance; keep Manual/Otomatis
   controls, horizontally centered title, SVG, wire and Dashboard unchanged.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid > .rscm-simulation-flow {
    min-height:530px;
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack > .rscm-simulation-controls {
    top:319px;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.181 — DASHBOARD WORKSTATION 15% SMALLER
   Standalone Simulasi Siderail desktop/laptop ONLY (>=1191px).
   Keep the user's V4.3.180 control-panel position, manual/auto JS, SVG,
   flow signal timing, monitor zoom, and keyboard/mouse centering untouched.

   Previous stage width = (100% - 72px) * .3167464529.
   New stage width      = (100% - 72px) * .269234484965 (85% of previous).
   The three equal horizontal gaps are recalculated after reclaiming space.
   Indicators stay centered on the longer connectors at a fixed y-axis.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow {
    --rscm-sim-equal-gap:calc(9.95723cqw + 16.8308px);
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-dashboard {
    flex:0 0 calc((100% - 72px) * .269234484965);
    width:calc((100% - 72px) * .269234484965);
    justify-content:flex-end;
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::before {
    left:calc(100% + 4.978615cqw + 4.4154px);
  }
}


/* ========================================================================
   RSCM IoMT V4.3.182 — CONTROL CARD 20PX LOWER + DASHBOARD WIDER
   Scope: Simulasi Siderail desktop/laptop >=1191px ONLY.
   - Keep the approved heading, control functionality and visual alignment.
   - Move the standalone Manual/Otomatis control card 20px down: 319 -> 339.
   - Give the fourth stage approximately 11.4% more width than V4.3.181,
     preserving the monitor aspect ratio and centered keyboard/mouse group.
   - Recompute equal gaps and connector indicators, keeping the right gutter
     and the straight horizontal signal line unchanged.
   - No JavaScript changes and no changes to mobile/tablet or other pages.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid > .rscm-simulation-flow {
    min-height:550px; /* V4.3.181: 530px + 20px clearance */
    --rscm-sim-equal-gap:calc(8.931711cqw + 17.569168px);
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack > .rscm-simulation-controls {
    top:339px; /* V4.3.181: 319px + 20px */
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-dashboard {
    flex:0 0 calc((100% - 72px) * .30);
    width:calc((100% - 72px) * .30);
    justify-content:flex-end;
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::before {
    left:calc(100% + 4.4658555cqw + 4.784584px);
  }
}

/* ========================================================================
   RSCM IoMT V4.3.183 — CONTROL CARD DOWN 20PX, NO SUMMARY
   Desktop/laptop only (>=1191px). After removing the redundant status
   summary from the card, lower the entire Manual/Otomatis control panel
   another 20px without disturbing the centered position or signal layout.
   The card is shorter, so the existing flow-height clearance is sufficient.
   Mobile/tablet styling, Manual/Otomatis behavior and signal logic unchanged.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack > .rscm-simulation-controls {
    top:359px; /* V4.3.182: 339px + 20px */
  }
}

/* ========================================================================
   RSCM IoMT V4.3.184 — THREE SOURCE STAGES LOWER, DASHBOARD FIXED
   Desktop/laptop >=1191px ONLY, relative to approved V4.3.183:
   1. Bed Pasien, Perangkat IoMT and Router: 20px LOWER.
   2. Manual/Otomatis control card: 30px LOWER TOTAL (20px inherited
      from Bed stack + 10px additional local top offset: 359 -> 369).
   3. Mini-Dashboard, monitor, keyboard and mouse: NO vertical movement.
   Preserve wiring stages, animation order, JS, centered controls,
   equal horizontal gaps and untouched tablet/mobile layout.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-bed,
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-iomt,
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-router {
    top:20px;
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack > .rscm-simulation-controls {
    top:369px;
  }
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid > .rscm-simulation-flow {
    min-height:580px;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.185 — CONTROL TOP-LEFT; THREE SOURCE STAGES +40PX
   Desktop/laptop only (>=1191px), relative to V4.3.184:
   - Move the Manual/Otomatis control card to the upper-left corner of the
     simulation area, ABOVE the Bed Pasien card; no overlay with rail model.
   - Bed Pasien, IoMT, Router: 40px LOWER (top:20px -> top:60px).
   - Dashboard workstation (monitor, stand, keyboard and mouse) remains in
     its V4.3.184 location; do not modify its transform or layout.
   - Keep stage elements as direct children of the flow, so nth-child wire
     animation sequence and controller logic retain the original behavior.
   - Tablet/phone inherits the V4.3.184 layout unchanged.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-bed,
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-iomt,
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-router {
    top:60px; /* V4.3.184: 20px + 40px */
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-bed-stack > .rscm-simulation-controls {
    top:-205px;
    left:0;
    right:auto;
    transform:none;
    width:100%;
    z-index:5;
  }
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid > .rscm-simulation-flow {
    position:relative;
    z-index:10; /* Higher than positioned hero-copy (z-index:4); mode buttons remain clickable. */
    min-height:490px;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.186 — CONTROL CARD DIRECTLY AFTER HERO DESCRIPTION
   Real DOM relocation (not absolute visual overlay). The controls now live
   inside the hero introduction, so they cannot cover the Bed SVG or wires.
   Retains 4 direct flow stage children for sequential animation. Restores
   the original standalone compact Manual/Otomatis styling in the new parent.
   V4.3.185 stage offsets +60px and Dashboard sizing remain unchanged.
   ======================================================================== */
body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid > .rscm-simulation-copy > .rscm-simulation-controls {
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  z-index:5;
  box-sizing:border-box;
  align-self:center;
  flex:0 1 auto;
  width:min(100%,320px);
  max-width:320px;
  margin:20px auto 0;
  padding:12px 10px 11px;
  border:1px solid #dfe9ed;
  border-radius:13px;
  background:#fff;
  box-shadow:0 4px 10px rgba(24,69,81,.045),0 11px 22px rgba(24,69,81,.06),inset 0 1px 0 #fff;
  text-align:left;
}
body.rscm-simulation-page .rscm-simulation-copy .rscm-simulation-controls-heading h2 {
  display:block;
  width:100%;
  color:#1c3e52;
  font-size:12px;
  font-weight:780;
  line-height:1.3;
  text-align:center;
}
body.rscm-simulation-page .rscm-simulation-copy .rscm-sim-mode-switch {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  margin-top:8px;
  padding:3px;
  border:1px solid #dce9e8;
  border-radius:9px;
  background:#f3f8f7;
}
body.rscm-simulation-page .rscm-simulation-copy .rscm-sim-mode-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:5px 6px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#526e7b;
  font-family:inherit;
  font-size:10.5px;
  font-weight:750;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
body.rscm-simulation-page .rscm-simulation-copy .rscm-sim-mode-button.is-active {
  background:linear-gradient(180deg,#47b3ab,#228d85);
  color:#fff;
  box-shadow:0 2px 5px rgba(29,111,103,.16),inset 0 1px 0 rgba(255,255,255,.17);
}
body.rscm-simulation-page .rscm-simulation-copy .rscm-sim-mode-button:focus-visible {
  outline:2px solid #0a817a;
  outline-offset:3px;
}
body.rscm-simulation-page .rscm-simulation-copy .rscm-sim-mode-button:disabled {
  opacity:.42;
  cursor:not-allowed;
}
body.rscm-simulation-page .rscm-simulation-copy .rscm-sim-mode-description {
  margin:8px 0 0;
  font-size:9px;
  color:#627f8c;
  line-height:1.5;
  text-align:left;
}
body.rscm-simulation-page .rscm-simulation-copy .rscm-simulation-control-grid {
  gap:6px;
  margin-top:9px;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control {
  min-height:40px;
  gap:5px;
  padding:6px;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control > i:first-child {
  flex:0 0 12px;
  width:12px;
  font-size:12px;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control strong {font-size:9px;}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control small {font-size:8px;}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control .rscm-control-action {font-size:9px;}
body.rscm-simulation-page .rscm-simulation-copy .rscm-simulation-controls[data-sim-mode="automatic"] button.rscm-simulation-control {
  cursor:not-allowed;
  opacity:.69;
}
@media (min-width:1191px) {
  /* The old 490px clearance reserved for absolute-positioned control card
     is no longer required: the card follows normal document flow above. */
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid > .rscm-simulation-flow {
    min-height:430px;
  }
}
@media (max-width:600px) {
  body.rscm-simulation-page .rscm-simulation-copy > .rscm-simulation-controls {
    width:min(100%,320px);
    max-width:320px;
    margin-top:17px;
  }
  body.rscm-simulation-page .rscm-simulation-copy .rscm-sim-mode-button {min-height:34px;}
}
@media (prefers-reduced-motion:reduce) {
  body.rscm-simulation-page .rscm-simulation-copy .rscm-sim-mode-button {transition:none;}
}


/* ========================================================================
   RSCM IoMT V4.3.188 — MANUAL ACTION LABELS + WHITE NEUMORPHIC BUTTONS
   & NEON RED SEQUENTIAL SIGNAL (SIMULATION PAGE ONLY)
   - Only two compact buttons; heading and redundant visible status removed.
   - Buka -> Tutup labels update through the original manual-only controller.
   - White raised neumorphism remains in BOTH siderail states.
   - Inactive connectors stay grey; the travelling signal lights neon red.
   - No changes to bed geometry, Dashboard layout, animation timing or audio.
   ======================================================================== */
body.rscm-simulation-page .rscm-simulation-copy > .rscm-simulation-controls {
  padding:10px;
}
body.rscm-simulation-page .rscm-simulation-copy .rscm-simulation-control-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:0;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control,
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control.is-open {
  min-height:43px;
  gap:7px;
  padding:8px 8px;
  border:1px solid #dee9ee;
  border-radius:10px;
  background:linear-gradient(145deg,#fff 8%,#f8fbfc 100%);
  color:#2a8982;
  box-shadow:-4px -4px 9px rgba(255,255,255,.96),
             4px 4px 10px rgba(38,79,99,.15),
             inset 0 1px 0 rgba(255,255,255,.95);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control:hover,
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control.is-open:hover {
  background:linear-gradient(145deg,#fff 8%,#f8fbfc 100%);
  border-color:#b8d3d5;
  box-shadow:-4px -4px 9px rgba(255,255,255,.96),
             5px 5px 12px rgba(38,79,99,.19),
             inset 0 1px 0 rgba(255,255,255,.95);
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control:active {
  transform:translateY(1px);
  box-shadow:inset 3px 3px 6px rgba(38,79,99,.12),
             inset -3px -3px 7px #fff;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control:focus-visible {
  outline:2px solid #188e87;
  outline-offset:3px;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control > i:first-child,
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control.is-open > i:first-child {
  flex:0 0 13px;
  width:13px;
  color:#298d86;
  font-size:12px;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control > span {
  display:block;
  flex:1;
  min-width:0;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control strong,
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control.is-open strong {
  display:block;
  color:#244757;
  font-size:10px;
  font-weight:775;
  line-height:1.25;
  text-align:center;
  letter-spacing:-.015em;
}
body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control small[data-sim-status] {
  display:none!important; /* Keep the JS data hook without redundant status text. */
}
@media (max-width:380px) {
  body.rscm-simulation-page .rscm-simulation-copy .rscm-simulation-control-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control {
    padding:7px 6px;
    gap:4px;
  }
  body.rscm-simulation-page .rscm-simulation-copy button.rscm-simulation-control strong {
    font-size:9.2px;
  }
}

/* Inactive wires remain grey. Only the progressive fill turns neon red. */
body.rscm-simulation-page .rscm-simulation-flow {
  --rscm-signal-active:#ff1744;
  --rscm-signal-neon:#ff2850;
}
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::after {
  background-image:
    linear-gradient(90deg,#ff8899 0%,#ff3554 37%,#ff0035 100%),
    linear-gradient(var(--rscm-signal-grey),var(--rscm-signal-grey));
}
@media (max-width:1190px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::after {
    background-image:
      linear-gradient(180deg,#ff8899 0%,#ff3554 37%,#ff0035 100%),
      linear-gradient(var(--rscm-signal-grey),var(--rscm-signal-grey));
  }
}
body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step::after {
  filter:drop-shadow(0 0 3px rgba(255,12,54,.55));
}
@media (min-width:1191px) {
  @keyframes rscm-sim-signal-node-v188-red {
    0%,12% {border-color:#b9cbd0;background:#fff;box-shadow:none;}
    35%,100% {
      border-color:#ff2350;
      background:#ff405f;
      box-shadow:0 0 0 4px rgba(255,20,65,.16),
                 0 0 12px rgba(255,0,49,.85),
                 0 0 20px rgba(255,45,86,.38);
    }
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step::before {
    animation-name:rscm-sim-signal-node-v188-red;
  }
}


@media (prefers-reduced-motion:reduce) {
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step::after {
    filter:none;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.189 — GREY IDLE WIRES / SEGMENT-ONLY NEON PROPAGATION
   A V4.3.188 glow rule colored ALL three grey wires as soon as transmission
   started, including the wires whose delayed pulses had not yet arrived.
   Idle lines have a single, opaque grey background and NO red gradient.
   During transmission, the red pulse and its glow have the SAME staggered
   timing for each individual connector. After transmission: grey again.
   Scoped exclusively to the public siderail simulation; no JS changes.
   ======================================================================== */
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::after {
  background-color:var(--rscm-signal-grey,#c0ced3);
  background-image:none;
  filter:none;
}
@keyframes rscm-sim-wire-neon-only-when-travelling-v189 {
  0%,3% {filter:none;}
  16%,92% {filter:drop-shadow(0 0 2.5px rgba(255,0,55,.8));}
  100% {filter:none;}
}
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step::after {
    background-image:
      linear-gradient(90deg,#ff8899 0%,#ff3554 37%,#ff0035 100%),
      linear-gradient(var(--rscm-signal-grey),var(--rscm-signal-grey));
    background-position:left center,left center;
    background-repeat:no-repeat,no-repeat;
    background-size:0% 100%,100% 100%;
    filter:none;
    animation:
      rscm-sim-wire-travel-v172 560ms cubic-bezier(.24,.66,.2,1) both,
      rscm-sim-wire-neon-only-when-travelling-v189 560ms linear both;
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(1)::after {
    animation-delay:0ms,0ms;
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(2)::after {
    animation-delay:610ms,610ms;
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(3)::after {
    animation-delay:1220ms,1220ms;
  }
}
@media (max-width:1190px) {
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step::after {
    background-image:
      linear-gradient(180deg,#ff8899 0%,#ff3554 37%,#ff0035 100%),
      linear-gradient(var(--rscm-signal-grey),var(--rscm-signal-grey));
    background-position:center top,center top;
    background-repeat:no-repeat,no-repeat;
    background-size:100% 0%,100% 100%;
    filter:none;
    animation:
      rscm-sim-wire-vertical-v172 560ms cubic-bezier(.24,.66,.2,1) both,
      rscm-sim-wire-neon-only-when-travelling-v189 560ms linear both;
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(1)::after {
    animation-delay:0ms,0ms;
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(2)::after {
    animation-delay:610ms,610ms;
  }
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step:nth-child(3)::after {
    animation-delay:1220ms,1220ms;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running > .rscm-sim-flow-step::after {
    animation:none!important;
    background-image:none;
    filter:none;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.190 — CLEAN SIGNAL WIRES / NO EXTERIOR MONITOR NEON
   - Remove all three midpoint circles on connector lines, idle and active.
   - Keep the existing grey idle wire and travelling-only neon red pulse.
   - The monitor bezel uses its existing dark 3D shadow unchanged when the
     signal arrives: both obsolete exterior halo overrides were removed.
   - Scoped to Simulasi Siderail, no changes to signal logic / Firebase.
   ======================================================================== */
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-step::before {
  content:none !important;
  display:none !important;
  animation:none !important;
}


/* ========================================================================
   RSCM IoMT V4.3.191 — CLEAN IOMT + ROUTER EXTERIOR (NO NEON HALO)
   The obsolete teal and red signal-at-device box-shadow overrides have been
   removed. IoMT and Router keep their ORIGINAL resting 3D shadows even while
   a signal arrives; the IoMT's small internal green LED is preserved.
   Only the three connector wires illuminate red while their pulse travels.
   All stages, buttons, dashboard, mobile layout, and JS are unchanged.
   ======================================================================== */


/* ========================================================================
   RSCM IoMT V4.3.192 — ACTION-AWARE SEQUENTIAL SIGNAL COLOR
   BUKA siderail: preserve existing moving neon red.
   TUTUP siderail: moving fluorescent highlighter green (lime/chartreuse).
   Idle lines remain solid grey; do not reintroduce outside card/monitor
   glow, midpoint circles, device halos or changes to line choreography.
   ======================================================================== */
@keyframes rscm-sim-wire-lime-only-when-travelling-v192 {
  0%,3% {filter:none;}
  16%,92% {filter:drop-shadow(0 0 3px rgba(156,255,0,.90));}
  100% {filter:none;}
}
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running[data-signal-action="close"] > .rscm-sim-flow-step::after {
    background-image:
      linear-gradient(90deg,#e6ff8e 0%,#b6ff20 37%,#82ff00 100%),
      linear-gradient(var(--rscm-signal-grey),var(--rscm-signal-grey));
    animation-name:rscm-sim-wire-travel-v172,rscm-sim-wire-lime-only-when-travelling-v192;
  }
}
@media (max-width:1190px) {
  body.rscm-simulation-page .rscm-simulation-flow.is-signal-running[data-signal-action="close"] > .rscm-sim-flow-step::after {
    background-image:
      linear-gradient(180deg,#e6ff8e 0%,#b6ff20 37%,#82ff00 100%),
      linear-gradient(var(--rscm-signal-grey),var(--rscm-signal-grey));
    animation-name:rscm-sim-wire-vertical-v172,rscm-sim-wire-lime-only-when-travelling-v192;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.193 — CLEAN WHITE NEUMORPHISM, IOMT + ROUTER ONLY
   Two stage cards and their embedded pictograms use white raised surfaces,
   with restrained shadows and legible muted-teal icon strokes. Preserve the
   small IoMT LED, stage sizes, three neutral/dual-color signal connectors,
   workstation and all manual simulation behaviour. Bed status chips have
   been removed from the HTML; the manual Buka/Tutup buttons own state cues.
   ======================================================================== */
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-iomt,
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-router {
  border:1px solid #e6edf1;
  background:linear-gradient(145deg,#ffffff 5%,#f8fbfd 100%);
  box-shadow:-5px -5px 12px rgba(255,255,255,.98),
             7px 7px 17px rgba(48,82,102,.14),
             inset 0 1px 0 #ffffff;
}
body.rscm-simulation-page .rscm-sim-device-model {
  border:1px solid #e3ebef;
  background:linear-gradient(145deg,#ffffff 8%,#f1f6f8 100%);
  color:#375b68;
  box-shadow:-5px -5px 10px rgba(255,255,255,.98),
             5px 6px 13px rgba(48,83,101,.18),
             inset 1px 1px 1px rgba(255,255,255,.95);
}
body.rscm-simulation-page .rscm-sim-device-chip {
  color:#418b90;
  text-shadow:1px 1px 0 #ffffff;
}
body.rscm-simulation-page .rscm-sim-device-sensors > b {
  border-color:#aebfc6;
  background:#e5eef1;
  box-shadow:inset 1px 1px 2px rgba(55,90,104,.14),1px 1px 0 #ffffff;
}
body.rscm-simulation-page .rscm-sim-device-name {
  color:#3c6070;
  font-weight:750;
}
body.rscm-simulation-page .rscm-sim-router-icon {
  border:1px solid #e4ecf1;
  color:#418b90;
  background:linear-gradient(145deg,#ffffff 8%,#f1f6f8 100%);
  box-shadow:-6px -6px 13px rgba(255,255,255,.99),
             6px 7px 15px rgba(48,83,101,.15),
             inset 1px 1px 1px rgba(255,255,255,.95);
}
body.rscm-simulation-page .rscm-sim-router-icon i {
  text-shadow:1px 1px 0 #ffffff;
}


/* ========================================================================
   RSCM IoMT V4.3.194 — OPEN STAGES WITHOUT OUTER CARDS
   Hide ONLY the three stage wrapper-card surfaces (Bed Pasien, Perangkat
   IoMT, Router) while preserving their DOM boxes for connector geometry.
   Keep the individual IoMT/Router white neumorphic icons, original bed SVG,
   LED, labels, dashboard, manual controls and red/green signal timing intact.
   A transparent 1px border preserves the previous connector endpoints.
   ======================================================================== */
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-bed > .rscm-sim-bed-panel,
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-iomt,
body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-router {
  border-color:transparent;
  background:none;
  box-shadow:none;
}

/* ========================================================================
   RSCM IoMT V4.3.195 — BIGGER BED + CONNECTED SIGNAL PATH
   - The original SVG shapes, viewBox, rail groups and their motion are kept.
   - Enlarges the SVG artwork only, no enlargement of whole stage wrapper.
   - The three connector paths join behind device icon surfaces, never leave
     exposed whitespace between Bed -> IoMT -> Router -> monitor on desktop.
   - Each existing connector still owns its red(open)/lime(close) delayed
     560ms pulse. Idle line remains solid grey; no circles or outer glow.
   - The IoMT/Router explanatory captions were removed from HTML.
   - No changes to JS, authenticated dashboards, firmware or backend.
   ======================================================================== */
body.rscm-simulation-page .rscm-sim-bed-art {
  max-width:320px;
}
body.rscm-simulation-page .rscm-sim-bed-art .bed-illustration {
  width:calc(100% + 28px);
  max-width:300px;
}
/* The pulse line must stay BEHIND the artwork and the raised white icons. */
body.rscm-simulation-page .rscm-sim-bed-art,
body.rscm-simulation-page .rscm-sim-device-model,
body.rscm-simulation-page .rscm-sim-router-icon {
  position:relative;
  z-index:2;
}
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow {
    /* V194 uses two padded stages: each contributes 22px outside flex-basis.
       Therefore three visible gaps are 44/3px shorter than --equal-gap. */
    --rscm-sim-actual-gap:calc(var(--rscm-sim-equal-gap) - 14.666667px);
  }
  /* Bed line begins just under the far edge of enlarged bed illustration and
     runs to the CENTER of IoMT; IoMT surface covers the hidden midpoint. */
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-bed::after {
    /* The SVG stays centered; its right edge is half-stage + half-SVG.
       SVG width is min(300px, stage width + 6px). */
    left:calc(50% + min(150px, 50% + 3px));
    /* Join the next segment 2px INSIDE the IoMT, never leave a hairline gap. */
    width:calc(50% - min(150px, 50% + 3px) + var(--rscm-sim-actual-gap) + 13px + (100cqw - 72px) * .053752535);
  }
  /* Under-device joins: center IoMT -> center Router -> monitor LEFT bezel. */
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-iomt::after {
    left:50%;
    width:calc(100% + var(--rscm-sim-actual-gap) + 4px);
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-router::after {
    left:50%;
    width:calc(50% + var(--rscm-sim-actual-gap) + 4px);
  }
}


/* ========================================================================
   RSCM IoMT V4.3.196 — LABELS ALIGNED + BED CONNECTOR TOUCHES SVG
   - Align the IoMT and Router titles horizontally with “Bed Pasien”.
   - Keep the stage wrappers invisible, only normalize title spacing.
   - Pull the first connector 18px closer so the grey/neon line visually
     touches the bed illustration instead of leaving a visible gap.
   - Preserve button behaviour, red(open)/green(close) pulse timing,
     dashboard reaction, mobile stacking and all other page modules.
   ======================================================================== */
body.rscm-simulation-page .rscm-sim-flow-step h3 {
  margin:0 0 12px;
  width:100%;
  text-align:center;
}
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-iomt h3,
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-router h3 {
    margin-top:-14px;
    margin-bottom:26px;
  }
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-bed::after {
    left:calc(50% + min(150px, 50% + 3px) - 18px);
    width:calc(50% - min(150px, 50% + 3px) + var(--rscm-sim-actual-gap) + 31px + (100cqw - 72px) * .053752535);
  }
}


/* ======================================================================
   RSCM IoMT V4.3.197 — ROUTER WiFi + BED VISUAL 15% LARGER
   Scope: ONLY the SVG bed illustration. The original SVG geometry,
   rail groups, manual simulation, color pulses and dashboard stay intact.
   Its connector tracks the larger SVG edge and keeps an 18px overlap.
   ====================================================================== */
body.rscm-simulation-page .rscm-sim-bed-art .bed-illustration {
  width: calc(115% + 32.2px);
  max-width: 345px;
}
@media (max-width:1190px) {
  body.rscm-simulation-page .rscm-sim-bed-art .bed-illustration {
    width: min(calc(115% + 32.2px), calc(100vw - 32px));
  }
}
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-flow > .rscm-sim-flow-bed::after {
    left: calc(50% + min(172.5px, 57.5% + 3.45px) - 18px);
    width: calc(50% - min(172.5px, 57.5% + 3.45px) + var(--rscm-sim-actual-gap) + 31px + (100cqw - 72px) * .053752535);
  }
}


/* ========================================================================
   RSCM IoMT V4.3.205 — SIMULATION FOOTER WHITE BRAND + SPACIOUS AIR GAP
   Simulasi Siderail ONLY. Original logo image files remain unchanged.
   - Enlarge the clean white area between workstation keyboard and footer.
   - Remove two white logo tiles inside the footer brandline, not the footer
     section itself.
   - Turn logos / their embedded text white without painting the source
     images' white pixel backgrounds white: inverse-luminance + screen blend.
   - Keep all header, bed/patient SVG, rail controls, signal and JS intact.
   ======================================================================== */
@media (min-width:1191px) {
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid {
    padding-bottom:165px;
  }
}
@media (min-width:601px) and (max-width:1190px) {
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid {
    padding-bottom:95px;
  }
}
@media (max-width:600px) {
  body.rscm-simulation-page .rscm-simulation-hero > .container.hero-grid {
    padding-bottom:65px;
  }
}
/* Only the two white logo backing tiles disappear; the teal footer panel
   and other footer sections retain their approved appearance. */
body.rscm-simulation-page .rscm-home-footer-brandline .rscm-home-footer-logo-frame,
body.rscm-simulation-page .rscm-home-footer-brandline .rscm-home-footer-institution {
  background:transparent;
  border:0;
  box-shadow:none;
}
body.rscm-simulation-page .rscm-home-footer-brandline .rscm-home-footer-institution {
  padding:0;
}
/* The original image assets have baked-in near-white backgrounds. Grayscale
   inverse maps those pixels to black; screen blending hides black over teal,
   while brightening the graphic and original embedded lettering to white. */
body.rscm-simulation-page .rscm-home-footer-brandline .rscm-home-footer-logo-frame img,
body.rscm-simulation-page .rscm-home-footer-brandline .rscm-home-footer-institution > img {
  filter:grayscale(1) invert(1) brightness(5) contrast(2);
  mix-blend-mode:screen;
}
body.rscm-simulation-page .rscm-home-footer-brandline .rscm-home-footer-brand-text strong,
body.rscm-simulation-page .rscm-home-footer-brandline .rscm-home-footer-brand-text small,
body.rscm-simulation-page .rscm-home-footer-brandline .rscm-home-footer-program-label {
  color:#fff;
}


/* ========================================================================
   RSCM IoMT V4.3.206 — FOOTER BRAND TEXT 8PX LEFT
   Scoped to the simulation page; move only the RSCM IoMT name/subtitle.
   Preserve logo, institution mark, footer sizing, and existing page logic.
   ======================================================================== */
body.rscm-simulation-page .rscm-home-footer-brand-primary > .rscm-home-footer-brand-text {
  transform:translateX(-8px);
}


/* ========================================================================
   RSCM IoMT V4.3.207 — AKSES PETUGAS: EMPAT LANGKAH RINGKAS
   Tidak menggunakan eyebrow, panel persyaratan, atau catatan berlapis.
   Footer, header, CSS halaman lain, RBAC, dan login tidak berubah.
   ======================================================================== */
body.rscm-access-page .rscm-access-simple-main {
  padding:clamp(135px, 13vw, 185px) 0 115px;
  background:#fff;
}
body.rscm-access-page .rscm-access-simple {
  width:min(1320px,calc(100% - 64px));
  margin-inline:auto;
}
body.rscm-access-page .rscm-access-simple-heading {
  max-width:740px;
  margin:0 auto;
  text-align:center;
}
body.rscm-access-page .rscm-access-simple-heading h1 {
  margin:0;
  color:#17384c;
  font-size:clamp(31px, 3vw, 41px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.035em;
}
body.rscm-access-page .rscm-access-simple-heading h1 em {
  color:#348f88;
  font-style:normal;
}
body.rscm-access-page .rscm-access-simple-heading p {
  margin:14px auto 0;
  max-width:650px;
  color:#607989;
  font-size:14px;
  line-height:1.65;
}
body.rscm-access-page .rscm-access-step-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  margin:45px 0 0;
  padding:0;
  list-style:none;
}
body.rscm-access-page .rscm-access-step-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  min-height:215px;
  padding:26px 22px 25px;
  border:1px solid #e2ecee;
  border-radius:18px;
  background:#fff;
  box-shadow:0 5px 14px rgba(25,66,81,.045),0 17px 32px rgba(25,66,81,.065),inset 0 1px 0 #fff;
}
body.rscm-access-page .rscm-access-step-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
body.rscm-access-page .rscm-access-step-icon {
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  border:1px solid #dceae8;
  border-radius:13px;
  color:#368f87;
  background:#f2faf8;
  font-size:20px;
}
body.rscm-access-page .rscm-access-step-number {
  color:#b0c3c9;
  font-size:21px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.035em;
}
body.rscm-access-page .rscm-access-step-card h2 {
  margin:23px 0 8px;
  color:#1a3c50;
  font-size:16px;
  font-weight:780;
  line-height:1.35;
}
body.rscm-access-page .rscm-access-step-card p {
  margin:0;
  color:#657d8a;
  font-size:12.5px;
  line-height:1.65;
}
@media (max-width:1020px) {
  body.rscm-access-page .rscm-access-step-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  body.rscm-access-page .rscm-access-step-card {min-height:192px;}
}
@media (max-width:600px) {
  body.rscm-access-page .rscm-access-simple-main {padding:120px 0 70px;}
  body.rscm-access-page .rscm-access-simple {width:calc(100% - 36px);}
  body.rscm-access-page .rscm-access-simple-heading h1 {font-size:clamp(29px,7vw,34px);}
  body.rscm-access-page .rscm-access-simple-heading p {margin-top:11px;font-size:12.5px;}
  body.rscm-access-page .rscm-access-step-grid {grid-template-columns:1fr;gap:12px;margin-top:28px;}
  body.rscm-access-page .rscm-access-step-card {min-height:0;padding:19px 21px 20px;border-radius:15px;}
  body.rscm-access-page .rscm-access-step-icon {width:40px;height:40px;border-radius:11px;font-size:18px;}
  body.rscm-access-page .rscm-access-step-card h2 {margin-top:13px;font-size:15px;}
  body.rscm-access-page .rscm-access-step-card p {font-size:12px;}
}


/* ========================================================================
   RSCM IoMT V4.3.208 — CONNECTED ACCESS STEPS + WHITE FOOTER IDENTITIES
   - Four linked step cards; no duplicate action button under the process.
   - On desktop the links are horizontal; on smaller screens the complete
     process becomes a vertically connected sequence without gaps.
   - Apply the SAME no-tile, pure-white logo/brand treatment as the approved
     V4.3.205 / V4.3.206 simulation footer, ONLY on Akses Petugas.
   - Index, Login, Simulasi Siderail and shared JS remain untouched.
   ======================================================================== */
body.rscm-access-page .rscm-access-step-grid {
  --rscm-access-link-length:32px;
  column-gap:var(--rscm-access-link-length);
}
body.rscm-access-page .rscm-access-step-card {
  position:relative;
  z-index:1;
}
body.rscm-access-page .rscm-access-step-card:not(:last-child)::after {
  content:"";
  position:absolute;
  pointer-events:none;
  top:50%;
  left:100%;
  width:var(--rscm-access-link-length);
  height:2px;
  background:linear-gradient(90deg,#c6d5d9 0%,#69b6ae 100%);
}
@media (max-width:1020px) {
  /* Keep all four connectors in reading order instead of a broken 2x2 path. */
  body.rscm-access-page .rscm-access-step-grid {
    width:min(100%,600px);
    margin-inline:auto;
    grid-template-columns:minmax(0,1fr);
    gap:25px;
  }
  body.rscm-access-page .rscm-access-step-card {
    min-height:0;
  }
  body.rscm-access-page .rscm-access-step-card:not(:last-child)::after {
    top:100%;
    left:calc(50% - 1px);
    width:2px;
    height:25px;
    background:linear-gradient(180deg,#c6d5d9 0%,#69b6ae 100%);
  }
}
@media (max-width:600px) {
  body.rscm-access-page .rscm-access-step-grid {
    gap:22px;
  }
  body.rscm-access-page .rscm-access-step-card:not(:last-child)::after {
    height:22px;
  }
}
/* Match the simulation footer's white no-card logo treatment exactly. */
body.rscm-access-page .rscm-home-footer-brandline .rscm-home-footer-logo-frame,
body.rscm-access-page .rscm-home-footer-brandline .rscm-home-footer-institution {
  background:transparent;
  border:0;
  box-shadow:none;
}
body.rscm-access-page .rscm-home-footer-brandline .rscm-home-footer-institution {
  padding:0;
}
body.rscm-access-page .rscm-home-footer-brandline .rscm-home-footer-logo-frame img,
body.rscm-access-page .rscm-home-footer-brandline .rscm-home-footer-institution > img {
  filter:grayscale(1) invert(1) brightness(5) contrast(2);
  mix-blend-mode:screen;
}
body.rscm-access-page .rscm-home-footer-brandline .rscm-home-footer-brand-text strong,
body.rscm-access-page .rscm-home-footer-brandline .rscm-home-footer-brand-text small,
body.rscm-access-page .rscm-home-footer-brandline .rscm-home-footer-program-label {
  color:#fff;
}
body.rscm-access-page .rscm-home-footer-brand-primary > .rscm-home-footer-brand-text {
  transform:translateX(-8px);
}


/* ======================================================================
   RSCM IoMT V4.3.209 — SIMPLE TENTANG IOMT, PHOTO RIGHT
   Scope only about page. Shared style, Access Petugas, Login, Simulation,
   firmware, backend, authentication and shared navbar/footer unchanged.
   ====================================================================== */
body.rscm-about-page .rscm-about-simple-main {
  display:flex;
  align-items:center;
  width:100%;
  min-height:590px;
  padding:104px 0 124px;
  background:#fff;
}
body.rscm-about-page .rscm-about-simple-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(38px,6vw,104px);
  width:min(1320px,calc(100% - 64px));
  margin-inline:auto;
}
body.rscm-about-page .rscm-about-simple-copy {
  max-width:590px;
  min-width:0;
}
body.rscm-about-page .rscm-about-simple-copy h1 {
  max-width:none;
  margin:0 0 23px;
  font-size:clamp(34px,3.55vw,49px);
  line-height:1.18;
  font-weight:700;
  letter-spacing:-.043em;
  color:#1b3a4f;
}
body.rscm-about-page .rscm-about-simple-copy h1 em {
  color:#288f88;
  font-style:normal;
}
body.rscm-about-page .rscm-about-simple-copy p {
  max-width:570px;
  margin:0;
  color:#587485;
  font-size:15px;
  line-height:1.75;
}
body.rscm-about-page .rscm-about-simple-copy p + p {margin-top:17px;}
body.rscm-about-page .rscm-about-device-visual {
  width:100%;
  min-width:0;
  margin:0;
}
body.rscm-about-page .rscm-about-device-visual img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:775/602;
  object-fit:cover;
  border-radius:19px;
  box-shadow:0 7px 20px rgba(32,74,92,.07),0 22px 45px rgba(32,74,92,.09);
}
body.rscm-about-page .rscm-about-device-visual figcaption {
  margin-top:12px;
  color:#8497a2;
  font-size:10.5px;
  text-align:center;
  line-height:1.5;
}
@media (max-width:900px) {
  body.rscm-about-page .rscm-about-simple-main {
    min-height:0;
    padding:115px 0 86px;
  }
  body.rscm-about-page .rscm-about-simple-hero {
    grid-template-columns:minmax(0,1fr);
    row-gap:34px;
  }
  body.rscm-about-page .rscm-about-simple-copy {max-width:720px;}
  body.rscm-about-page .rscm-about-device-visual {max-width:720px;}
}
@media (max-width:600px) {
  body.rscm-about-page .rscm-about-simple-main {padding:109px 0 68px;}
  body.rscm-about-page .rscm-about-simple-hero {row-gap:26px;width:calc(100% - 36px);}
  body.rscm-about-page .rscm-about-simple-copy h1 {
    margin-bottom:18px;
    font-size:clamp(30px,7vw,35px);
  }
  body.rscm-about-page .rscm-about-simple-copy p {
    font-size:13px;
    line-height:1.72;
  }
  body.rscm-about-page .rscm-about-simple-copy p + p {margin-top:13px;}
  body.rscm-about-page .rscm-about-device-visual img {border-radius:14px;}
}
/* Consistent plain-white logos and text, identical to approved V4.3.208 footer. */
body.rscm-about-page .rscm-home-footer-brandline .rscm-home-footer-logo-frame,
body.rscm-about-page .rscm-home-footer-brandline .rscm-home-footer-institution {
  background:transparent;
  border:0;
  box-shadow:none;
}
body.rscm-about-page .rscm-home-footer-brandline .rscm-home-footer-institution {padding:0;}
body.rscm-about-page .rscm-home-footer-brandline .rscm-home-footer-logo-frame img,
body.rscm-about-page .rscm-home-footer-brandline .rscm-home-footer-institution > img {
  filter:grayscale(1) invert(1) brightness(5) contrast(2);
  mix-blend-mode:screen;
}
body.rscm-about-page .rscm-home-footer-brandline .rscm-home-footer-brand-text strong,
body.rscm-about-page .rscm-home-footer-brandline .rscm-home-footer-brand-text small,
body.rscm-about-page .rscm-home-footer-brandline .rscm-home-footer-program-label {color:#fff;}
body.rscm-about-page .rscm-home-footer-brand-primary > .rscm-home-footer-brand-text {transform:translateX(-8px);}

/* ========================================================================
   RSCM IoMT V4.3.210 — REAL DEVICE ILLUSTRATION + SMOOTH LEFT-TO-RIGHT FADE
   Scope: tentang-iomt.html ONLY. The reference PNG already exists at
   assets/iomt/Hospital Bed IoMT.png in the user's local project.
   White fade connects the left edge of the image with the surrounding page,
   while the subtle directional shadow adds depth without a hard card border.
   No changes to other page layouts, header/footer, or any simulation logic.
   ======================================================================== */
body.rscm-about-page .rscm-about-device-media {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1446/1087;
  isolation:isolate;
  overflow:hidden;
  border-radius:19px;
  background:#fff;
  box-shadow:13px 19px 34px -20px rgba(26,64,79,.22),
             0 7px 19px -14px rgba(26,64,79,.14);
}
body.rscm-about-page .rscm-about-device-media > img {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center center;
  border-radius:0;
  box-shadow:none;
}
/* Blend only the left edge, so the IoMT hardware and logos remain clear. */
body.rscm-about-page .rscm-about-device-media::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    #fff 0%,
    rgba(255,255,255,.92) 3%,
    rgba(255,255,255,.63) 8%,
    rgba(255,255,255,.22) 16%,
    rgba(255,255,255,0) 25%);
}
@media (max-width:900px) {
  /* No strong edge fade when the photo stacks below the copy. */
  body.rscm-about-page .rscm-about-device-media::after {
    background:linear-gradient(90deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.14) 7%,
      rgba(255,255,255,0) 17%);
  }
}
@media (max-width:600px) {
  body.rscm-about-page .rscm-about-device-media {
    border-radius:14px;
    box-shadow:8px 14px 27px -19px rgba(26,64,79,.25);
  }
}


/* ========================================================================
   RSCM IoMT V4.3.211 — TENTANG IOMT, SPLIT HERO / FULL-BLEED RIGHT PHOTO
   The image reaches the RIGHT EDGE of the viewport, not a rounded card.
   Text stays in the left column; a clean white left-to-right dissolve
   connects the two columns. Scope strictly to Tentang IoMT.
   No auth, navigation, animation, other-page or footer style changes.
   ======================================================================== */
@media (min-width:901px) {
  body.rscm-about-page .rscm-about-simple-main {
    display:block;
    width:100%;
    min-height:0;
    padding:74px 0 0;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-simple-hero {
    display:grid;
    grid-template-columns:minmax(0,44%) minmax(0,56%);
    align-items:stretch;
    gap:0;
    width:100%;
    max-width:none;
    min-height:clamp(590px,49vw,730px);
    margin:0;
    padding:0;
  }
  body.rscm-about-page .rscm-about-simple-copy {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    box-sizing:border-box;
    width:100%;
    max-width:none;
    min-width:0;
    padding:45px clamp(22px,2.4vw,52px) 45px clamp(35px,7.3vw,140px);
  }
  body.rscm-about-page .rscm-about-simple-copy p {max-width:550px;}
  body.rscm-about-page .rscm-about-device-visual {
    position:relative;
    display:block;
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-height:clamp(590px,49vw,730px);
    max-width:none;
    margin:0;
    overflow:hidden;
  }
  body.rscm-about-page .rscm-about-device-media {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#fff;
    box-shadow:none;
  }
  body.rscm-about-page .rscm-about-device-media > img {
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:52% center;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  body.rscm-about-page .rscm-about-device-media::after {
    inset:0;
    background:linear-gradient(90deg,
      #fff 0%,
      rgba(255,255,255,.96) 3%,
      rgba(255,255,255,.72) 9%,
      rgba(255,255,255,.32) 18%,
      rgba(255,255,255,0) 30%);
  }
}
/* On narrower screens: copy above an edge-to-edge photo, no image card. */
@media (max-width:900px) {
  body.rscm-about-page .rscm-about-simple-main {
    display:block;
    width:100%;
    padding:112px 0 0;
  }
  body.rscm-about-page .rscm-about-simple-hero {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:0;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
  }
  body.rscm-about-page .rscm-about-simple-copy {
    box-sizing:border-box;
    width:100%;
    max-width:760px;
    padding:30px 30px 36px;
    margin:0 auto;
  }
  body.rscm-about-page .rscm-about-device-visual {
    width:100%;
    max-width:none;
    height:clamp(360px,59vw,575px);
    min-height:0;
    margin:0;
    overflow:hidden;
  }
  body.rscm-about-page .rscm-about-device-media {
    width:100%;
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    box-shadow:none;
  }
  body.rscm-about-page .rscm-about-device-media > img {
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center;
    border-radius:0;
  }
  body.rscm-about-page .rscm-about-device-media::after {
    background:linear-gradient(180deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.50) 7%,
      rgba(255,255,255,0) 22%);
  }
}
@media (max-width:600px) {
  body.rscm-about-page .rscm-about-simple-main {padding:105px 0 0;}
  body.rscm-about-page .rscm-about-simple-copy {padding:16px 20px 28px;}
  body.rscm-about-page .rscm-about-device-visual {height:clamp(350px,88vw,490px);}
}


/* ========================================================================
   RSCM IoMT V4.3.237 — BACKGROUND ROOM-LANSCAPE, KABUT NATURAL
   Scope: hanya akses-petugas.html. Footer, header, login, dan halaman lain
   tidak berubah. Background memakai aset foto landscape ruang perawatan pasien dengan
   kabut putih halus. Empat langkah, footer, header tetap seperti V4.3.236.
   ======================================================================== */
body.rscm-access-page .rscm-access-simple-main {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#f7fafb;
}
body.rscm-access-page .rscm-access-simple-main::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:#fff;
  background-image:url("../../assets/iomt/room-lanscape.png");
  background-repeat:no-repeat;
  /* Cover the full public section with the landscape image, no repetition.
     The IoMT-equipped patient bed stays on the right as in the source photo. */
  background-size:cover;
  background-position:center center;
  opacity:.94;
  filter:saturate(.97) brightness(1.015);
}
body.rscm-access-page .rscm-access-simple-main::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* Single strong LEFT-to-RIGHT fog + a gentle top/bottom white dissolve.
     The right portion remains visibly photographic, unlike V4.3.235. */
  background:
    linear-gradient(90deg,
      #fff 0%,
      rgba(255,255,255,.98) 19%,
      rgba(255,255,255,.84) 39%,
      rgba(255,255,255,.49) 59%,
      rgba(255,255,255,.18) 80%,
      rgba(255,255,255,.05) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.09) 19%,
      rgba(255,255,255,.03) 59%,
      rgba(255,255,255,.34) 83%,
      rgba(255,255,255,.90) 100%);
  -webkit-backdrop-filter:blur(1px);
  backdrop-filter:blur(1px);
}
body.rscm-access-page .rscm-access-simple-main > * {
  position:relative;
  z-index:2; /* Above both the photograph (0) and its fog (1). */
}
body.rscm-access-page .rscm-access-simple-heading {
  padding:28px 30px 24px;
  border:1px solid rgba(225,236,239,.82);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.70) 100%);
  box-shadow:0 16px 34px rgba(30,68,84,.08), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
}
body.rscm-access-page .rscm-access-step-grid {
  gap:18px;
}
body.rscm-access-page .rscm-access-step-card {
  border:1px solid rgba(220,234,236,.90);
  background:linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.76) 100%);
  box-shadow:0 10px 24px rgba(25,66,81,.055), 0 24px 44px rgba(25,66,81,.075), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(11px);
}
body.rscm-access-page .rscm-access-step-card:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(25,66,81,.07), 0 28px 46px rgba(25,66,81,.09), inset 0 1px 0 rgba(255,255,255,.96);
}
@media (max-width:1020px) {
  body.rscm-access-page .rscm-access-simple-main::before {
    background-size:cover;
    background-position:58% center;
    opacity:.84;
  }
  body.rscm-access-page .rscm-access-simple-heading {
    padding:24px 24px 22px;
  }
}
@media (max-width:600px) {
  body.rscm-access-page .rscm-access-simple-main::before {
    background-size:cover;
    background-position:73% center;
    opacity:.77;
  }
  body.rscm-access-page .rscm-access-simple-main::after {
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.78) 0%,
        rgba(255,255,255,.40) 32%,
        rgba(255,255,255,.30) 60%,
        rgba(255,255,255,.92) 100%),
      linear-gradient(90deg,
        rgba(255,255,255,.82) 0%,
        rgba(255,255,255,.36) 60%,
        rgba(255,255,255,.18) 100%);
  }
  body.rscm-access-page .rscm-access-simple-heading {
    padding:20px 18px 19px;
    border-radius:22px;
  }
  body.rscm-access-page .rscm-access-step-card {
    backdrop-filter:blur(8px);
  }
}


/* ========================================================================
   RSCM IoMT V4.3.238 — RUANG DI ATAS FOOTER AKSES PETUGAS
   Tambahkan ruang setelah empat kartu supaya footer tidak terlalu dekat.
   Only padding-bottom in Akses Petugas main section changes: background
   room-lanscape, fog, content, navigation and footer themselves stay intact.
   ======================================================================== */
@media (min-width:1021px) {
  body.rscm-access-page main.rscm-access-simple-main {
    padding-bottom:205px; /* previous 115px: footer moves down by 90px */
  }
}
@media (min-width:601px) and (max-width:1020px) {
  body.rscm-access-page main.rscm-access-simple-main {
    padding-bottom:165px; /* previous 115px: +50px */
  }
}
@media (max-width:600px) {
  body.rscm-access-page main.rscm-access-simple-main {
    padding-bottom:110px; /* previous 70px: +40px */
  }
}



/* ========================================================================
   RSCM IoMT V4.3.245 — ICON LIME / TEKS PUTIH DAN FAVICON ASLI DI HTML
   Correction to V4.3.241: icon center must use the actual second CSS Grid
   track (same track as title and description), not half of the entire card.
   No absolute offsets for icons or numbers. Preserve background room-lanscape,
   white mist, connector lines, header/footer, and responsive behavior.
   ======================================================================== */
@media (min-width:1021px) {
  body.rscm-access-page .rscm-access-simple {
    width:min(1340px,calc(100% - 70px));
    max-width:1340px;
  }
  body.rscm-access-page .rscm-access-step-grid {
    --rscm-access-link-length:14px;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }
}
body.rscm-access-page .rscm-access-step-card {
  position:relative;
  display:grid;
  grid-template-columns:91px minmax(0,1fr);
  grid-template-rows:52px auto auto;
  column-gap:17px;
  row-gap:6px;
  align-content:start;
  min-height:206px;
  padding:23px 20px 23px;
  border:1px solid #c8e2e2;
  border-radius:19px;
  color:#1b3b4e;
  background:linear-gradient(148deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.89) 59%,rgba(255,255,255,.84) 100%);
  box-shadow:0 9px 19px rgba(23,67,80,.055),0 22px 37px rgba(26,75,89,.075),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
body.rscm-access-page .rscm-access-step-card::before {
  content:"";
  position:absolute;
  top:25px;
  bottom:27px;
  left:106px;
  width:1px;
  background:linear-gradient(180deg,#e3ecee,#d5e0e6 50%,#e3ecee);
  pointer-events:none;
}
/* Existing spans become proper grid children without editing HTML. */
body.rscm-access-page .rscm-access-step-top {
  display:contents;
}
body.rscm-access-page .rscm-access-step-number {
  position:static;
  grid-column:1;
  grid-row:1 / span 3;
  align-self:start;
  justify-self:start;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  margin:0;
  border:1px solid #00aa9e;
  border-radius:50%;
  color:#fff;
  background:#00B9AD;
  box-shadow:0 4px 10px rgba(0,154,145,.18),inset 0 1px 0 rgba(255,255,255,.24);
  font-size:22px;
  font-weight:820;
  line-height:1;
  letter-spacing:-.04em;
}
body.rscm-access-page .rscm-access-step-icon {
  position:static;
  grid-column:2;
  grid-row:1;
  justify-self:center;
  align-self:center;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin:0;
  border:1px solid #c0d01d;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg,#d9e642 0%,#CDDC29 100%);
  box-shadow:0 4px 10px rgba(171,188,20,.18),inset 0 1px 0 rgba(255,255,255,.28);
  font-size:22px;
  transform:none;
}
body.rscm-access-page .rscm-access-step-card h2 {
  grid-column:2;
  grid-row:2;
  min-width:0;
  margin:2px 0 0;
  color:#193a50;
  font-size:15px;
  font-weight:780;
  line-height:1.34;
  letter-spacing:-.022em;
  text-align:center;
}
body.rscm-access-page .rscm-access-step-card p {
  grid-column:2;
  grid-row:3;
  min-width:0;
  margin:0;
  color:#647e8f;
  font-size:12px;
  line-height:1.62;
  text-align:center;
}
body.rscm-access-page .rscm-access-step-card:hover {
  transform:translateY(-2px);
  border-color:#acd3d0;
  box-shadow:0 14px 25px rgba(23,67,80,.065),0 27px 43px rgba(26,75,89,.09),inset 0 1px 0 #fff;
}
@media (min-width:1021px) and (max-width:1279px) {
  body.rscm-access-page .rscm-access-step-card {
    grid-template-columns:79px minmax(0,1fr);
    grid-template-rows:46px auto auto;
    column-gap:14px;
    padding:20px 14px 23px;
    min-height:206px;
  }
  body.rscm-access-page .rscm-access-step-card::before {left:91px;top:23px;bottom:24px;}
  body.rscm-access-page .rscm-access-step-number {width:54px;height:54px;font-size:18px;}
  body.rscm-access-page .rscm-access-step-icon {width:42px;height:42px;border-radius:12px;font-size:19px;}
  body.rscm-access-page .rscm-access-step-card h2 {font-size:13.5px;}
  body.rscm-access-page .rscm-access-step-card p {font-size:11.3px;}
}
@media (max-width:1020px) {
  body.rscm-access-page .rscm-access-step-grid {
    --rscm-access-link-length:25px;
    grid-template-columns:minmax(0,1fr);
    gap:25px;
  }
  body.rscm-access-page .rscm-access-step-card {
    min-height:178px;
    max-width:630px;
    width:100%;
    margin-inline:auto;
  }
}
@media (max-width:600px) {
  body.rscm-access-page .rscm-access-step-grid {--rscm-access-link-length:22px;gap:22px;}
  body.rscm-access-page .rscm-access-step-card {
    grid-template-columns:78px minmax(0,1fr);
    grid-template-rows:44px auto auto;
    column-gap:16px;
    min-height:164px;
    padding:19px 16px 22px;
    border-radius:16px;
  }
  body.rscm-access-page .rscm-access-step-card::before {left:93px;top:19px;bottom:21px;}
  body.rscm-access-page .rscm-access-step-number {width:48px;height:48px;font-size:16px;}
  body.rscm-access-page .rscm-access-step-icon {width:38px;height:38px;border-radius:12px;font-size:17px;}
  body.rscm-access-page .rscm-access-step-card h2 {font-size:13px;margin-top:1px;}
  body.rscm-access-page .rscm-access-step-card p {font-size:11.2px;line-height:1.55;}
}
@media (max-width:370px) {
  body.rscm-access-page .rscm-access-step-card {
    grid-template-columns:65px minmax(0,1fr);
    grid-template-rows:40px auto auto;
    column-gap:13px;
    padding:16px 12px 18px;
  }
  body.rscm-access-page .rscm-access-step-card::before {left:77px;top:17px;bottom:17px;}
  body.rscm-access-page .rscm-access-step-number {width:42px;height:42px;font-size:15px;}
  body.rscm-access-page .rscm-access-step-icon {width:34px;height:34px;border-radius:10px;font-size:15px;}
  body.rscm-access-page .rscm-access-step-card h2 {font-size:12.2px;}
  body.rscm-access-page .rscm-access-step-card p {font-size:10.8px;}
}
@media (prefers-reduced-motion:reduce) {
  body.rscm-access-page .rscm-access-step-card {transition:none;}
  body.rscm-access-page .rscm-access-step-card:hover {transform:none;}
}


/* ========================================================================
   RSCM IoMT V4.3.246 — TENTANG IOMT: MANFAAT UTAMA DUA WARNA
   Lima manfaat dalam area teks kiri (Turquoise #00B9AD + Lime #CDDC29).
   Selector dibatasi .rscm-about-page agar kartu Akses Petugas, foto kanan,
   kabut, navbar, footer, autentikasi, dan halaman lainnya tidak berubah.
   ======================================================================== */
body.rscm-about-page .rscm-about-simple-copy {
  padding-top:28px;
  padding-bottom:28px;
}
body.rscm-about-page .rscm-about-simple-copy h1 {
  margin-bottom:14px;
  font-size:clamp(32px,3.25vw,47px);
}
body.rscm-about-page .rscm-about-simple-copy > p {
  max-width:570px;
  margin:0;
  color:#597586;
  font-size:clamp(12.5px,1vw,14px);
  line-height:1.64;
}
body.rscm-about-page .rscm-about-simple-copy > p + p {
  margin-top:10px;
}
body.rscm-about-page .rscm-about-benefits {
  width:100%;
  max-width:580px;
  min-width:0;
  margin-top:24px;
}
body.rscm-about-page .rscm-about-benefits-head {
  margin:0 0 13px;
}
body.rscm-about-page .rscm-about-benefits-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#078c84;
  font-size:10px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:.085em;
}
body.rscm-about-page .rscm-about-benefits-kicker > span {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#CDDC29;
  box-shadow:0 0 0 3px rgba(205,220,41,.19);
}
body.rscm-about-page .rscm-about-benefits-head h2 {
  margin:5px 0 0;
  color:#17384c;
  font-size:clamp(15px,1.3vw,18px);
  line-height:1.32;
  font-weight:650;
  letter-spacing:-.025em;
}
body.rscm-about-page .rscm-about-benefits-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}
body.rscm-about-page .rscm-about-benefit-card {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:80px;
  margin:0;
  padding:11px 12px;
  border:1px solid #deeeee;
  border-left:3px solid #00B9AD;
  border-radius:13px;
  background:linear-gradient(132deg,rgba(245,253,251,.98),rgba(255,255,255,.99) 77%);
  box-shadow:0 4px 12px rgba(33,91,99,.047),0 10px 21px rgba(29,83,87,.045),inset 0 1px 0 #fff;
  box-sizing:border-box;
}
body.rscm-about-page .rscm-about-benefit-featured {
  grid-column:1 / -1;
  min-height:66px;
  padding:11px 13px;
  background:linear-gradient(105deg,#effaf7 0%,#f8fcf9 62%,#fff 100%);
  border-color:#d5ebe7;
  border-left-color:#00B9AD;
}
body.rscm-about-page .rscm-about-benefit-icon {
  display:grid;
  place-items:center;
  flex:0 0 37px;
  width:37px;
  height:37px;
  border:1px solid #c4d42a;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(150deg,#d7e63c 0%,#CDDC29 100%);
  box-shadow:0 3px 8px rgba(155,174,15,.15),inset 0 1px 0 rgba(255,255,255,.33);
}
body.rscm-about-page .rscm-about-benefit-icon i {
  font-size:17px;
}
body.rscm-about-page .rscm-about-benefit-content {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  flex:1;
  min-width:0;
}
body.rscm-about-page .rscm-about-benefit-content strong {
  display:block;
  color:#183d4b;
  font-size:12px;
  font-weight:600;
  line-height:1.33;
  letter-spacing:-.01em;
  overflow-wrap:break-word;
}
body.rscm-about-page .rscm-about-benefit-content small {
  display:block;
  color:#617c89;
  font-size:10.6px;
  line-height:1.43;
  overflow-wrap:break-word;
}
body.rscm-about-page .rscm-about-benefit-featured strong {
  font-size:13px;
}
body.rscm-about-page .rscm-about-simple-copy .rscm-about-benefits-note {
  width:100%;
  max-width:100%;
  margin:9px 0 0;
  color:#728a94;
  font-size:10.5px;
  line-height:1.42;
}
/* Laptop: maintain readable two-tone cards in the existing 44% left column. */
@media (min-width:901px) and (max-width:1200px) {
  body.rscm-about-page .rscm-about-simple-copy {
    padding-left:clamp(28px,5.8vw,72px);
    padding-right:clamp(20px,2.2vw,30px);
  }
  body.rscm-about-page .rscm-about-benefit-card {
    gap:8px;
    min-height:82px;
    padding:9px 8px;
  }
  body.rscm-about-page .rscm-about-benefit-icon {
    flex-basis:32px;
    width:32px;
    height:32px;
  }
  body.rscm-about-page .rscm-about-benefit-icon i {font-size:15px;}
  body.rscm-about-page .rscm-about-benefit-content strong {font-size:11.2px;}
  body.rscm-about-page .rscm-about-benefit-content small {font-size:9.8px;}
}
/* Small screens preserve the existing vertical stacking: copy first, bed second. */
@media (max-width:900px) {
  body.rscm-about-page .rscm-about-simple-copy {
    max-width:760px;
    padding-top:28px;
    padding-bottom:32px;
  }
  body.rscm-about-page .rscm-about-benefits {max-width:100%;margin-top:22px;}
}
@media (max-width:520px) {
  body.rscm-about-page .rscm-about-simple-copy h1 {
    font-size:clamp(29px,7vw,35px);
  }
  body.rscm-about-page .rscm-about-benefits-grid {
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  body.rscm-about-page .rscm-about-benefit-featured {grid-column:auto;}
  body.rscm-about-page .rscm-about-benefit-card {
    min-height:64px;
    padding:10px 12px;
  }
  body.rscm-about-page .rscm-about-benefit-content strong {font-size:12px;}
  body.rscm-about-page .rscm-about-benefit-content small {font-size:10.5px;}
  body.rscm-about-page .rscm-about-simple-copy .rscm-about-benefits-note {font-size:10px;}
}


/* ========================================================================
   RSCM IoMT V4.3.251 — WHITE BENEFIT CARDS + FULL-HEIGHT PHOTO BOTTOM FADE
   Scope: Tentang IoMT only. Preserve public navigation, footer, image source,
   and functionality. The image now defines its own height, preventing the
   square/tall Hospital Bed IoMT PNG from being cropped by a fixed-height hero.
   ======================================================================== */
body.rscm-about-page .rscm-about-benefits-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
body.rscm-about-page .rscm-about-benefit-card,
body.rscm-about-page .rscm-about-benefit-featured {
  grid-column:auto;
  align-items:flex-start;
  gap:13px;
  min-height:112px;
  padding:15px 13px;
  border:1px solid #dcebed;
  border-radius:15px;
  background:linear-gradient(145deg,#fff 0%,#fcfefe 100%);
  box-shadow:0 5px 17px rgba(26,70,83,.060),0 14px 28px rgba(27,76,87,.035),inset 0 1px 0 #fff;
}
body.rscm-about-page .rscm-about-benefit-icon {
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:13px;
  border:1px solid #bfd21c;
  background:linear-gradient(150deg,#d5e33a 0%,#CDDC29 100%);
  color:#fff;
  box-shadow:0 5px 13px rgba(177,194,16,.16),inset 0 1px 0 rgba(255,255,255,.30);
}
body.rscm-about-page .rscm-about-benefit-icon i {font-size:22px;}
body.rscm-about-page .rscm-about-benefit-content {
  gap:6px;
  padding-top:1px;
}
body.rscm-about-page .rscm-about-benefit-content strong,
body.rscm-about-page .rscm-about-benefit-featured strong {
  color:#087e83;
  font-size:12.6px;
  font-weight:600;
  line-height:1.34;
  letter-spacing:-.012em;
}
body.rscm-about-page .rscm-about-benefit-content small {
  color:#627d8c;
  font-size:11.2px;
  line-height:1.48;
}
/* Desktop: the image is measured at its natural aspect ratio instead of
   filling a constrained rectangular frame with object-fit:cover. This keeps
   all wheels and the bed undercarriage available in the source visible. */
@media (min-width:901px) {
  body.rscm-about-page .rscm-about-simple-hero {
    min-height:0;
  }
  body.rscm-about-page .rscm-about-device-visual {
    position:relative;
    height:auto;
    min-height:0;
    align-self:stretch;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-device-media {
    position:relative;
    inset:auto;
    height:auto;
    width:100%;
    aspect-ratio:auto;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-device-media > img {
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center bottom;
  }
  /* Both fades are attached to the ACTUAL photo dimensions, not the hero
     wrapper, so the photo never ends above the white dissolve. */
  body.rscm-about-page .rscm-about-device-media::after {
    inset:0;
    background:
      linear-gradient(to top,
        #fff 0%,
        rgba(255,255,255,.97) 5%,
        rgba(255,255,255,.79) 12%,
        rgba(255,255,255,.46) 20%,
        rgba(255,255,255,.16) 29%,
        rgba(255,255,255,0) 38%),
      linear-gradient(to right,
        #fff 0%,
        rgba(255,255,255,.95) 4%,
        rgba(255,255,255,.69) 11%,
        rgba(255,255,255,.27) 21%,
        rgba(255,255,255,0) 32%);
  }
}
/* Keep two columns where they remain legible on desktop/laptop. */
@media (min-width:901px) and (max-width:1190px) {
  body.rscm-about-page .rscm-about-benefit-card {gap:9px;padding:11px 9px;min-height:105px;}
  body.rscm-about-page .rscm-about-benefit-icon {flex-basis:37px;width:37px;height:37px;border-radius:10px;}
  body.rscm-about-page .rscm-about-benefit-icon i {font-size:17px;}
  body.rscm-about-page .rscm-about-benefit-content {gap:4px;}
  body.rscm-about-page .rscm-about-benefit-content strong,
  body.rscm-about-page .rscm-about-benefit-featured strong {font-size:11.1px;}
  body.rscm-about-page .rscm-about-benefit-content small {font-size:9.8px;line-height:1.48;}
}
/* Tablet/phone: retain existing vertical page order, display full photo and
   smoothly dissolve its actual lower edge into the surrounding white. */
@media (max-width:900px) {
  body.rscm-about-page .rscm-about-device-visual {
    height:auto;
    min-height:0;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-device-media {
    position:relative;
    height:auto;
    aspect-ratio:auto;
    overflow:hidden;
  }
  body.rscm-about-page .rscm-about-device-media > img {
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center bottom;
  }
  body.rscm-about-page .rscm-about-device-media::after {
    background:
      linear-gradient(to top,
        #fff 0%,
        rgba(255,255,255,.91) 6%,
        rgba(255,255,255,.58) 16%,
        rgba(255,255,255,.18) 27%,
        transparent 36%),
      linear-gradient(to bottom,
        rgba(255,255,255,.75) 0%,
        rgba(255,255,255,.17) 9%,
        transparent 18%);
  }
  body.rscm-about-page .rscm-about-benefit-card {min-height:107px;}
}
@media (max-width:520px) {
  body.rscm-about-page .rscm-about-benefits-grid {grid-template-columns:minmax(0,1fr);gap:9px;}
  body.rscm-about-page .rscm-about-benefit-card {min-height:0;padding:14px;}
  body.rscm-about-page .rscm-about-benefit-icon {flex-basis:47px;width:47px;height:47px;}
  body.rscm-about-page .rscm-about-benefit-icon i {font-size:20px;}
}

/* ======================================================================
   RSCM IoMT V4.3.240 — TENTANG IOMT / LAPTOP VERTICAL ALIGNMENT HOTFIX
   Root fix for ineffective V4.3.239 transform-based adjustment:
   the original desktop hero begins with padding-top:74px. Reduce that
   padding to 34px to move BOTH columns 40px upward in normal layout.
   Do not touch the photo fade, grid, navbar, mobile layout, or scripts.
   Apply on laptop/desktop from 1021px without a 1600px ceiling,
   which also avoids zoomed-browser CSS viewport discrepancies.
   ====================================================================== */
@media (min-width:1021px) {
  body.rscm-about-page .rscm-about-simple-main {
    padding-top:34px;
  }
}



/* ========================================================================
   RSCM IoMT V4.3.252 — TENTANG: INFORMATION CONTENT, REAL TOP ALIGNMENT
   Root fix: previous photo-height grid centered short copy vertically and
   position:relative/top:-40px only produced an optical offset.  These rules
   establish START alignment in actual layout.  Only Tentang IoMT is scoped.
   Preserve original right-side photo, gradient, navigation and footer.
   ======================================================================== */
@media (min-width:901px) {
  body.rscm-about-page .rscm-about-simple-main {
    padding-top:96px; /* fixed public header 64px + 32px breathing room */
  }
  body.rscm-about-page .rscm-about-simple-hero {
    align-items:start;
  }
  body.rscm-about-page .rscm-about-simple-hero > .rscm-about-simple-copy {
    position:static;
    top:auto;
    transform:none;
    align-self:start;
    justify-content:flex-start;
    padding-top:18px;
    padding-bottom:60px;
  }
  body.rscm-about-page .rscm-about-simple-hero > .rscm-about-device-visual {
    align-self:start;
  }
}
/* Prevent the six old benefit-card selectors from affecting the new
   typographic and numbered information sections. */
body.rscm-about-page .rscm-about-simple-copy .rscm-about-intro-copy h1 {
  margin:0;
  color:#17384c;
  font-size:clamp(27px,2.8vw,39px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.035em;
}
body.rscm-about-page .rscm-about-simple-copy .rscm-about-intro-copy h1 em {color:#278e86;}
body.rscm-about-page .rscm-about-simple-copy .rscm-about-claim {
  margin:8px 0 0;
  max-width:570px;
  font-size:clamp(13px,1.3vw,17px);
  font-weight:750;
  line-height:1.45;
  color:#245367;
}
body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section {
  max-width:620px;
  min-width:0;
  padding-top:19px;
  margin-top:19px;
  border-top:1px solid #e2ebef;
}
body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section h2 {
  margin:0 0 11px;
  color:#17384c;
  font-size:clamp(15px,1.3vw,19px);
  line-height:1.35;
  font-weight:780;
  letter-spacing:-.02em;
}
body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section p {
  max-width:none;
  font-size:12.5px;
  line-height:1.7;
  color:#587485;
}
body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section p + p {
  margin-top:11px;
}
body.rscm-about-page .rscm-about-entry-list {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  list-style:none;
  padding:0;
  margin:0;
}
body.rscm-about-page .rscm-about-entry-list > li {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;
  gap:10px;
  margin:0;
  padding:11px 12px;
  border:1px solid #e1ecee;
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 14px rgba(25,75,89,.045);
}
body.rscm-about-page .rscm-about-entry-index {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:9px;
  color:#087f78;
  background:#e8f7f3;
  font-size:11px;
  font-weight:800;
}
body.rscm-about-page .rscm-about-entry-list > li > span:last-child {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
body.rscm-about-page .rscm-about-entry-list strong {
  color:#244a5a;
  font-size:12.8px;
  font-weight:740;
  line-height:1.45;
}
body.rscm-about-page .rscm-about-entry-list > li > span:last-child > span {
  color:#607a89;
  font-size:11.8px;
  line-height:1.55;
}
body.rscm-about-page .rscm-about-flow-list .rscm-about-entry-index {
  color:#71871e;
  background:#f1f6de;
}
body.rscm-about-page .rscm-about-benefits-text {
  display:grid;
  gap:8px;
  padding:0 0 0 27px;
  margin:0;
  color:#557281;
  font-size:12.1px;
  line-height:1.58;
}
body.rscm-about-page .rscm-about-benefits-text > li {padding-left:3px;}
body.rscm-about-page .rscm-about-benefits-text > li::marker {
  color:#148b83;
  font-weight:750;
}
body.rscm-about-page .rscm-about-users {
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
body.rscm-about-page .rscm-about-users > div {
  padding:10px 12px;
  border-left:3px solid #b6cf34;
  background:#f8fbfa;
  border-radius:0 10px 10px 0;
}
body.rscm-about-page .rscm-about-users dt {
  color:#245166;
  font-size:12.5px;
  font-weight:760;
  line-height:1.4;
}
body.rscm-about-page .rscm-about-users dd {
  margin:3px 0 0;
  color:#657d89;
  font-size:11.9px;
  line-height:1.55;
}
body.rscm-about-page .rscm-about-simple-copy .rscm-about-commitment {
  margin-bottom:14px;
}
@media (min-width:901px) and (max-width:1200px) {
  body.rscm-about-page .rscm-about-simple-hero > .rscm-about-simple-copy {
    padding-top:16px;
  }
  body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section p {font-size:11.7px;}
  body.rscm-about-page .rscm-about-entry-list > li {padding:9px;gap:7px;}
  body.rscm-about-page .rscm-about-entry-list strong {font-size:12px;}
  body.rscm-about-page .rscm-about-entry-list > li > span:last-child > span {font-size:11.2px;}
}
@media (max-width:900px) {
  body.rscm-about-page .rscm-about-simple-copy {
    justify-content:flex-start;
  }
}
@media (max-width:600px) {
  body.rscm-about-page .rscm-about-simple-copy .rscm-about-intro-copy h1 {font-size:clamp(27px,7vw,34px);}
  body.rscm-about-page .rscm-about-simple-copy .rscm-about-claim {font-size:13px;}
  body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section {padding-top:16px;margin-top:16px;}
  body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section p {font-size:12px;}
  body.rscm-about-page .rscm-about-entry-list > li > span:last-child > span {font-size:11.3px;}
}

/* ========================================================================
   RSCM IoMT V4.3.253 — TENTANG IOMT: INDEPENDENT LAPTOP ALIGNMENT
   - Left column: move copy 44-46px lower in NORMAL layout, not via top/transform.
   - Right photo: crop extra upper-room ceiling only, retain lower bed and
     floor by anchoring object-fit:cover to bottom. Bed therefore appears
     about 105px higher without moving the image behind the fixed navbar.
   - Existing full-bleed photo and left/bottom white fog remain as approved.
   - Exclusive to >=1021px: mobile/tablet and other pages are unchanged.
   ======================================================================== */
@media (min-width:1021px) {
  body.rscm-about-page .rscm-about-simple-hero > .rscm-about-simple-copy {
    padding-top:62px;
  }

  body.rscm-about-page .rscm-about-device-visual .rscm-about-device-media {
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:1122 / 1260;
    overflow:hidden;
  }

  body.rscm-about-page .rscm-about-device-visual .rscm-about-device-media > img {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center bottom;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.254 — BALANCED ABOUT PAGE, PHOTO + INFORMATION RIGHT
   - Preserve approved top alignment, the full-bleed Hospital Bed photo,
     portrait crop anchored to bottom, and white photo gradients from V4.3.253.
   - Reuse ORIGINAL editorial content; move Benefits and Commitment directly
     beneath the photo instead of leaving the right side empty.
   - Preserve clinical interpretation, links, footer, drawer, auth and JS.
   - On phones flatten the two visual columns into deliberate reading order.
   ======================================================================== */
body.rscm-about-page .rscm-about-simple-hero > .rscm-about-right-column {
  display:flex;
  flex-direction:column;
  align-self:start;
  min-width:0;
  width:100%;
}
body.rscm-about-page .rscm-about-right-column > .rscm-about-device-visual {
  flex:0 0 auto;
  width:100%;
  min-width:0;
  margin:0;
}
/* Two information blocks beneath the full-bleed photograph (desktop). */
body.rscm-about-page .rscm-about-right-column > .rscm-about-info-section {
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  padding:28px clamp(25px,3.7vw,66px) 28px clamp(30px,4vw,70px);
  background:#fff;
}
body.rscm-about-page .rscm-about-right-column > .rscm-about-info-section h2 {
  margin:0 0 16px;
  color:#17384c;
  font-size:clamp(17px,1.45vw,22px);
  font-weight:780;
  line-height:1.34;
  letter-spacing:-.025em;
}
body.rscm-about-page .rscm-about-right-column .rscm-about-benefits-text {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
  counter-reset:rscm-about-benefit;
}
body.rscm-about-page .rscm-about-right-column .rscm-about-benefits-text > li {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:start;
  column-gap:9px;
  min-width:0;
  margin:0;
  padding:12px 11px;
  border:1px solid #e1ebee;
  border-radius:11px;
  background:#fff;
  color:#4c6b7e;
  font-size:11.6px;
  line-height:1.55;
  box-shadow:0 4px 12px rgba(27,78,91,.045);
  counter-increment:rscm-about-benefit;
}
body.rscm-about-page .rscm-about-right-column .rscm-about-benefits-text > li::before {
  content:counter(rscm-about-benefit,decimal-leading-zero);
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:29px;
  height:29px;
  border-radius:8px;
  color:#087f78;
  background:#e8f7f3;
  font-size:10px;
  font-weight:800;
}
body.rscm-about-page .rscm-about-right-column > .rscm-about-commitment {
  padding-top:24px;
  padding-bottom:44px;
  border-top:1px solid #e0ebee;
}
body.rscm-about-page .rscm-about-right-column > .rscm-about-commitment h2 {
  margin-bottom:9px;
}
body.rscm-about-page .rscm-about-right-column > .rscm-about-commitment p {
  max-width:720px;
  margin:0;
  color:#567285;
  font-size:12.5px;
  line-height:1.75;
}
/* Fine tune long right-hand bullet copy on compact laptops. */
@media (min-width:901px) and (max-width:1200px) {
  body.rscm-about-page .rscm-about-right-column > .rscm-about-info-section {
    padding-inline:24px;
  }
  body.rscm-about-page .rscm-about-right-column .rscm-about-benefits-text {
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  body.rscm-about-page .rscm-about-right-column .rscm-about-benefits-text > li {
    min-height:0;
    padding-block:9px;
  }
}
/* Tablet/mobile: a single accessible sequence rather than a long left column
   followed by an unrelated photo. The existing DOM and original text remain. */
@media (max-width:900px) {
  body.rscm-about-page .rscm-about-simple-hero {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  body.rscm-about-page .rscm-about-simple-hero > .rscm-about-simple-copy,
  body.rscm-about-page .rscm-about-simple-hero > .rscm-about-right-column {
    display:contents;
  }
  body.rscm-about-page .rscm-about-simple-copy > .rscm-about-intro-copy {order:1;}
  body.rscm-about-page .rscm-about-simple-copy > [aria-labelledby="aboutAppTitle"] {order:2;}
  body.rscm-about-page .rscm-about-right-column > .rscm-about-device-visual {order:3;}
  body.rscm-about-page .rscm-about-simple-copy > [aria-labelledby="aboutFeaturesTitle"] {order:4;}
  body.rscm-about-page .rscm-about-simple-copy > [aria-labelledby="aboutFlowTitle"] {order:5;}
  body.rscm-about-page .rscm-about-right-column > [aria-labelledby="aboutBenefitsTitle"] {order:6;}
  body.rscm-about-page .rscm-about-simple-copy > [aria-labelledby="aboutUsersTitle"] {order:7;}
  body.rscm-about-page .rscm-about-right-column > [aria-labelledby="aboutCommitmentTitle"] {order:8;}
  body.rscm-about-page .rscm-about-simple-copy > .rscm-about-intro-copy,
  body.rscm-about-page .rscm-about-simple-copy > .rscm-about-info-section {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin:0;
    padding:23px clamp(20px,4vw,35px);
  }
  body.rscm-about-page .rscm-about-simple-copy > .rscm-about-intro-copy {
    padding-top:16px;
    padding-bottom:8px;
  }
  body.rscm-about-page .rscm-about-simple-copy > [aria-labelledby="aboutAppTitle"] {
    margin:0;
    border-top:0;
    padding-top:8px;
    padding-bottom:20px;
  }
  body.rscm-about-page .rscm-about-right-column > .rscm-about-device-visual {
    margin:0;
    width:100%;
  }
  body.rscm-about-page .rscm-about-right-column > .rscm-about-info-section {
    padding:23px clamp(20px,4vw,35px);
  }
  body.rscm-about-page .rscm-about-right-column > .rscm-about-commitment {
    border-top:1px solid #e1ecef;
    padding-bottom:42px;
  }
  body.rscm-about-page .rscm-about-right-column .rscm-about-benefits-text {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:600px) {
  body.rscm-about-page .rscm-about-right-column .rscm-about-benefits-text {
    grid-template-columns:minmax(0,1fr);
    gap:9px;
  }
  body.rscm-about-page .rscm-about-right-column .rscm-about-benefits-text > li {
    min-height:0;
    padding:10px 12px;
    font-size:12px;
  }
  body.rscm-about-page .rscm-about-simple-copy > .rscm-about-info-section,
  body.rscm-about-page .rscm-about-right-column > .rscm-about-info-section {
    padding-inline:20px;
  }
  body.rscm-about-page .rscm-about-simple-copy > .rscm-about-intro-copy {
    padding-inline:20px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.255 — TENTANG IOMT: HERO & CONTENT SPACING REFINEMENT
   Tujuan:
   - Hero atas lebih rapi: teks pengantar fokus di kiri, foto bed fokus di kanan.
   - Jarak antarbagian lebih konsisten.
   - Konten lanjutan dibagi ke dua kolom yang seimbang setelah hero.
   - Tampilan HP tetap satu kolom dan mudah dibaca.
   ======================================================================== */
body.rscm-about-page .rscm-about-simple-main {
  padding-bottom:44px;
}
body.rscm-about-page .rscm-about-simple-hero {
  width:min(1440px, 100%);
  max-width:none;
}

@media (min-width:901px) {
  body.rscm-about-page .rscm-about-simple-main {
    padding-top:94px;
  }
  body.rscm-about-page .rscm-about-simple-hero {
    display:block;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
  }
  body.rscm-about-page .rscm-about-hero-top {
    display:grid;
    grid-template-columns:minmax(0, 41.5%) minmax(0, 58.5%);
    align-items:start;
    gap:0;
    width:100%;
    min-height:clamp(500px, 40vw, 645px);
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-simple-copy {
    justify-content:flex-start;
    align-items:flex-start;
    width:100%;
    max-width:none;
    min-width:0;
    padding:52px clamp(28px, 2.6vw, 54px) 26px clamp(36px, 6.7vw, 112px);
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-simple-copy .rscm-about-info-section {
    max-width:560px;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-right-column--hero {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-width:0;
    width:100%;
    padding-top:14px;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-right-column--hero > .rscm-about-device-visual {
    width:100%;
    min-height:clamp(480px, 39vw, 620px);
    height:clamp(480px, 39vw, 620px);
    margin:0;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-right-column--hero .rscm-about-device-media {
    height:100%;
    aspect-ratio:auto;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-right-column--hero .rscm-about-device-media > img {
    object-fit:cover;
    object-position:50% 78%;
  }

  body.rscm-about-page .rscm-about-content-grid {
    display:grid;
    grid-template-columns:minmax(0, 41.5%) minmax(0, 58.5%);
    align-items:start;
    gap:0;
    width:100%;
    margin:0;
    padding:18px 0 0;
  }
  body.rscm-about-page .rscm-about-content-column {
    min-width:0;
    width:100%;
  }
  body.rscm-about-page .rscm-about-content-column--left {
    padding:0 clamp(28px, 2.6vw, 54px) 0 clamp(36px, 6.7vw, 112px);
  }
  body.rscm-about-page .rscm-about-content-column--right {
    padding:0 clamp(26px, 3.7vw, 64px) 0 clamp(30px, 3.9vw, 60px);
  }
  body.rscm-about-page .rscm-about-content-column > .rscm-about-info-section {
    max-width:none;
    margin:0;
    padding:0;
    border-top:0;
    background:transparent;
  }
  body.rscm-about-page .rscm-about-content-column > .rscm-about-info-section + .rscm-about-info-section {
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid #e1ecef;
  }
  body.rscm-about-page .rscm-about-content-column--left > .rscm-about-info-section:first-child {
    padding-top:0;
  }
  body.rscm-about-page .rscm-about-content-column--right > .rscm-about-info-section:first-child {
    padding-top:2px;
  }
  body.rscm-about-page .rscm-about-content-column--right .rscm-about-benefits-text {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body.rscm-about-page .rscm-about-content-column--right .rscm-about-benefits-text > li {
    min-height:64px;
  }
  body.rscm-about-page .rscm-about-content-column--right .rscm-about-commitment {
    padding-bottom:10px;
  }
}

@media (min-width:901px) and (max-width:1200px) {
  body.rscm-about-page .rscm-about-hero-top {
    grid-template-columns:minmax(0, 43%) minmax(0, 57%);
    min-height:clamp(460px, 44vw, 590px);
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-simple-copy {
    padding:44px 22px 22px 44px;
  }
  body.rscm-about-page .rscm-about-content-grid {
    grid-template-columns:minmax(0, 43%) minmax(0, 57%);
  }
  body.rscm-about-page .rscm-about-content-column--left {
    padding:0 22px 0 44px;
  }
  body.rscm-about-page .rscm-about-content-column--right {
    padding:0 24px 0 28px;
  }
  body.rscm-about-page .rscm-about-content-column--right .rscm-about-benefits-text {
    grid-template-columns:minmax(0, 1fr);
  }
}

@media (max-width:900px) {
  body.rscm-about-page .rscm-about-simple-main {
    padding-top:106px;
    padding-bottom:30px;
  }
  body.rscm-about-page .rscm-about-simple-hero {
    display:block;
    width:100%;
    margin:0;
    padding:0;
  }
  body.rscm-about-page .rscm-about-hero-top,
  body.rscm-about-page .rscm-about-content-grid {
    display:block;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-simple-copy,
  body.rscm-about-page .rscm-about-content-column,
  body.rscm-about-page .rscm-about-right-column--hero {
    width:100%;
    max-width:none;
    padding:0;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-simple-copy {
    padding:16px clamp(20px,4vw,34px) 10px;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-simple-copy .rscm-about-info-section {
    max-width:none;
  }
  body.rscm-about-page .rscm-about-right-column--hero > .rscm-about-device-visual {
    width:100%;
    height:clamp(340px, 74vw, 470px);
    min-height:clamp(340px, 74vw, 470px);
    margin:0;
  }
  body.rscm-about-page .rscm-about-right-column--hero .rscm-about-device-media,
  body.rscm-about-page .rscm-about-right-column--hero .rscm-about-device-media > img {
    height:100%;
  }
  body.rscm-about-page .rscm-about-right-column--hero .rscm-about-device-media > img {
    object-position:center 72%;
  }
  body.rscm-about-page .rscm-about-content-grid {
    padding-top:14px;
  }
  body.rscm-about-page .rscm-about-content-column {
    padding:0 clamp(20px,4vw,34px);
  }
  body.rscm-about-page .rscm-about-content-column > .rscm-about-info-section {
    margin:0;
    padding-top:20px;
    border-top:1px solid #e1ecef;
  }
  body.rscm-about-page .rscm-about-content-column > .rscm-about-info-section:first-child {
    padding-top:18px;
  }
  body.rscm-about-page .rscm-about-content-column > .rscm-about-info-section + .rscm-about-info-section {
    margin-top:18px;
  }
  body.rscm-about-page .rscm-about-content-column--right {
    padding-bottom:10px;
  }
  body.rscm-about-page .rscm-about-content-column--right .rscm-about-benefits-text {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
}

@media (max-width:600px) {
  body.rscm-about-page .rscm-about-simple-main {
    padding-top:101px;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-simple-copy,
  body.rscm-about-page .rscm-about-content-column {
    padding-inline:20px;
  }
  body.rscm-about-page .rscm-about-right-column--hero > .rscm-about-device-visual {
    height:clamp(312px, 83vw, 430px);
    min-height:clamp(312px, 83vw, 430px);
  }
  body.rscm-about-page .rscm-about-content-column > .rscm-about-info-section + .rscm-about-info-section {
    margin-top:16px;
  }
  body.rscm-about-page .rscm-about-content-column--right .rscm-about-benefits-text {
    grid-template-columns:minmax(0, 1fr);
  }
}


/* ========================================================================
   RSCM IoMT V4.3.256 — HERO IMAGE SMALLER + LOWER, BODY COPY LARGER
   - Foto hero kanan diperkecil sedikit dan diturunkan sekitar 30px pada laptop/desktop.
   - Teks penjelasan diperbesar agar lebih nyaman dibaca.
   - Scope tetap hanya halaman Tentang IoMT.
   ======================================================================== */
body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section p {
  font-size:clamp(13.6px, 1.04vw, 15px);
  line-height:1.8;
}
body.rscm-about-page .rscm-about-entry-list > li > span:last-child > span,
body.rscm-about-page .rscm-about-users dd,
body.rscm-about-page .rscm-about-content-column--right .rscm-about-benefits-text > li,
body.rscm-about-page .rscm-about-right-column > .rscm-about-commitment p {
  font-size:12.5px;
  line-height:1.68;
}

@media (min-width:901px) {
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-simple-copy {
    padding-top:58px;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-right-column--hero {
    padding-top:44px;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-right-column--hero > .rscm-about-device-visual {
    width:96%;
    min-height:clamp(448px, 36.8vw, 592px);
    height:clamp(448px, 36.8vw, 592px);
    margin:0 0 0 auto;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-right-column--hero .rscm-about-device-media > img {
    object-position:52% 78%;
  }
}

@media (min-width:901px) and (max-width:1200px) {
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-simple-copy {
    padding-top:52px;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-right-column--hero {
    padding-top:38px;
  }
  body.rscm-about-page .rscm-about-hero-top > .rscm-about-right-column--hero > .rscm-about-device-visual {
    width:97%;
    min-height:clamp(430px, 37.2vw, 548px);
    height:clamp(430px, 37.2vw, 548px);
  }
  body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section p {
    font-size:13.4px;
  }
}

@media (max-width:900px) {
  body.rscm-about-page .rscm-about-simple-copy .rscm-about-info-section p {
    font-size:13px;
    line-height:1.76;
  }
  body.rscm-about-page .rscm-about-entry-list > li > span:last-child > span,
  body.rscm-about-page .rscm-about-users dd,
  body.rscm-about-page .rscm-about-content-column--right .rscm-about-benefits-text > li,
  body.rscm-about-page .rscm-about-right-column > .rscm-about-commitment p {
    font-size:12.2px;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.258 — FIX JEDA PUTIH DI ANTARA HERO DAN FITUR
   Perbaikan struktural: hapus pembagian dua baris yang menunda semua fitur
   sampai setinggi foto. Dua kolom mengalir mandiri dari atas ke bawah:
   Kiri: pengenalan → fitur → alur → pengguna.
   Kanan: foto → manfaat → komitmen.
   Tidak menambah JS dan tidak mengubah fungsi navigasi.
   ======================================================================== */
@media (min-width:901px) {
  body.rscm-about-page .rscm-about-simple-main {
    padding-top:94px;
    padding-bottom:60px;
  }
  body.rscm-about-page .rscm-about-simple-hero {
    display:block;
    width:100%;
    max-width:none;
    min-height:0;
    margin:0;
    padding:0;
  }
  body.rscm-about-page .rscm-about-editorial-grid {
    display:grid;
    grid-template-columns:minmax(0, 41.5%) minmax(0, 58.5%);
    align-items:start;
    gap:0;
    width:100%;
  }
  body.rscm-about-page .rscm-about-editorial-left {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    box-sizing:border-box;
    min-width:0;
    width:100%;
    max-width:none;
    padding:52px clamp(28px,2.6vw,54px) 30px clamp(36px,6.7vw,112px);
    position:static;
    top:auto;
  }
  body.rscm-about-page .rscm-about-editorial-left .rscm-about-info-section {
    box-sizing:border-box;
    width:100%;
    max-width:620px;
    min-width:0;
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid #e1ecef;
  }
  body.rscm-about-page .rscm-about-editorial-left .rscm-about-info-section:first-of-type {
    margin-top:19px;
  }
  body.rscm-about-page .rscm-about-editorial-right {
    display:flex;
    flex-direction:column;
    min-width:0;
    width:100%;
    padding:44px 0 0;
  }
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {
    flex:0 0 auto;
    width:96%;
    max-width:none;
    min-height:clamp(448px,36.8vw,592px);
    height:clamp(448px,36.8vw,592px);
    margin:0 0 0 auto;
    overflow:hidden;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-editorial-right .rscm-about-device-media {
    position:relative;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    overflow:hidden;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-editorial-right .rscm-about-device-media > img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:52% 78%;
  }
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-info-section {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    min-width:0;
    margin:0;
    padding:22px clamp(26px,3.7vw,64px) 22px clamp(30px,3.9vw,60px);
    border:0;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-info-section + .rscm-about-info-section {
    padding-top:22px;
    border-top:1px solid #e1ecef;
  }
  body.rscm-about-page .rscm-about-editorial-right .rscm-about-entry-list {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  body.rscm-about-page .rscm-about-editorial-right .rscm-about-entry-list > li {
    min-height:0;
  }
}
@media (min-width:901px) and (max-width:1200px) {
  body.rscm-about-page .rscm-about-editorial-grid {
    grid-template-columns:minmax(0,43%) minmax(0,57%);
  }
  body.rscm-about-page .rscm-about-editorial-left {
    padding:46px 22px 30px 44px;
  }
  body.rscm-about-page .rscm-about-editorial-right {
    padding-top:38px;
  }
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {
    width:97%;
    min-height:clamp(430px,37.2vw,548px);
    height:clamp(430px,37.2vw,548px);
  }
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-info-section {
    padding-inline:24px;
  }
}
@media (max-width:900px) {
  body.rscm-about-page .rscm-about-simple-main {
    padding-top:106px;
    padding-bottom:30px;
  }
  body.rscm-about-page .rscm-about-simple-hero {
    display:block;
    width:100%;
    margin:0;
    padding:0;
  }
  body.rscm-about-page .rscm-about-editorial-grid {
    display:flex;
    flex-direction:column;
    min-width:0;
    width:100%;
  }
  body.rscm-about-page .rscm-about-editorial-left,
  body.rscm-about-page .rscm-about-editorial-right {
    display:contents;
  }
  body.rscm-about-page .rscm-about-editorial-left > .rscm-about-intro-copy {order:1;}
  body.rscm-about-page .rscm-about-editorial-left > [aria-labelledby="aboutAppTitle"] {order:2;}
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {order:3;}
  body.rscm-about-page .rscm-about-editorial-left > [aria-labelledby="aboutFeaturesTitle"] {order:4;}
  body.rscm-about-page .rscm-about-editorial-left > [aria-labelledby="aboutFlowTitle"] {order:5;}
  body.rscm-about-page .rscm-about-editorial-right > [aria-labelledby="aboutBenefitsTitle"] {order:6;}
  body.rscm-about-page .rscm-about-editorial-left > [aria-labelledby="aboutUsersTitle"] {order:7;}
  body.rscm-about-page .rscm-about-editorial-right > [aria-labelledby="aboutCommitmentTitle"] {order:8;}
  body.rscm-about-page .rscm-about-editorial-left > .rscm-about-intro-copy,
  body.rscm-about-page .rscm-about-editorial-left > .rscm-about-info-section,
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-info-section {
    display:block;
    box-sizing:border-box;
    width:100%;
    max-width:none;
    min-width:0;
    margin:0;
    padding:20px clamp(20px,4vw,34px);
  }
  body.rscm-about-page .rscm-about-editorial-left > .rscm-about-intro-copy {
    padding-top:16px;
    padding-bottom:9px;
  }
  body.rscm-about-page .rscm-about-editorial-left > [aria-labelledby="aboutAppTitle"] {
    padding-top:9px;
    border-top:0;
  }
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {
    display:block;
    width:100%;
    min-height:0;
    height:auto;
    margin:0;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual .rscm-about-device-media {
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:auto;
  }
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual .rscm-about-device-media > img {
    position:relative;
    width:100%;
    height:auto;
    object-fit:contain;
  }
  body.rscm-about-page .rscm-about-editorial-left > .rscm-about-info-section:not([aria-labelledby="aboutAppTitle"]),
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-info-section {
    border-top:1px solid #e1ecef;
  }
  body.rscm-about-page .rscm-about-editorial-right .rscm-about-entry-list {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:9px;
  }
}
@media (max-width:600px) {
  body.rscm-about-page .rscm-about-simple-main {padding-top:101px;}
  body.rscm-about-page .rscm-about-editorial-left > .rscm-about-intro-copy,
  body.rscm-about-page .rscm-about-editorial-left > .rscm-about-info-section,
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-info-section {
    padding-inline:20px;
  }
}


/* ===========================================================================
   V4.3.259 — TENTANG IOMT: FOTO UTUH TANPA CROP, DI BELAKANG TOPBAR
   Aset asli berukuran 1122x1402 (portrait). Sebelumnya CSS V4.3.258 memakai
   height tetap + object-fit:cover + overflow:hidden, sehingga isi foto terpotong.
   Perubahan ini HANYA mengganti presentasi foto desktop. Mobile tetap.
   =========================================================================== */
@media (min-width:901px) {
  /* Topbar tetap di lapisan paling depan melalui z-index aslinya. */
  body.rscm-about-page .rscm-about-editorial-right {
    position:relative;
    overflow:visible;
    padding-top:0;
  }

  /* Foto berformat potret diperkecil proporsional, bukan dipaksa ke frame pendek.
     Sebagian ruang atas foto dapat berada di belakang topbar fixed. */
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {
    position:relative;
    width:min(79%,730px);
    max-width:100%;
    min-height:0;
    height:auto;
    margin:-66px 0 0 auto;
    overflow:visible;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-editorial-right .rscm-about-device-media {
    position:relative;
    inset:auto;
    width:100%;
    min-height:0;
    height:auto;
    aspect-ratio:auto;
    overflow:visible;
    background:#fff;
  }
  body.rscm-about-page .rscm-about-editorial-right .rscm-about-device-media > img {
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:1122 / 1402;
    object-fit:contain;
    object-position:center;
  }
}
@media (min-width:901px) and (max-width:1200px) {
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {
    width:min(79%,620px);
    margin-top:-66px;
  }
}


/* ===========================================================================
   V4.3.260 — FOTO HERO LEBIH BESAR DAN LEBIH KE KANAN
   - Memperbesar foto hero desktop.
   - Menggeser komposisi sedikit ke kanan.
   - Tetap tanpa crop paksa.
   =========================================================================== */
@media (min-width:901px) {
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {
    width:min(88%,820px);
    margin:-58px -18px 0 auto;
  }
  body.rscm-about-page .rscm-about-editorial-right .rscm-about-device-media > img {
    object-position:54% center;
  }
}
@media (min-width:901px) and (max-width:1200px) {
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {
    width:min(86%,700px);
    margin:-56px -12px 0 auto;
  }
}


/* ===========================================================================
   V4.3.261 — FOTO HERO LEBIH BESAR LAGI DAN LEBIH KE ATAS
   - Memperbesar lagi foto hero desktop.
   - Mengangkat posisi foto lebih ke atas.
   - Tetap menjaga foto utuh tanpa crop paksa.
   =========================================================================== */
@media (min-width:901px) {
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {
    width:min(95%,900px);
    margin:-96px -28px 0 auto;
  }
  body.rscm-about-page .rscm-about-editorial-right .rscm-about-device-media > img {
    object-position:55% center;
  }
}
@media (min-width:901px) and (max-width:1200px) {
  body.rscm-about-page .rscm-about-editorial-right > .rscm-about-device-visual {
    width:min(92%,760px);
    margin:-84px -18px 0 auto;
  }
}