/* =====================================================================
   RSCM IoT — LANDING PAGE V10
   IoMT CENTRAL MONITORING · REFINED TO MATCH REFERENCE MORE CLOSELY
   ---------------------------------------------------------------------
   Full-file replacement.
   Fokus:
   - Navbar atas dibuat lebih dekat dengan referensi: logo kiri terpisah,
     panel navigasi putih floating di sisi kanan.
   - Layout hero-right card diperhalus agar proporsi, radius, dan spasi
     lebih dekat ke contoh.
   - Bed SVG V4 dan interaksi simulasi siderail tetap dipertahankan.
   ===================================================================== */

:root{
  --landing-deep:#007b84;
  --landing-teal:#04b8a6;
  --landing-cyan:#1abbcc;
  --landing-lime:#d5e022;
  --landing-navy:#13364c;
  --landing-ink:#183a4e;
  --landing-text:#607986;
  --landing-muted:#82969d;
  --landing-line:#d7e4e1;
  --landing-line-strong:#c6d8d4;
  --landing-green:#14b48a;
  --landing-amber:#eda019;
  --landing-red:#e35458;
}

.landing-page{
  min-width:0;
  color:var(--landing-ink);
  background:#f7faf9;
}

.landing-page ::selection{
  color:var(--landing-navy);
  background:rgba(26,187,204,.18);
}

html{
  scroll-padding-top:76px;
}

#tentang,
#fitur,
#alur-akses,
#kontak{
  scroll-margin-top:76px;
}

.landing-page .container{
  width:min(1400px,calc(100% - 48px));
  max-width:1400px;
}

/* ===== NAVBAR · LOCKED FIXED V14 =====
   Karakter target:
   - satu bar tipis horizontal;
   - background putih transparan, bukan card putih solid;
   - background hero tetap terlihat dari belakang;
   - logo di kiri, menu + claim + tombol Masuk di kanan;
   - underline Beranda kecil dan presisi.
   ================================================================ */

.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:9999 !important;

  height:64px;

  border:0;
  border-bottom:1px solid rgba(211,225,221,.52);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.95) 24%,
      rgba(255,255,255,.93) 50%,
      rgba(255,255,255,.92) 76%,
      rgba(255,255,255,.91) 100%
    );

  box-shadow:
    0 6px 18px rgba(22,62,70,.055);

  -webkit-backdrop-filter:blur(16px) saturate(1.04);
  backdrop-filter:blur(16px) saturate(1.04);
}

.nav-inner{
  height:100%;

  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:30px;

  padding:0;
}

/* Logo kiri compact seperti referensi. */
.site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:9px;

  min-width:0;
  margin:0;
}

.site-header .brand-mark{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border:1px solid rgba(0,123,132,.11);
  border-radius:9px;

  color:var(--landing-deep);

  background:rgba(248,252,251,.62);

  box-shadow:
    0 3px 8px rgba(18,64,72,.035),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.site-header .brand-mark .icon{
  width:19px;
  height:19px;
}

.site-header .brand-lockup strong{
  color:var(--landing-navy);
  font-size:18px;
  line-height:1;
}

.site-header .brand-lockup strong>span:last-child{
  color:#0c948e;
}

.site-header .brand-lockup small{
  margin-top:4px;

  color:#728790;

  font-size:7px;
  font-weight:700;
  line-height:1;
  letter-spacing:.13em;
}

/* Menu horizontal kanan. */
.public-nav{
  justify-self:end;

  display:flex;
  align-items:center;
  gap:27px;

  min-width:0;
  margin:0;
}

.public-nav>a{
  position:relative;

  display:inline-flex;
  align-items:center;

  min-height:64px;

  color:#536a75;

  font-size:10px;
  font-weight:680;
  line-height:1;

  white-space:nowrap;

  transition:color .18s ease;
}

.public-nav>a::after{
  content:"";

  position:absolute;
  left:0;
  right:100%;
  bottom:9px;

  height:2px;

  border-radius:999px;

  background:var(--landing-deep);

  transition:right .18s ease;
}

.public-nav>a:hover,
.public-nav>a[aria-current="page"]{
  color:var(--landing-deep);
}

.public-nav>a:hover::after,
.public-nav>a[aria-current="page"]::after{
  right:0;
}

/* Claim + tombol Masuk menyatu di navbar. */
.nav-actions{
  display:flex;
  align-items:center;
  gap:14px;

  min-width:0;
}

.nav-claim{
  width:102px;

  padding-left:13px;

  border-left:1px solid rgba(200,219,214,.72);

  color:#677e87;

  font-size:7.2px;
  font-weight:700;
  line-height:1.38;
}

.nav-actions .button-primary{
  min-width:82px;
  min-height:38px;

  justify-content:center;
  gap:7px;

  padding-inline:13px;

  border-radius:9px;

  font-size:10px;
  font-weight:760;
}

.nav-actions .button-primary .icon{
  width:13px;
  height:13px;
}

.mobile-menu{
  display:none;
}

.landing-page .button-primary{
  border:1px solid rgba(0,101,107,.10);

  color:#fff;

  background:
    linear-gradient(135deg,#087f83,#0ba29a);

  box-shadow:
    0 7px 15px rgba(0,123,132,.14),
    inset 0 1px 0 rgba(255,255,255,.20);

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

.landing-page .button-primary:hover{
  transform:translateY(-1px);

  box-shadow:
    0 9px 19px rgba(0,123,132,.18),
    inset 0 1px 0 rgba(255,255,255,.23);
}

/* ===== HERO BACKGROUND ===== */
.hero-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100svh;
  border-bottom:1px solid #e8efed;
  background:#fff;
}

.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url("../../assets/hero/hero-rscm.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center right;
  opacity:.80;
}

.hero-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.995) 18%,
      rgba(255,255,255,.96) 30%,
      rgba(255,255,255,.79) 41%,
      rgba(255,255,255,.49) 52%,
      rgba(248,252,251,.24) 64%,
      rgba(243,250,248,.08) 77%,
      rgba(243,250,248,0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.015) 47%,
      rgba(240,247,246,.10) 100%
    );
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,43fr) minmax(0,57fr);
  gap:48px;
  align-items:center;
  min-height:100svh;
  padding-top:92px;
  padding-bottom:38px;
}

/* ===== HERO COPY ===== */
.hero-copy{
  position:relative;
  z-index:4;
  min-width:0;
  transform:translateY(-4px);
}

.hero-iomt-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  padding:8px 12px;
  border:1px solid #cadeda;
  border-radius:10px;
  color:#087b82;
  background:rgba(255,255,255,.80);
  box-shadow:0 4px 12px rgba(33,73,80,.045);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.15em;
}

.hero-iomt-badge .status-dot,
.landing-page .status-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#19b79b;
  box-shadow:0 0 0 4px rgba(25,183,155,.10);
}

.hero-copy h1{
  max-width:620px;
  margin:30px 0 22px;
  color:var(--landing-navy);
  font-size:clamp(44px,3.65vw,56px);
  font-weight:760;
  line-height:1.02;
  letter-spacing:-.04em;
}

.hero-copy h1 em{
  color:#2e9998;
  font-style:normal;
}

.hero-description{
  max-width:515px;
  color:#5d7684;
  font-size:14px;
  line-height:1.82;
}

.hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.hero-actions .button{
  min-height:56px;
  padding-inline:22px;
  font-size:12px;
  font-weight:750;
  border-radius:13px;
}

.landing-page .button-quiet{
  min-height:56px;
  padding-inline:21px;
  border:1px solid #bfd4d0;
  border-radius:13px;
  color:#087b82;
  background:rgba(255,255,255,.84);
  box-shadow:
    0 5px 14px rgba(33,72,79,.052),
    inset 0 1px 0 rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.landing-page .button-quiet:hover{
  color:#006a71;
  border-color:#a9c7c2;
  background:rgba(255,255,255,.94);
}

.access-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  max-width:560px;
  margin-top:22px;
  color:#72868e;
  font-size:10px;
  line-height:1.55;
}

.access-note .icon{
  width:16px; height:16px; flex:0 0 16px; margin-top:1px; color:#07848a;
}

.hero-trust-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  max-width:640px;
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid rgba(188,208,204,.82);
}

.hero-trust-item{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:10px;
  align-items:start;
  min-width:0;
}

.hero-trust-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(0,123,132,.09);
  border-radius:12px;
  color:#087d84;
  background:rgba(246,251,250,.90);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.hero-trust-icon .icon{ width:18px; height:18px; }
.hero-trust-item>span:last-child{ display:flex; flex-direction:column; min-width:0; }
.hero-trust-item strong{ color:#24475a; font-size:10px; font-weight:800; line-height:1.32; }
.hero-trust-item small{ margin-top:3px; color:#7d9197; font-size:7.8px; line-height:1.46; }

/* ===== HERO MONITORING CARD ===== */
.hero-visual{
  position:relative;
  z-index:5;
  width:100%;
  max-width:692px;
  min-width:0;
  min-height:570px;
  justify-self:end;
  display:flex;
  flex-direction:column;
  padding:18px 18px 13px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(236,245,244,.53));
  box-shadow:
    0 22px 48px rgba(24,66,74,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  backdrop-filter:blur(18px) saturate(1.05);
}

.visual-topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:1px 4px 14px;
}

.visual-topline-copy{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.visual-topline .small-label{ color:#103d52; font-size:12px; font-weight:850; line-height:1.1; letter-spacing:.01em; }
.visual-subtitle{ color:#657d87; font-size:8.7px; line-height:1.35; }

.visual-topline .pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  color:#21636b;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:7px;
  font-weight:800;
}
.simulation-dot{ width:6px; height:6px; border-radius:50%; background:#1bb596; }

.hero-monitoring-summary{
  display:grid;
  grid-template-columns:110px 110px 110px minmax(0,1fr);
  gap:8px;
  padding:9px;
  border:1px solid rgba(255,255,255,.50);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(229,242,239,.24));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 4px 12px rgba(29,72,79,.025);
  -webkit-backdrop-filter:blur(13px);
  backdrop-filter:blur(13px);
}

.hero-summary-item,
.hero-summary-note{
  min-width:0;
  border:1px solid rgba(255,255,255,.60);
  border-radius:12px;
  background:rgba(255,255,255,.55);
  box-shadow:0 3px 9px rgba(32,71,78,.03), inset 0 1px 0 rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.hero-summary-item{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-height:67px;
  padding:10px 10px;
}

.hero-summary-icon{
  display:grid; place-items:center; width:34px; height:34px; border:1px solid transparent; border-radius:9px;
}
.hero-summary-icon .icon{ width:17px; height:17px; stroke-width:2.25; }
.hero-summary-icon.is-bed{ color:#087e84; background:#e4f4f1; border-color:#d6e9e5; }
.hero-summary-icon.is-reserve{ color:#6e7d16; background:#f3f7df; border-color:#e7ecc5; }
.hero-summary-icon.is-sensor{ color:#0b8d84; background:#e5f5f0; border-color:#d4ebe4; }

.hero-summary-copy{ display:flex; flex-direction:column; min-width:0; }
.hero-summary-copy strong{ color:#17394c; font-size:15px; font-weight:850; line-height:1; }
.hero-summary-copy small{ margin-top:4px; color:#71868e; font-size:6.1px; line-height:1.25; }

.hero-summary-note{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:9px 11px;
}

.summary-chart{
  display:grid; place-items:center; width:36px; height:36px; border:1px solid #d6ebe6; border-radius:9px; color:#0a8791; background:#e7f5f3;
}
.summary-chart .icon{ width:18px; height:18px; }
.hero-summary-note>span:last-child{ display:flex; flex-direction:column; min-width:0; }
.hero-summary-note strong{ color:#17394c; font-size:9.6px; font-weight:850; line-height:1.25; }
.hero-summary-note small{ margin-top:3px; color:#698089; font-size:6.4px; line-height:1.35; }

.hero-bed-stage{
  position:relative;
  flex:1 1 auto;
  min-height:342px;
  margin-top:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.52);
  border-radius:16px;
  background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.76) 0%,rgba(255,255,255,.32) 43%,rgba(224,240,237,.16) 74%,rgba(224,240,237,.08) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), inset 3px 3px 10px rgba(31,73,79,.025);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.hero-bed-stage::before,
.hero-bed-stage::after{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  z-index:0;
  transform:translate(-50%,-50%);
  border:1px solid rgba(40,158,154,.08);
  border-radius:50%;
  pointer-events:none;
}
.hero-bed-stage::before{ width:66%; height:68%; }
.hero-bed-stage::after{ width:82%; height:84%; }

.hero-bed{
  position:absolute;
  inset:6px -1% -4px -1%;
  z-index:1;
  width:auto;
}
.hero-bed .bed-illustration{ display:block; width:100%; height:100%; filter:drop-shadow(0 13px 13px rgba(35,79,88,.095)); }

.floating-status{
  position:absolute;
  z-index:5;
  top:11.8%;
  left:4.2%;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:184px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.66);
  border-radius:12px;
  background:rgba(255,255,255,.60);
  box-shadow:0 10px 22px rgba(34,71,78,.08);
  -webkit-backdrop-filter:blur(13px);
  backdrop-filter:blur(13px);
}

.float-icon{ display:grid; place-items:center; width:31px; height:31px; flex:0 0 31px; border:1px solid rgba(0,123,132,.08); border-radius:8px; color:#087d84; background:#e8f5f3; }
.float-icon .icon{ width:16px; height:16px; }
.floating-status strong{ display:block; color:#16384b; font-size:10px; font-weight:850; }
.floating-status small{ display:block; margin-top:2px; color:#7d9197; font-size:6px; }
.small-indicator{ width:8px; height:8px; margin-left:auto; flex:0 0 8px; border-radius:50%; background:#18b694; box-shadow:0 0 0 4px rgba(24,182,148,.12); }

.hero-stage-copy{
  position:absolute;
  z-index:4;
  right:17px;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:rgba(98,140,145,.52);
  font-size:8px;
  line-height:1.42;
  text-align:left;
}

.rail-preview-controls{
  position:relative;
  z-index:6;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding-top:10px;
}

.rail-preview-button{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:57px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.60);
  border-radius:12px;
  color:inherit;
  background:rgba(255,255,255,.58);
  box-shadow:0 5px 13px rgba(32,71,78,.05), inset 0 1px 0 rgba(255,255,255,.70);
  -webkit-backdrop-filter:blur(11px);
  backdrop-filter:blur(11px);
  text-align:left;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}

.rail-preview-button:hover{ border-color:rgba(255,255,255,.78); background:rgba(255,255,255,.67); }
.rail-preview-button:active,
.rail-preview-button.is-open{
  border-color:rgba(0,123,132,.19);
  background:rgba(232,246,243,.63);
  box-shadow: inset 3px 3px 7px rgba(28,71,76,.06), inset -3px -3px 7px rgba(255,255,255,.88);
}

.rail-preview-button>span:nth-child(2){ display:flex; flex-direction:column; min-width:0; }
.rail-preview-button small{ color:#71868e; font-size:6.4px; font-weight:800; line-height:1.2; letter-spacing:.12em; }
.rail-preview-button strong{ margin-top:2px; color:#087d84; font-size:10.5px; font-weight:850; }
.rail-preview-button .icon{ width:12px; height:12px; flex:0 0 12px; margin-left:auto; color:#718b91; }
.rail-preview-button.is-open .status-dot{ background:var(--landing-lime); box-shadow:0 0 0 4px rgba(213,224,34,.17); }
.rail-preview-button.is-open strong{ color:#687300; }

.visual-caption{ margin:8px 8px 0; color:#84979d; font-size:6.1px; line-height:1.4; text-align:center; }

/* ===== Below-hero sections keep stable ===== */
.scope-strip{ border:0; background:#f7faf9; }
.scope-inner{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1.2fr; align-items:center; margin-block:18px; padding:20px 24px; border:1px solid var(--landing-line); border-radius:14px; background:#fff; box-shadow:0 8px 21px rgba(35,72,78,.05); }
.scope-heading{ color:#758a91; font-size:12px; line-height:1.65; }
.scope-heading strong{ color:var(--landing-navy); font-weight:700; }
.scope-number{ padding-left:29px; border-left:1px solid var(--landing-line); }
.scope-number>strong{ color:var(--landing-deep); font-size:29px; font-weight:750; line-height:1.15; letter-spacing:-.04em; }
.scope-number:nth-child(3)>strong{ color:#758100; }
.scope-number:nth-child(4)>strong{ color:#078d9b; }
.scope-number>strong span{ margin-left:6px; color:#87999e; font-size:9px; font-weight:600; }
.scope-number p{ margin-top:4px; color:#819499; font-size:9px; }

.feature-section{ padding-top:68px; padding-bottom:65px; }
.section-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:45px; margin-bottom:29px; }
.section-heading h2{ margin-top:10px; color:var(--landing-navy); font-size:32px; font-weight:690; line-height:1.25; }
.section-heading>p{ width:320px; margin-bottom:4px; color:#748990; font-size:12px; line-height:1.8; }
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card{ position:relative; padding:25px 23px 20px; overflow:hidden; border:1px solid var(--landing-line); border-radius:15px; background:#fff; box-shadow:0 8px 22px rgba(35,72,78,.05); }
.feature-card::before{ content:""; position:absolute; top:-1px; left:20px; right:20px; height:3px; border-radius:0 0 6px 6px; background:var(--landing-teal); }
.feature-card:nth-child(2)::before{ background:var(--landing-cyan); }
.feature-card:nth-child(3)::before{ background:var(--landing-lime); }
.feature-card .feature-icon{ border:1px solid rgba(0,123,132,.08); border-radius:9px; background:#f2f8f6; }
.feature-card h3{ margin:20px 0 10px; color:var(--landing-navy); font-size:18px; font-weight:680; }
.feature-card p{ min-height:68px; color:#74898e; font-size:12px; line-height:1.8; }
.feature-number{ position:absolute; top:27px; right:24px; color:#aebfbb; font-size:10px; font-weight:700; }
.feature-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:17px; padding-top:15px; border-top:1px solid #edf2f0; color:#6e848a; font-size:9px; font-weight:650; }

.access-section{ display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:39px 44px; border:1px solid var(--landing-line); border-radius:17px; background:#fff; box-shadow:0 9px 24px rgba(35,72,78,.055); }
.access-intro h2{ margin-top:12px; color:var(--landing-navy); font-size:30px; font-weight:680; line-height:1.3; }
.access-intro>p{ max-width:355px; margin:15px 0 21px; color:#748990; font-size:12px; line-height:1.85; }
.access-steps{ display:flex; flex-direction:column; gap:22px; }
.access-step{ position:relative; display:flex; gap:15px; }
.access-step>span{ position:relative; z-index:1; display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border:1px solid var(--landing-line); border-radius:8px; color:var(--landing-deep); background:#f7faf9; font-size:11px; font-weight:750; }
.access-step:not(:last-child)::after{ content:""; position:absolute; left:15.5px; top:31px; width:1px; height:calc(100% - 3px); background:#d6e4e0; }
.access-step h3{ margin:5px 0 6px; color:var(--landing-navy); font-size:14px; font-weight:680; }
.access-step p{ max-width:340px; color:#7b9096; font-size:11px; line-height:1.75; }

.bottom-cta{ display:flex; align-items:center; justify-content:space-between; gap:38px; margin-top:34px; margin-bottom:23px; padding:29px 33px; border:1px solid var(--landing-line); border-left:4px solid var(--landing-deep); border-radius:15px; background:#fff; box-shadow:0 8px 22px rgba(35,72,78,.055); }
.bottom-cta h2{ margin-top:9px; color:var(--landing-navy); font-size:27px; font-weight:680; }
.bottom-cta p{ margin-top:8px; color:#748990; font-size:12px; }
.scope-disclaimer{ display:flex; align-items:flex-start; gap:8px; margin-bottom:33px; padding:11px 13px; border:1px solid var(--landing-line); border-radius:9px; color:#7b8f94; background:#f8faf9; font-size:9px; }
.site-footer{ border-top:1px solid #e7eeec; background:#f7faf9; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:22px; padding-block:21px; }
.footer-inner p{ color:#84969b; font-size:10px; }
.footer-inner>a:last-child{ color:var(--landing-deep); font-size:11px; font-weight:650; }

.landing-page a:focus-visible,
.landing-page button:focus-visible{ outline:3px solid rgba(26,187,203,.28); outline-offset:3px; }

/* ===== RESPONSIVE ===== */
@media(min-width:1600px){
  .landing-page .container{ width:min(1430px,calc(100% - 56px)); max-width:1430px; }
  .hero-grid{ gap:56px; }
  .hero-copy h1{ font-size:58px; }
  .hero-visual{ max-width:715px; min-height:586px; }
}

@media(max-width:1200px){
  .nav-inner{
    gap:20px;
  }

  .public-nav{
    gap:21px;
  }

  .nav-claim{
    display:none;
  }
  .hero-grid{ grid-template-columns:minmax(0,44fr) minmax(0,56fr); gap:28px; }
  .hero-copy h1{ font-size:44px; }
  .hero-description{ font-size:15px; }
  .hero-visual{ max-width:620px; min-height:520px; }
  .hero-monitoring-summary{ grid-template-columns:repeat(3,1fr); }
  .hero-summary-note{ grid-column:1/-1; min-height:49px; }
  .hero-bed-stage{ min-height:266px; }
}

@media(max-width:900px){
  .site-header{
    height:60px;
  }

  .nav-inner{
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
  }

  .site-header .brand-mark{
    width:34px;
    height:34px;
  }

  .public-nav{
    display:none;
    position:absolute;
    top:60px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    margin:0;
    padding:18px 24px 20px;
    border:1px solid var(--landing-line);
    border-radius:16px;
    background:rgba(255,255,255,.97);
    box-shadow:0 12px 25px rgba(34,71,78,.08);
  }
  .public-nav.is-open{ display:flex; }
  .public-nav>a::after{ display:none; }
  .mobile-menu{ display:inline-flex; }
  .hero-section{ min-height:auto; }
  .hero-grid{ grid-template-columns:1fr; gap:35px; min-height:0; padding-top:82px; padding-bottom:42px; }
  .hero-section::before{ background-position:67% center; opacity:.42; }
  .hero-section::after{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.89) 47%,rgba(245,250,248,.62)); }
  .hero-copy{ transform:none; }
  .hero-copy h1{ max-width:590px; font-size:44px; }
  .hero-description{ max-width:580px; }
  .hero-trust-grid{ max-width:650px; }
  .hero-visual{ width:100%; max-width:700px; min-height:545px; margin:auto; }
  .hero-bed-stage{ min-height:285px; }
  .scope-inner{ grid-template-columns:repeat(3,1fr); gap:14px; padding:19px; }
  .scope-heading{ grid-column:1/-1; }
  .section-heading{ display:block; }
  .section-heading>p{ width:auto; max-width:460px; margin-top:16px; }
  .feature-grid{ grid-template-columns:1fr; }
  .feature-card p{ min-height:0; }
  .access-section{ grid-template-columns:1fr; gap:32px; padding:31px; }
  .bottom-cta{ flex-direction:column; align-items:flex-start; }
}

@media(max-width:600px){
  .landing-page .container{
    width:min(100% - 28px,1400px);
  }

  .nav-inner{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
  }

  .public-nav{
    grid-column:1 / -1;
  }

  .nav-actions{
    gap:8px;
  }

  .nav-actions .button-primary{
    min-width:78px;
    min-height:38px;
    padding-inline:11px;
  }

  .hero-grid{
    gap:29px;
    padding-top:80px;
  }
  .hero-iomt-badge{ padding:7px 10px; font-size:7.5px; }
  .hero-copy h1{ margin-top:21px; font-size:35px; }
  .hero-description{ font-size:12px; line-height:1.75; }
  .hero-actions{ align-items:stretch; }
  .hero-actions .button{ flex:1 1 190px; justify-content:center; }
  .hero-trust-grid{ grid-template-columns:1fr; gap:11px; margin-top:24px; }
  .hero-visual{ max-width:100%; min-height:488px; padding:12px 11px 10px; border-radius:16px; }
  .visual-topline{ padding-bottom:8px; }
  .visual-topline .small-label{ font-size:9.5px; }
  .visual-subtitle{ font-size:7.5px; }
  .hero-monitoring-summary{ grid-template-columns:repeat(3,1fr); padding:6px; gap:5px; }
  .hero-summary-item{ grid-template-columns:1fr; justify-items:center; gap:4px; min-height:61px; padding:6px 4px; text-align:center; }
  .hero-summary-icon{ width:27px; height:27px; }
  .hero-summary-icon .icon{ width:14px; height:14px; }
  .hero-summary-copy strong{ font-size:11px; }
  .hero-summary-copy small{ font-size:5.5px; }
  .hero-summary-note{ grid-column:1/-1; grid-template-columns:31px 1fr; padding:7px 8px; }
  .summary-chart{ width:29px; height:29px; }
  .hero-bed-stage{ min-height:245px; }
  .hero-bed{ inset:9px -7% -2px -7%; }
  .floating-status{ top:10%; left:2%; padding:7px 8px; }
  .rail-preview-controls{ gap:6px; padding-top:7px; }
  .rail-preview-button{ min-height:47px; padding:7px 8px; }
  .rail-preview-button small{ font-size:5.8px; }
  .rail-preview-button strong{ font-size:9px; }
  .visual-caption{ font-size:5.8px; }
  .scope-inner{ grid-template-columns:1fr; gap:0; }
  .scope-heading{ margin-bottom:12px; }
  .scope-number{ padding:10px 0; border-left:0; border-top:1px solid var(--landing-line); }
  .feature-section{ padding-block:48px; }
  .section-heading h2{ font-size:27px; }
  .access-section{ padding:25px 22px; }
  .bottom-cta{ padding:23px; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

@media(max-width:390px){
  .hero-copy h1{ font-size:32px; }
  .hero-visual{ min-height:455px; }
  .hero-bed-stage{ min-height:225px; }
  .hero-summary-note small{ display:none; }
  .rail-preview-button .icon{ display:none; }
}

@media(prefers-reduced-motion:reduce){
  .landing-page .button-primary,
  .rail-preview-button{ transition:none!important; }
}

/* ================================================================
   NAVBAR HARD LOCK V14
   Rule final sengaja ditempatkan paling bawah agar tidak dapat
   dioverride oleh rule lain pada index.css maupun media query.
   ================================================================ */
.landing-page > .site-header{
  position:fixed !important;
  inset:0 0 auto 0 !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;

  transform:none !important;
  translate:none !important;

  z-index:99999 !important;

  pointer-events:auto !important;
}

@media(max-width:900px){
  .landing-page > .site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
  }
}

@media(max-width:600px){
  .landing-page > .site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
  }
}

/* ========================================================================
   V4.3.55 — PUBLIC LANDING / INSTITUTIONAL CLEAN DESIGN
   CSS presentation only. Existing bed geometry and rail animation are intact.
   Primary: Dashboard teal #46b6ad → #218b85. Clinical demo is not live data.
   ======================================================================== */
body.landing-page {
  --landing-deep:#218b85;
  --landing-teal:#218b85;
  --landing-navy:#17384c;
  --landing-ink:#17384c;
  --landing-text:#536e7e;
  --landing-muted:#6a8190;
  --landing-line:#e1eaf0;
  --landing-shadow:0 3px 9px rgba(54,89,117,.035),0 14px 28px rgba(54,89,117,.08),0 26px 45px rgba(54,89,117,.045),inset 0 1px 0 #fff;
  background:#fff;
  color:var(--landing-ink);
}
body.landing-page .container {
  width:min(1250px,calc(100% - 72px));
  max-width:1250px;
}
body.landing-page > .site-header {
  height:74px;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid #e4ebf0;
  box-shadow:0 3px 11px rgba(37,72,94,.035);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.landing-page .nav-inner {gap:26px;}
body.landing-page .public-nav {gap:27px;}
body.landing-page .public-nav > a {
  min-height:74px;
  font-size:16px;
  font-weight:600;
  color:#506b7b;
}
body.landing-page .public-nav > a[aria-current="page"],
body.landing-page .public-nav > a:hover {color:#218b85;}
body.landing-page .public-nav > a::after {bottom:13px;background:#218b85;}
body.landing-page .site-header .brand-mark {
  background:#e8f5f2;
  color:#218b85;
  border:1px solid #d9ebe6;
  box-shadow:none;
}
body.landing-page .site-header .brand-lockup strong {font-size:21px;}
body.landing-page .site-header .brand-lockup small {font-size:9px;letter-spacing:.06em;}
body.landing-page .nav-claim {display:none;}
body.landing-page .nav-actions .button-primary {min-width:108px;min-height:42px;padding:9px 15px;font-size:13px;}
body.landing-page .button-primary {
  background:linear-gradient(180deg,#46b6ad 0%,#218b85 100%);
  border:1px solid #2f9f95;
  color:#fff;
  border-radius:10px;
  box-shadow:0 6px 13px rgba(31,129,121,.15),inset 0 1px 0 rgba(255,255,255,.28);
  font-weight:700;
}
body.landing-page .button-primary:hover {
  background:linear-gradient(180deg,#3baaa2 0%,#197e78 100%);
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(31,129,121,.18),inset 0 1px 0 rgba(255,255,255,.25);
}
body.landing-page .hero-section {
  min-height:0;
  overflow:visible;
  border-bottom:1px solid #e8eef2;
  background:#fff;
}
body.landing-page .hero-section::before,
body.landing-page .hero-section::after {display:none;}
body.landing-page .hero-grid {
  min-height:calc(100svh - 10px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(38px,4vw,66px);
  padding-top:116px;
  padding-bottom:58px;
  align-items:center;
}
body.landing-page .hero-copy {transform:none;}
body.landing-page .hero-kicker,
body.landing-page .section-kicker,
body.landing-page .login-story-kicker {
  display:block;
  margin:0;
  color:#218b85;
  font-size:12px;
  font-weight:750;
  line-height:1.4;
  letter-spacing:.055em;
}
body.landing-page .hero-copy h1 {
  max-width:600px;
  margin:18px 0 20px;
  font-size:clamp(40px,3.45vw,55px);
  line-height:1.11;
  letter-spacing:-.034em;
  font-weight:760;
  color:#17384c;
}
body.landing-page .hero-copy h1 em {color:#218b85;font-style:normal;}
body.landing-page .hero-description {
  max-width:515px;
  font-size:15px;
  line-height:1.8;
  color:#5b7384;
}
body.landing-page .hero-actions {gap:12px;margin-top:29px;}
body.landing-page .hero-actions .button {min-height:47px;border-radius:10px;padding:11px 18px;font-size:13.5px;}
body.landing-page .button-quiet {
  background:#fff;
  color:#247f7b;
  border:1px solid #cbdedb;
  box-shadow:0 2px 8px rgba(43,84,111,.035);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.landing-page .button-quiet:hover {background:#f4faf8;border-color:#b8d7d1;color:#136d67;}
body.landing-page .hero-visual {
  width:100%;
  max-width:625px;
  min-height:0;
  padding:21px 22px 17px;
  border:1px solid #e2ebf0;
  border-radius:19px;
  background:#fff;
  box-shadow:var(--landing-shadow);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.landing-page .visual-topline {align-items:center;gap:15px;padding:0 1px 17px;}
body.landing-page .visual-topline .small-label {font-size:17px;font-weight:740;line-height:1.28;color:#17384c;letter-spacing:-.012em;}
body.landing-page .visual-subtitle {font-size:11.5px;line-height:1.45;color:#6d8292;}
body.landing-page .simulation-label {
  flex:0 0 auto;
  padding:6px 10px;
  font-size:10px;
  font-weight:750;
  letter-spacing:.045em;
  border-radius:7px;
  border:1px solid #dce7ed;
  background:#f4f7fa;
  color:#657f90;
}
body.landing-page .hero-bed-stage {
  flex:none;
  height:clamp(300px,30vw,366px);
  min-height:0;
  margin-top:0;
  border:1px solid #edf1f4;
  border-radius:13px;
  background:#fbfcfd;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.landing-page .hero-bed-stage::before,
body.landing-page .hero-bed-stage::after {display:none;}
body.landing-page .hero-bed {inset:0 -1% -2px -1%;}
body.landing-page .hero-bed .bed-illustration {filter:drop-shadow(0 6px 9px rgba(46,79,108,.075));}
body.landing-page .rail-preview-controls {gap:12px;padding-top:15px;}
body.landing-page .rail-preview-button {
  min-height:71px;
  padding:12px 14px;
  gap:11px;
  border:1px solid #e0e9ee;
  border-radius:11px;
  background:#fff;
  box-shadow:0 3px 9px rgba(51,83,111,.035);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.landing-page .rail-preview-button:hover {background:#fbfdfd;border-color:#cbdedb;}
body.landing-page .rail-preview-button:active,
body.landing-page .rail-preview-button.is-open {background:#fff;border-color:#f0b4bd;box-shadow:0 3px 9px rgba(51,83,111,.04);}
body.landing-page .rail-preview-button small {font-size:10px;letter-spacing:.035em;line-height:1.3;color:#738999;}
body.landing-page .rail-preview-button strong {font-size:15px;line-height:1.35;font-weight:750;color:#457000;}
body.landing-page .rail-preview-button .status-dot {background:#cdd229;box-shadow:0 0 0 3px rgba(205,210,41,.17);}
body.landing-page .rail-preview-button.is-open .status-dot {background:#e40037;box-shadow:0 0 0 3px rgba(228,0,55,.10);}
body.landing-page .rail-preview-button.is-open strong {color:#bd1d40;}
body.landing-page .visual-caption {font-size:11px;line-height:1.4;margin:12px 6px 0;color:#7a8f9e;}
body.landing-page .scope-strip {background:#fff;border:0;}
body.landing-page .scope-inner {
  display:grid;
  grid-template-columns:1.3fr repeat(3,minmax(0,1fr));
  gap:0;
  align-items:center;
  margin-block:25px 0;
  padding:24px 27px;
  border:1px solid #e1eaf0;
  border-radius:16px;
  background:#fff;
  box-shadow:var(--landing-shadow);
}
body.landing-page .scope-heading {font-size:14px;font-weight:710;color:#344f61;}
body.landing-page .scope-number {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 14px;
  border-left:1px solid #e1eaf0;
  text-align:center;
  gap:2px;
}
body.landing-page .scope-number strong {font-size:25px;font-weight:760;line-height:1.13;letter-spacing:-.025em;color:#218b85;}
body.landing-page .scope-number span {font-size:11px;color:#687f90;line-height:1.3;}
body.landing-page .feature-section {padding-top:72px;padding-bottom:70px;}
body.landing-page .section-heading {align-items:end;gap:32px;margin-bottom:26px;}
body.landing-page .section-heading h2 {margin-top:10px;font-size:clamp(25px,2.5vw,32px);line-height:1.26;letter-spacing:-.025em;font-weight:730;}
body.landing-page .section-heading > p {width:min(355px,40%);font-size:13px;line-height:1.7;color:#687f90;}
body.landing-page .feature-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;}
body.landing-page .feature-card {
  min-height:230px;
  padding:26px 23px;
  border:1px solid #e1eaf0;
  border-radius:15px;
  background:#fff;
  box-shadow:var(--landing-shadow);
}
body.landing-page .feature-card::before {display:none;}
body.landing-page .feature-card .feature-icon {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border-radius:10px;
  background:#eaf6f3;
  border:1px solid #d9ebe6;
  color:#218b85;
}
body.landing-page .feature-card .feature-icon .icon {width:22px;height:22px;}
body.landing-page .feature-card h3 {margin:21px 0 9px;font-size:18px;line-height:1.35;color:#17384c;font-weight:725;}
body.landing-page .feature-card p {min-height:0;font-size:13.2px;line-height:1.7;color:#61798a;}
body.landing-page .access-section {
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:55px;
  padding:34px 38px;
  border:1px solid #e1eaf0;
  border-radius:17px;
  background:#fff;
  box-shadow:var(--landing-shadow);
}
body.landing-page .access-intro h2 {font-size:28px;font-weight:740;line-height:1.25;}
body.landing-page .access-intro > p:not(.section-kicker) {max-width:395px;margin:15px 0 18px;font-size:13px;line-height:1.75;color:#627c8b;}
body.landing-page .text-link {font-size:13px;font-weight:710;color:#218b85;}
body.landing-page .access-steps {gap:22px;}
body.landing-page .access-step {gap:15px;}
body.landing-page .access-step > span {width:34px;height:34px;flex-basis:34px;border-radius:9px;color:#218b85;border:1px solid #d7eae5;background:#eaf6f3;font-size:11px;}
body.landing-page .access-step:not(:last-child)::after {left:16px;background:#dfebea;}
body.landing-page .access-step h3 {font-size:14px;margin:2px 0 5px;}
body.landing-page .access-step p {max-width:none;font-size:12px;line-height:1.6;color:#687f90;}
body.landing-page .bottom-cta {
  margin-top:35px;
  margin-bottom:22px;
  padding:26px 31px;
  border:1px solid #e1eaf0;
  border-radius:15px;
  box-shadow:var(--landing-shadow);
  background:#fff;
}
body.landing-page .bottom-cta h2 {font-size:22px;margin:0;font-weight:730;}
body.landing-page .bottom-cta p {font-size:13px;line-height:1.6;margin-top:7px;color:#6b8291;}
body.landing-page .bottom-cta .button {min-height:43px;padding:10px 17px;font-size:13px;}
body.landing-page .scope-disclaimer {
  margin-bottom:32px;
  padding:0;
  border:0;
  background:#fff;
  color:#778a99;
  font-size:11px;
  line-height:1.55;
}
body.landing-page .scope-disclaimer .icon {width:16px;height:16px;flex:0 0 16px;color:#738897;}
body.landing-page .site-footer {background:#fff;border-top:1px solid #e1eaf0;}
body.landing-page .footer-inner {padding-block:23px;}
body.landing-page .footer-inner p {font-size:11px;color:#778998;}
body.landing-page .footer-inner > a:last-child {font-size:12px;}
body.landing-page a:focus-visible,body.landing-page button:focus-visible {outline:2px solid #218b85;outline-offset:3px;}
@media (max-width:1170px) {
  body.landing-page .hero-grid {gap:28px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
  body.landing-page .hero-copy h1 {font-size:clamp(35px,3.7vw,45px);}
  body.landing-page .hero-description {font-size:14px;}
  body.landing-page .hero-bed-stage {height:290px;}
  body.landing-page .hero-visual {padding:18px;}
  body.landing-page .public-nav {gap:19px;}
  body.landing-page .public-nav > a {font-size:12px;}
}
@media (max-width:950px) {
  body.landing-page > .site-header {height:65px;}
  body.landing-page .container {width:calc(100% - 46px);}
  body.landing-page .public-nav {
    display:none;
    position:absolute;
    top:65px;
    left:23px;
    right:23px;
    gap:0;
    flex-direction:column;
    align-items:stretch;
    padding:9px 13px;
    border:1px solid #e1eaf0;
    border-radius:12px;
    background:#fff;
    box-shadow:var(--landing-shadow);
  }
  body.landing-page .public-nav.is-open {display:flex;}
  body.landing-page .public-nav > a {min-height:43px;display:flex;font-size:13px;padding:9px 10px;}
  body.landing-page .public-nav > a::after {display:none;}
  body.landing-page .mobile-menu {display:inline-flex;}
  body.landing-page .hero-grid {grid-template-columns:minmax(0,1fr);gap:34px;min-height:0;padding-top:108px;padding-bottom:50px;}
  body.landing-page .hero-copy h1 {font-size:clamp(38px,5vw,49px);max-width:690px;}
  body.landing-page .hero-description {max-width:660px;}
  body.landing-page .hero-visual {max-width:660px;justify-self:start;}
  body.landing-page .hero-bed-stage {height:350px;}
  body.landing-page .feature-grid {grid-template-columns:1fr;gap:13px;}
  body.landing-page .feature-card {min-height:0;padding:23px;}
  body.landing-page .section-heading {display:block;}
  body.landing-page .section-heading > p {width:auto;max-width:690px;margin-top:12px;}
  body.landing-page .access-section {grid-template-columns:1fr;gap:29px;}
}
@media (max-width:600px) {
  body.landing-page .container {width:calc(100% - 32px);}
  body.landing-page > .site-header {height:62px;}
  body.landing-page .public-nav {top:62px;left:16px;right:16px;}
  body.landing-page .nav-actions {gap:9px;}
  body.landing-page .nav-actions .button-primary {min-height:39px;min-width:75px;padding:8px 10px;font-size:12px;}
  body.landing-page .site-header .brand-lockup strong {font-size:19px;}
  body.landing-page .site-header .brand-lockup small {font-size:7.8px;}
  body.landing-page .hero-grid {padding-top:99px;padding-bottom:33px;gap:29px;}
  body.landing-page .hero-copy h1 {font-size:clamp(31px,7vw,39px);margin:14px 0 16px;line-height:1.16;}
  body.landing-page .hero-description {font-size:14px;line-height:1.7;}
  body.landing-page .hero-actions {gap:9px;margin-top:23px;}
  body.landing-page .hero-actions .button {flex:1 1 150px;min-height:45px;padding:10px 12px;font-size:14px;}
  body.landing-page .hero-visual {max-width:100%;padding:13px;border-radius:15px;}
  body.landing-page .visual-topline {padding-bottom:13px;}
  body.landing-page .visual-topline .small-label {font-size:14px;}
  body.landing-page .visual-subtitle {font-size:10.5px;}
  body.landing-page .simulation-label {font-size:8px;padding:5px 7px;}
  body.landing-page .hero-bed-stage {height:clamp(205px,58vw,282px);border-radius:10px;}
  body.landing-page .hero-bed {inset:0 -3%;}
  body.landing-page .rail-preview-controls {gap:8px;padding-top:11px;}
  body.landing-page .rail-preview-button {min-height:60px;gap:7px;padding:9px 10px;border-radius:9px;}
  body.landing-page .rail-preview-button small {font-size:9px;}
  body.landing-page .rail-preview-button strong {font-size:13.2px;}
  body.landing-page .rail-preview-button .icon {display:none;}
  body.landing-page .visual-caption {font-size:10.5px;}
  body.landing-page .scope-inner {grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:20px 10px;}
  body.landing-page .scope-heading {grid-column:1/-1;text-align:center;margin:0 0 13px;font-size:13px;}
  body.landing-page .scope-number {min-width:0;padding:0 8px;}
  body.landing-page .scope-number:nth-child(2) {border-left:0;}
  body.landing-page .scope-number strong {font-size:23px;}
  body.landing-page .scope-number span {font-size:10px;}
  body.landing-page .feature-section {padding-top:49px;padding-bottom:45px;}
  body.landing-page .section-heading h2 {font-size:25px;}
  body.landing-page .feature-card p {font-size:12.5px;}
  body.landing-page .access-section {padding:24px 20px;border-radius:14px;}
  body.landing-page .access-intro h2 {font-size:25px;}
  body.landing-page .bottom-cta {padding:22px 20px;align-items:flex-start;}
  body.landing-page .bottom-cta .button {width:100%;}
  body.landing-page .footer-inner {gap:15px;}
}
@media (prefers-reduced-motion:reduce) {
  body.landing-page .rail-preview-button,body.landing-page .button-primary {transition:none!important;}
}


/* =======================================================================
   RSCM IoMT V4.3.56 — DUAL INSTITUTIONAL BRAND
   Two actual local assets, matching the Dashboard sidebar identities.
   Visual only; no auth/monitoring/JavaScript changes.
   ======================================================================= */
.rscm-public-identities {
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
  gap:13px;
  white-space:nowrap;
}
.rscm-public-identities .rscm-public-brand-link {
  display:inline-flex;
  align-items:center;
  min-width:0;
  flex:0 1 auto;
  gap:8px;
  margin:0;
  text-decoration:none;
}
.rscm-public-identities .rscm-public-logo {
  display:block;
  width:36px;
  height:36px;
  object-fit:contain;
  flex:0 0 36px;
  background:transparent;
  box-shadow:none;
  border:0;
}
.rscm-public-identities .brand-lockup {
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:0;
}
.rscm-public-identities .brand-lockup strong {
  display:flex;
  align-items:center;
  gap:5px;
  color:#17384c;
  font-size:18px;
  font-weight:760;
  line-height:1.14;
  letter-spacing:-.032em;
}
.rscm-public-identities .brand-lockup strong > span:last-child {
  color:#218b85;
  font-size:17px;
  font-weight:700;
}
.rscm-public-identities .brand-lockup .brand-divider {
  width:1px;
  height:16px;
  background:#ccd8df;
  flex:0 0 1px;
}
.rscm-public-identities .brand-lockup small {
  display:block;
  margin-top:3px;
  color:#6e8190;
  font-size:7.2px;
  font-weight:720;
  letter-spacing:.07em;
  line-height:1.25;
}
.rscm-public-identities .rscm-public-identity-divider {
  display:block;
  height:28px;
  width:1px;
  flex:0 0 1px;
  background:#d7e0e4;
}
.rscm-public-identities .rscm-public-institution-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 1 150px;
  min-width:0;
  width:150px;
  max-width:150px;
}
.rscm-public-identities .rscm-public-institution-mark img {
  display:block;
  width:100%;
  max-width:150px;
  height:auto;
  max-height:42px;
  object-fit:contain;
  border:0;
  box-shadow:none;
  background:none;
}
.rscm-public-identities .rscm-public-brand-link:focus-visible {
  outline:2px solid #218b85;
  outline-offset:4px;
  border-radius:6px;
}
@media (max-width:1200px) {
  .rscm-public-identities {gap:10px;}
  .rscm-public-identities .rscm-public-logo {width:32px;height:32px;flex-basis:32px;}
  .rscm-public-identities .brand-lockup strong {font-size:16px;}
  .rscm-public-identities .brand-lockup strong > span:last-child {font-size:15.5px;}
  .rscm-public-identities .brand-lockup small {font-size:6.6px;}
  .rscm-public-identities .rscm-public-institution-mark {max-width:126px;flex-basis:126px;width:126px;}
}
@media (max-width:600px) {
  .rscm-public-identities {gap:6px;}
  .rscm-public-identities .rscm-public-brand-link {gap:4px;}
  .rscm-public-identities .rscm-public-logo {width:28px;height:28px;flex-basis:28px;}
  .rscm-public-identities .brand-lockup strong {gap:3px;font-size:13px;letter-spacing:-.035em;}
  .rscm-public-identities .brand-lockup strong > span:last-child {font-size:12.5px;}
  .rscm-public-identities .brand-lockup .brand-divider {height:11px;}
  .rscm-public-identities .brand-lockup small {font-size:5.1px;letter-spacing:.025em;}
  .rscm-public-identities .rscm-public-identity-divider {height:21px;}
  .rscm-public-identities .rscm-public-institution-mark {max-width:82px;flex-basis:82px;width:82px;}
}
@media (max-width:370px) {
  .rscm-public-identities {gap:4px;}
  .rscm-public-identities .rscm-public-logo {width:25px;height:25px;flex-basis:25px;}
  .rscm-public-identities .brand-lockup strong {font-size:11px;gap:2px;}
  .rscm-public-identities .brand-lockup strong > span:last-child {font-size:11px;}
  .rscm-public-identities .brand-lockup .brand-divider {height:9px;}
  .rscm-public-identities .brand-lockup small {font-size:4.5px;}
  .rscm-public-identities .rscm-public-institution-mark {max-width:64px;flex-basis:64px;width:64px;}
}


/* Beranda: keep both identities and access/navigation controls on one row. */
body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong {font-size:18px;}
body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong > span:last-child {font-size:17px;}
body.landing-page .site-header .rscm-public-brand-link .brand-lockup small {font-size:7.2px;}
@media (max-width:1200px) {
  body.landing-page .nav-inner {gap:13px;}
  body.landing-page .public-nav {gap:17px;}
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong {font-size:16px;}
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong > span:last-child {font-size:15.5px;}
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup small {font-size:6.6px;}
}
@media (max-width:950px) {
  body.landing-page .nav-inner {gap:11px;}
}
@media (max-width:600px) {
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong {font-size:13px;}
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong > span:last-child {font-size:12.5px;}
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup small {font-size:5.1px;}
}
@media (max-width:370px) {
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong {font-size:11px;}
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong > span:last-child {font-size:11px;}
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup small {font-size:4.5px;}
  body.landing-page .nav-inner {gap:7px;}
  body.landing-page .nav-actions {gap:5px;}
  body.landing-page .nav-actions .button-primary {min-width:62px;padding-inline:6px;font-size:11px;}
  body.landing-page .nav-actions .mobile-menu {width:32px;padding:5px;}
}


/* =====================================================================
   RSCM IoMT V4.3.58 — BERANDA DESKTOP SIDE GUTTER 40px
   Scoped to public index.html. Preserves the tablet/mobile baseline.
   80px total width reduction = 40px at each viewport edge.
   ===================================================================== */
@media (min-width:951px) {
  body.landing-page .container {
    width:calc(100% - 80px);
    max-width:none;
  }
}


/* ======================================================================
   RSCM IoMT V4.3.59 — COMPACT HERO + INSTITUTIONAL FOOTER
   Scope: public Beranda ONLY. Based on verified V4.3.58.
   Inline SVG, rail simulator, Auth/Login, sidebar and backend untouched.
   ====================================================================== */

/* Smaller, more deliberate hero copy; preserve the approved headline. */
body.landing-page .hero-copy {
  max-width:540px;
}
body.landing-page .hero-kicker {
  font-size:10.5px;
  letter-spacing:.065em;
  font-weight:750;
}
body.landing-page .hero-copy h1 {
  max-width:540px;
  margin:16px 0 18px;
  font-size:clamp(34px,2.8vw,44px);
  line-height:1.13;
  letter-spacing:-.032em;
  font-weight:750;
}
body.landing-page .hero-description {
  max-width:475px;
  font-size:13.2px;
  line-height:1.78;
}
body.landing-page .hero-actions {
  gap:10px;
  margin-top:23px;
}
body.landing-page .hero-actions .button {
  min-height:44px;
  padding:10px 17px;
  border-radius:10px;
  font-size:12.5px;
  line-height:1.35;
  font-weight:700;
}
body.landing-page .hero-actions .button .icon {
  width:16px;
  height:16px;
}
body.landing-page #fitur {scroll-margin-top:92px;}
body.landing-page #alur-akses {scroll-margin-top:92px;}

/* Bumil Ku inspired: teal tonal palette, white text, subtle inset highlights,
   restrained layered shadows, formal column dividers and accessible links. */
body.landing-page .rscm-home-footer {
  position:relative;
  isolation:isolate;
  width:100%;
  border-top:1px solid rgba(255,255,255,.20);
  color:#fff;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.075),transparent 64%),
    linear-gradient(180deg,#1aa59e 0%,#13958f 44%,#0d817b 76%,#0a746f 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.15),inset 0 -18px 28px rgba(0,70,65,.12);
}
body.landing-page .rscm-home-footer-shell {
  padding-block:34px 32px;
}
body.landing-page .rscm-home-footer-card {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(208,255,249,.20);
  border-radius:19px;
  background:
    radial-gradient(ellipse at 48% -12%,rgba(255,255,255,.11),transparent 66%),
    linear-gradient(180deg,#1aa69e 0%,#129a93 30%,#0b8b85 62%,#087b76 100%);
  box-shadow:0 16px 34px rgba(1,65,62,.13),inset 0 2px 0 rgba(190,255,247,.30),inset 0 -17px 28px rgba(0,57,53,.13);
}
body.landing-page .rscm-home-footer-main {
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(0,.68fr) minmax(0,1fr);
  gap:0;
  align-items:stretch;
  padding:35px 38px 34px;
}
body.landing-page .rscm-home-footer-brand {
  min-width:0;
  padding-right:28px;
}
body.landing-page .rscm-home-footer-brandline {
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}
body.landing-page .rscm-home-footer-brand-primary {
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-width:0;
  text-decoration:none;
}
body.landing-page .rscm-home-footer-logo-frame {
  display:grid;
  place-items:center;
  width:49px;
  height:49px;
  flex:0 0 49px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.34);
  background:#fff;
  box-shadow:0 5px 13px rgba(0,70,65,.12);
}
body.landing-page .rscm-home-footer-logo-frame img {
  display:block;
  width:43px;
  height:43px;
  object-fit:contain;
}
body.landing-page .rscm-home-footer-brand-text {
  display:flex;
  flex-direction:column;
  min-width:0;
}
body.landing-page .rscm-home-footer-brand-text strong {
  color:#fff;
  font-size:24px;
  line-height:1.12;
  letter-spacing:-.027em;
  font-weight:760;
}
body.landing-page .rscm-home-footer-brand-text small {
  margin-top:5px;
  color:rgba(255,255,255,.83);
  font-size:9px;
  line-height:1.3;
  letter-spacing:.06em;
  font-weight:650;
}
body.landing-page .rscm-home-footer-brand-divider {
  width:1px;
  height:33px;
  flex:0 0 1px;
  background:rgba(255,255,255,.33);
}
body.landing-page .rscm-home-footer-institution {
  display:grid;
  place-items:center;
  width:166px;
  height:50px;
  padding-inline:8px;
  border-radius:9px;
  background:#fff;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 5px 13px rgba(0,70,65,.11);
}
body.landing-page .rscm-home-footer-institution img {
  display:block;
  width:100%;
  max-width:148px;
  max-height:42px;
  height:auto;
  object-fit:contain;
}
body.landing-page .rscm-home-footer-brand > p {
  max-width:530px;
  margin-top:19px;
  color:rgba(255,255,255,.90);
  font-size:13.2px;
  line-height:1.75;
}
body.landing-page .rscm-home-footer-label {
  display:inline-block;
  margin-top:18px;
  color:rgba(255,255,255,.72);
  font-size:11.2px;
  line-height:1.55;
}
body.landing-page .rscm-home-footer-column {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;
  min-width:0;
  padding:3px 25px 0 29px;
}
body.landing-page .rscm-home-footer-column::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.25) 18%,rgba(255,255,255,.25) 82%,transparent);
}
body.landing-page .rscm-home-footer-column h2 {
  margin:0 0 5px;
  color:#fff;
  font-size:16px;
  font-weight:750;
  line-height:1.25;
  letter-spacing:-.01em;
}
body.landing-page .rscm-home-footer-column a {
  color:rgba(255,255,255,.89);
  text-decoration:none;
  font-size:13px;
  line-height:1.48;
  font-weight:480;
  transition:color .15s ease;
}
body.landing-page .rscm-home-footer-column a:hover,
body.landing-page .rscm-home-footer-column a:focus-visible {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}
body.landing-page .rscm-home-footer-access p {
  max-width:275px;
  color:rgba(255,255,255,.88);
  font-size:12.7px;
  line-height:1.75;
}
body.landing-page .rscm-home-footer-access .rscm-home-footer-action {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:3px;
  font-weight:720;
  font-size:13px;
  color:#fff;
}
body.landing-page .rscm-home-footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin:0 38px;
  padding:18px 0 21px;
  border-top:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.78);
  font-size:11.6px;
  line-height:1.55;
}
body.landing-page .rscm-home-footer-bottom span:last-child {
  max-width:590px;
  text-align:right;
}
body.landing-page .rscm-home-footer a:focus-visible {
  outline:2px solid #fff;
  outline-offset:4px;
  border-radius:4px;
}

@media (max-width:1250px) {
  body.landing-page .rscm-home-footer-main {
    grid-template-columns:minmax(0,1.65fr) minmax(0,.65fr) minmax(0,1fr);
    padding-inline:27px;
  }
  body.landing-page .rscm-home-footer-brandline {gap:9px;}
  body.landing-page .rscm-home-footer-brand-text strong {font-size:21px;}
  body.landing-page .rscm-home-footer-institution {width:137px;}
  body.landing-page .rscm-home-footer-column {padding-left:23px;padding-right:15px;}
  body.landing-page .rscm-home-footer-bottom {margin-inline:27px;}
}
@media (max-width:950px) {
  body.landing-page .hero-copy {max-width:640px;}
  body.landing-page .hero-copy h1 {font-size:clamp(35px,4.8vw,42px);}
  body.landing-page .hero-description {max-width:610px;}
  body.landing-page .rscm-home-footer-main {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    row-gap:27px;
    padding:28px;
  }
  body.landing-page .rscm-home-footer-brand {
    grid-column:1/-1;
    padding:0 0 23px;
    border-bottom:1px solid rgba(255,255,255,.24);
  }
  body.landing-page .rscm-home-footer-column {padding-left:0;padding-right:16px;}
  body.landing-page .rscm-home-footer-column::before {display:none;}
  body.landing-page .rscm-home-footer-access {padding-left:25px;border-left:1px solid rgba(255,255,255,.24);}
  body.landing-page .rscm-home-footer-bottom {flex-direction:column;align-items:flex-start;gap:6px;}
  body.landing-page .rscm-home-footer-bottom span:last-child {text-align:left;max-width:100%;}
}
@media (max-width:600px) {
  body.landing-page .hero-copy h1 {font-size:clamp(29px,7vw,35px);margin-top:15px;line-height:1.14;}
  body.landing-page .hero-description {font-size:13px;line-height:1.72;}
  body.landing-page .hero-actions {margin-top:20px;gap:9px;}
  body.landing-page .hero-actions .button {min-height:43px;padding:9px 14px;font-size:12.5px;}
  body.landing-page .rscm-home-footer-shell {padding-block:20px;}
  body.landing-page .rscm-home-footer-card {border-radius:14px;}
  body.landing-page .rscm-home-footer-main {grid-template-columns:1fr;row-gap:22px;padding:23px 19px;}
  body.landing-page .rscm-home-footer-brand {grid-column:auto;padding-bottom:21px;}
  body.landing-page .rscm-home-footer-brand-text strong {font-size:19px;}
  body.landing-page .rscm-home-footer-brandline {gap:9px;}
  body.landing-page .rscm-home-footer-logo-frame {width:43px;height:43px;flex-basis:43px;}
  body.landing-page .rscm-home-footer-logo-frame img {width:39px;height:39px;}
  body.landing-page .rscm-home-footer-institution {width:140px;height:46px;}
  body.landing-page .rscm-home-footer-brand > p {font-size:12.4px;}
  body.landing-page .rscm-home-footer-column {padding:0;gap:8px;}
  body.landing-page .rscm-home-footer-access {padding:20px 0 0;border:0;border-top:1px solid rgba(255,255,255,.22);}
  body.landing-page .rscm-home-footer-bottom {margin-inline:19px;padding:16px 0 19px;font-size:10.8px;}
}
@media (max-width:370px) {
  body.landing-page .rscm-home-footer-brand-divider {display:none;}
  body.landing-page .rscm-home-footer-institution {width:135px;}
}
@media (prefers-reduced-motion:reduce) {
  body.landing-page .rscm-home-footer-column a {transition:none;}
}


/* ============================================================================
   RSCM IoMT V4.3.60 — PUBLIC DASHBOARD SHOWCASE / HTML + CSS REPLICA
   Scope: landing-page only. Dashboard operasional tidak dimuat, disalin, atau
   dibaca pada halaman publik. Tidak ada real-time client atau data pasien nyata.
   Dua tombol [data-hero-rail] tetap milik js/pages/index.js yang sudah stabil.
   ============================================================================ */
body.landing-page .hero-grid{
  grid-template-columns:minmax(300px,.58fr) minmax(0,1.42fr);
  gap:clamp(20px,2.5vw,43px);
  padding-top:103px;
  padding-bottom:50px;
  min-height:calc(100svh - 10px);
}
body.landing-page .hero-copy{max-width:460px;}
body.landing-page .hero-copy h1{font-size:clamp(31px,2.65vw,41px);max-width:470px;}
body.landing-page .hero-description{font-size:13.2px;max-width:450px;}
body.landing-page .hero-visual.rscm-dashboard-preview{
  width:100%;max-width:none;min-width:0;min-height:0;justify-self:stretch;
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.landing-page .rscm-dashboard-preview{
  --preview-border:#e2eaf0;--preview-text:#1d3b51;--preview-muted:#788da1;
  color:var(--preview-text);font-family:Inter,"Segoe UI",Arial,sans-serif;
  position:relative;isolation:isolate;
}
body.landing-page .rscm-dashboard-preview::after{
  content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  width:68%;height:66px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(10,16,24,.50) 0%,rgba(10,16,24,.30) 40%,rgba(10,16,24,.12) 63%,rgba(10,16,24,0) 84%);
  filter:blur(20px);opacity:1;
}
body.landing-page .rscm-dashboard-preview *{box-sizing:border-box;}
body.landing-page .rscm-preview-monitor{position:relative;width:100%;min-width:0;z-index:1;filter:drop-shadow(0 22px 32px rgba(8,16,24,.20)) drop-shadow(0 56px 70px rgba(8,16,24,.30));}
body.landing-page .rscm-preview-monitor::before{
  content:"";position:absolute;left:1.8%;right:1.8%;top:14px;height:82%;pointer-events:none;z-index:-1;border-radius:32px;
  background:radial-gradient(ellipse at center,rgba(17,24,31,.30) 0%,rgba(17,24,31,.20) 38%,rgba(17,24,31,.08) 60%,rgba(17,24,31,0) 78%);
  filter:blur(20px);
}
body.landing-page .rscm-preview-bezel{
  padding:9px 9px 0;
  background:linear-gradient(145deg,#171b20 0%,#2a3139 38%,#11161c 100%);
  border:1px solid #1d252d;border-radius:20px 20px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 40px rgba(7,13,19,.24),0 50px 72px rgba(7,13,19,.18);
}
body.landing-page .rscm-preview-screen{
  overflow:hidden;background:#f6f9fb;border:1px solid #202a33;
  border-radius:11px 11px 0 0;
}
body.landing-page .rscm-preview-app{
  display:grid;grid-template-columns:clamp(122px,14.5vw,175px) minmax(0,1fr);
  height:clamp(455px,38.7vw,607px);min-height:0;
  background:#fff;
}
body.landing-page .rscm-preview-sidebar{
  display:flex;flex-direction:column;min-width:0;min-height:0;
  padding:15px 10px 9px;background:#fff;border-right:1px solid #e8eef2;
  box-shadow:5px 0 10px rgba(40,69,91,.03);
}
body.landing-page .rscm-preview-brandline{height:47px;display:flex;justify-content:center;align-items:center;gap:5px;overflow:hidden;}
body.landing-page .rscm-preview-brandline img{display:block;max-width:47%;height:auto;max-height:39px;object-fit:contain;}
body.landing-page .rscm-preview-brandline img:last-child{max-width:50%;}
body.landing-page .rscm-preview-branddivider{height:22px;flex:0 0 1px;background:#d7e0e4;}
body.landing-page .rscm-preview-menu-caption{
  margin:22px 6px 11px;color:#798da2;font-size:8px;font-weight:800;letter-spacing:.095em;
}
body.landing-page .rscm-preview-menu{display:grid;gap:7px;}
body.landing-page .rscm-preview-navitem{
  display:flex;align-items:center;gap:7px;min-height:32px;padding:8px;
  border:1px solid #e5ebf0;border-radius:9px;background:#fff;
  color:#4a6880;font-size:9px;font-weight:680;white-space:nowrap;
  box-shadow:0 2px 4px rgba(31,69,82,.025);
}
body.landing-page .rscm-preview-navitem.active{
  color:#fff;border-color:#329e95;
  background:linear-gradient(180deg,#53b7ad,#218780);
  box-shadow:0 3px 9px rgba(21,124,114,.16);
}
body.landing-page .showcase-icon{width:16px;height:16px;flex:0 0 16px;display:inline-block;}
body.landing-page .rscm-preview-navitem .showcase-icon{width:13px;height:13px;flex-basis:13px;}
body.landing-page .rscm-preview-sidebottom{display:grid;gap:6px;margin-top:auto;border-top:1px solid #e9eff2;padding-top:11px;}
body.landing-page .rscm-preview-sidebottom>span{display:flex;align-items:center;gap:7px;border:1px solid #e6edf1;border-radius:8px;padding:6px 8px;color:#45647a;font-size:9px;font-weight:650;}
body.landing-page .rscm-preview-sidebottom>span .showcase-icon{width:13px;height:13px;flex-basis:13px;}
body.landing-page .rscm-preview-sidebottom>small{padding-top:5px;color:#8da0b0;font-size:7px;text-align:center;}
body.landing-page .rscm-preview-workspace{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:#fcfdfe;padding:9px;gap:10px;}
body.landing-page .rscm-preview-topbar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#fff;border:1px solid #e5edf0;border-radius:12px;padding:10px 13px;
  box-shadow:0 4px 10px rgba(40,71,91,.06),0 12px 19px rgba(31,70,90,.035);
}
body.landing-page .rscm-preview-topbar h2{font-size:17px;line-height:1.2;font-weight:760;color:#29847f;letter-spacing:-.025em;}
body.landing-page .rscm-preview-topbar p{margin-top:3px;color:#8494a8;font-size:8px;line-height:1.3;}
body.landing-page .rscm-preview-avatar{display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid #e4eaf0;border-radius:10px;box-shadow:0 4px 10px rgba(30,60,78,.04);white-space:nowrap;}
body.landing-page .rscm-preview-initial{width:27px;height:27px;display:grid;place-items:center;background:#eaf4f1;color:#2d8f88;border-radius:50%;font-weight:850;font-size:11px;}
body.landing-page .rscm-preview-avatar>span:last-child{display:grid;gap:1px;}
body.landing-page .rscm-preview-avatar strong{font-size:9px;}
body.landing-page .rscm-preview-avatar small{color:#8192a5;font-size:8px;}
body.landing-page .rscm-preview-content{display:flex;flex-direction:column;gap:9px;min-width:0;min-height:0;flex:1;overflow:hidden;padding:0 1px 2px;}
body.landing-page .rscm-preview-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;}
body.landing-page .rscm-preview-stat{
  position:relative;display:flex;align-items:center;gap:7px;min-width:0;min-height:61px;padding:10px 8px;
  border:1px solid #e4ebf0;border-radius:11px;background:#fff;
  box-shadow:0 4px 8px rgba(36,71,94,.045),0 10px 16px rgba(36,71,94,.045);
}
body.landing-page .rscm-preview-stat-icon{
  display:grid;place-items:center;width:34px;height:37px;flex:0 0 34px;border-radius:10px;
  color:#fff;box-shadow:0 4px 6px rgba(36,71,94,.14),inset 0 2px 0 rgba(255,255,255,.25);
}
body.landing-page .rscm-preview-stat-icon .showcase-icon{width:21px;height:21px;}
body.landing-page .rscm-preview-stat-icon.teal{background:linear-gradient(145deg,#64c5ba,#2b908a);}
body.landing-page .rscm-preview-stat-icon.red{background:linear-gradient(145deg,#fb5c72,#c6193f);}
body.landing-page .rscm-preview-stat-icon.lime{background:linear-gradient(145deg,#faff86,#d6d628);color:#69710c;}
body.landing-page .rscm-preview-stat-icon.slate{background:linear-gradient(145deg,#edf2f5,#bac9d8);color:#617b92;}
body.landing-page .rscm-preview-stat-copy{min-width:0;display:flex;flex-direction:column;gap:0;align-self:flex-start;}
body.landing-page .rscm-preview-stat-copy small{font-size:8px;color:#8495a5;white-space:nowrap;}
body.landing-page .rscm-preview-stat-copy strong{font-size:21px;line-height:1.15;color:#1b394d;letter-spacing:-.04em;}
body.landing-page .rscm-preview-stat-foot{position:absolute;right:8px;bottom:5px;color:#9cadb9;font-size:6.7px;white-space:nowrap;}
body.landing-page .rscm-preview-columns{display:grid;grid-template-columns: minmax(0,1fr) minmax(0,1.06fr);gap:8px;flex:1;min-height:0;}
body.landing-page .rscm-preview-detail,
body.landing-page .rscm-preview-directory{
  display:flex;flex-direction:column;min-width:0;min-height:0;
  border:1px solid #e1eaf0;border-radius:12px;background:#fff;
  padding:11px 10px;overflow:hidden;
  box-shadow:0 5px 15px rgba(34,71,92,.04),0 13px 23px rgba(34,71,92,.05);
}
body.landing-page .rscm-preview-panel-title{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:7px;}
body.landing-page .rscm-preview-panel-title>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
body.landing-page .rscm-preview-panel-title strong{font-size:14px;line-height:1.2;color:#1e394e;}
body.landing-page .rscm-preview-panel-title small{font-size:8px;line-height:1.2;color:#8da0b0;}
body.landing-page .rscm-preview-bed-select{border:1px solid #e5ebf0;border-radius:7px;padding:6px 7px;font-size:8px;color:#607c90;white-space:nowrap;}
body.landing-page .rscm-preview-bed-select>span{margin-left:6px;}
body.landing-page .rscm-preview-identity-row{display:grid;grid-template-columns: minmax(0,.9fr) minmax(0,1.35fr);gap:6px;min-height:73px;}
body.landing-page .rscm-preview-identity,
body.landing-page .rscm-preview-placement{border:1px solid #e6edf2;border-radius:8px;padding:7px;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden;}
body.landing-page .rscm-preview-field-kicker{display:flex;align-items:center;gap:3px;color:#7e92a5;font-size:7px;font-weight:800;white-space:nowrap;}
body.landing-page .rscm-preview-field-kicker .showcase-icon{width:12px;height:12px;flex-basis:12px;color:#54a79f;}
body.landing-page .rscm-preview-identity>strong{font-size:12px;color:#18384c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.landing-page .rscm-preview-identity>small{font-size:8px;color:#879aae;}
body.landing-page .rscm-preview-placement>strong{font-size:9px;color:#21475c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.landing-page .rscm-preview-placement>small{font-size:7px;color:#63877d;}
body.landing-page .rscm-preview-placement-chips{display:grid;grid-template-columns:1fr 1.22fr;gap:4px;margin-top:3px;min-width:0;}
body.landing-page .rscm-preview-placement-chips>span{display:flex;align-items:center;gap:3px;border:1px solid #e5ecee;border-radius:5px;padding:3px;color:#275e60;font-size:7.6px;font-weight:800;white-space:nowrap;min-width:0;overflow:hidden;}
body.landing-page .rscm-preview-placement-chips .showcase-icon{width:12px;height:12px;flex-basis:12px;color:#499e98;}
body.landing-page .rscm-preview-bed-unit{position:relative;display:flex;flex-direction:column;flex:1;min-height:115px;margin-top:6px;border:1px solid #edf1f4;border-radius:8px;overflow:hidden;background:#fcfdfe;}
body.landing-page .rscm-preview-riskrow{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:5px;padding:6px;}
body.landing-page .rscm-preview-risk{display:inline-flex;align-items:center;gap:5px;min-width:0;background:#fff;border:1px solid #e4ebee;border-radius:7px;padding:4px 6px;box-shadow:0 4px 8px rgba(37,66,82,.065);}
body.landing-page .rscm-preview-risk-round{width:27px;height:27px;flex:0 0 27px;border:3px solid #52aa9f;border-left-color:#e2f1ec;border-radius:50%;display:grid;place-items:center;color:#1e4355;font-weight:850;font-size:9px;}
body.landing-page .rscm-preview-risk>span:last-child{display:flex;flex-direction:column;gap:1px;white-space:nowrap;}
body.landing-page .rscm-preview-risk small{font-size:7px;color:#8797a8;}
body.landing-page .rscm-preview-risk strong{font-size:9px;color:#158477;}
body.landing-page .rscm-preview-sound{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #e6edf1;border-radius:7px;padding:5px;font-size:8px;color:#3f9890;font-weight:720;white-space:nowrap;box-shadow:0 4px 7px rgba(36,77,95,.05);}
body.landing-page .rscm-preview-sound .showcase-icon{width:12px;height:12px;flex-basis:12px;}
body.landing-page .rscm-preview-switch{display:inline-block;width:23px;height:13px;border-radius:999px;background:#43a69a;position:relative;}
body.landing-page .rscm-preview-switch::after{content:"";position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);}
body.landing-page .rscm-preview-bed-stage{position:relative;flex:1;min-height:74px;width:100%;overflow:hidden;margin-top:-14px;}
body.landing-page .rscm-preview-bed-stage .hero-bed{position:absolute;inset:0;width:100%;height:100%;}
body.landing-page .rscm-preview-bed-stage .bed-illustration{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 6px rgba(38,76,96,.09));}
body.landing-page .rscm-preview-rail-heading{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px;}
body.landing-page .rscm-preview-rail-heading strong{font-size:10px;color:#627b94;}
body.landing-page .rscm-preview-rail-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding-top:4px;}
body.landing-page .rscm-preview-rail-controls .rail-preview-button{min-height:30px;padding:5px 6px;border-radius:6px;gap:5px;border:1px solid #e5ebf0;background:#fff;box-shadow:0 2px 5px rgba(35,70,90,.04);justify-content:center;}
body.landing-page .rscm-preview-rail-controls .rail-preview-button>.showcase-icon{width:13px;height:13px;flex-basis:13px;color:#4a9b97;}
body.landing-page .rscm-preview-rail-controls .rail-preview-button>span:nth-child(2){display:flex;flex-direction:column;gap:0;}
body.landing-page .rscm-preview-rail-controls .rail-preview-button small{display:none;}
body.landing-page .rscm-preview-rail-controls .rail-preview-button strong{font-size:10.5px;color:#238878;line-height:1.1;margin:0;}
body.landing-page .rscm-preview-rail-controls .rail-preview-button.is-open strong{color:#d21b47;}
body.landing-page .rscm-preview-detail-note{margin-top:5px;color:#8297a8;font-size:7px;text-align:center;line-height:1.25;}
body.landing-page .rscm-preview-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:8px;}
body.landing-page .rscm-preview-filters>span{min-width:0;display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;border:1px solid #e3ebef;border-radius:7px;min-height:29px;padding:4px 3px;color:#5f778e;font-weight:750;font-size:7.7px;}
body.landing-page .rscm-preview-filters>span.active{color:#fff;border-color:#3ba79e;background:linear-gradient(180deg,#51b9ae,#218c84);box-shadow:0 4px 8px rgba(28,127,120,.17);}
body.landing-page .rscm-preview-filters .showcase-icon{width:12px;height:12px;flex-basis:12px;}
body.landing-page .preview-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;display:inline-block;background:#899baa;}
body.landing-page .preview-dot.red{background:#db846c;}
body.landing-page .preview-dot.lime{background:#d4d747;}
body.landing-page .preview-dot.grey{background:#9aadbd;}
body.landing-page .rscm-preview-table-header{display:grid;grid-template-columns:1.38fr .85fr .85fr .95fr;align-items:center;gap:6px;padding:10px 8px;background:linear-gradient(180deg,#53b8ae,#218c84);color:#fff;border-radius:7px;box-shadow:0 4px 7px rgba(26,128,118,.15);font-size:7.5px;font-weight:780;}
body.landing-page .rscm-preview-list{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-top:7px;padding:0 1px 1px;scrollbar-width:thin;scrollbar-color:#d6e0e6 transparent;}
body.landing-page .rscm-preview-list-row{min-height:67px;flex:0 0 auto;border:1px solid #e5ecf0;border-radius:8px;background:#fff;padding:8px;}
body.landing-page .rscm-preview-list-row.is-selected{background:#f8fcfb;border-color:#8abfb8;}
body.landing-page .rscm-preview-list-rowhead{display:flex;align-items:center;gap:4px;color:#526d80;white-space:nowrap;min-width:0;font-size:7.5px;}
body.landing-page .rscm-preview-list-rowhead strong{font-size:8px;}
body.landing-page .rscm-preview-list-rowhead small{min-width:0;overflow:hidden;text-overflow:ellipsis;}
body.landing-page .rscm-preview-presence{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#adc5ae;}
body.landing-page .rscm-preview-presence.unknown{background:#a1afb7;}
body.landing-page .rscm-preview-list-rowbody{display:grid;grid-template-columns:1.4fr .7fr 1fr 1.05fr 10px;align-items:center;gap:5px;margin-top:8px;}
body.landing-page .rscm-preview-list-name{display:flex;align-items:center;gap:5px;min-width:0;}
body.landing-page .rscm-preview-list-name>.showcase-icon{width:18px;height:18px;flex:0 0 18px;color:#51a39b;}
body.landing-page .rscm-preview-list-name>span{display:flex;flex-direction:column;gap:1px;min-width:0;}
body.landing-page .rscm-preview-list-name strong{font-size:8px;color:#26495d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.landing-page .rscm-preview-list-name small{font-size:7px;color:#96a6b6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.landing-page .rscm-preview-list-risk,
body.landing-page .rscm-preview-list-location,
body.landing-page .rscm-preview-list-status{min-width:0;display:flex;flex-direction:column;gap:2px;}
body.landing-page .rscm-preview-list-risk small,
body.landing-page .rscm-preview-list-location small,
body.landing-page .rscm-preview-list-status small{font-size:7px;color:#92a5b7;white-space:nowrap;}
body.landing-page .rscm-preview-list-risk strong,
body.landing-page .rscm-preview-list-location strong{font-size:7.5px;color:#2d5061;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
body.landing-page .rscm-preview-list-railpair{display:flex;gap:3px;min-width:0;}
body.landing-page .rscm-preview-list-rails{min-width:0;flex:1;text-align:center;border:1px solid #e2e9ee;border-radius:6px;padding:4px 2px;font-size:7px;font-weight:760;color:#238875;white-space:nowrap;box-shadow:0 2px 4px rgba(30,66,84,.05);}
body.landing-page .rscm-preview-list-rails:has(.rscm-preview-list-open) .rscm-preview-list-open{display:none;}
body.landing-page .rscm-dashboard-preview:has([data-hero-rail="left"].is-open) .rscm-preview-list-row.is-selected .rscm-preview-list-left .rscm-preview-list-open,
body.landing-page .rscm-dashboard-preview:has([data-hero-rail="right"].is-open) .rscm-preview-list-row.is-selected .rscm-preview-list-right .rscm-preview-list-open{display:inline;color:#c91e4a;}
body.landing-page .rscm-dashboard-preview:has([data-hero-rail="left"].is-open) .rscm-preview-list-row.is-selected .rscm-preview-list-left .rscm-preview-list-closed,
body.landing-page .rscm-dashboard-preview:has([data-hero-rail="right"].is-open) .rscm-preview-list-row.is-selected .rscm-preview-list-right .rscm-preview-list-closed{display:none;}
body.landing-page .rscm-preview-list-rowbody .row-arrow{width:11px;height:11px;flex:0 0 11px;color:#89a0b2;}
body.landing-page .rscm-preview-monitor-chin{display:flex;justify-content:space-between;align-items:center;height:38px;padding:0 18px;background:linear-gradient(180deg,#26303a 0%,#10171f 100%);border:1px solid #1b232b;border-top:0;border-radius:0 0 15px 15px;color:#c8d0d8;letter-spacing:.11em;font-size:8px;font-weight:680;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 20px rgba(8,16,24,.12);}
body.landing-page .rscm-preview-monitor-led{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#67c7a5;box-shadow:0 0 0 3px rgba(103,199,165,.11);}
body.landing-page .rscm-preview-monitor-switch{width:10px;height:10px;border-radius:50%;border:1px solid #4c5965;box-shadow:inset 0 0 0 2px #10171d;}
body.landing-page .rscm-preview-monitor-neck{height:76px;width:10.5%;margin:0 auto;background:linear-gradient(90deg,#232a31 0%,#3b454f 52%,#212931 100%);border:1px solid #1a222a;border-top:0;border-radius:0 0 4px 4px;clip-path:none;position:relative;box-shadow:0 12px 22px rgba(8,16,24,.24),0 28px 36px rgba(8,16,24,.14), inset 0 1px 0 rgba(255,255,255,.05);}
body.landing-page .rscm-preview-monitor-base{width:42%;height:15px;margin:0 auto;border-radius:999px;background:linear-gradient(180deg,#404b55 0%,#232b33 52%,#121921 100%);border:1px solid #202a32;position:relative;box-shadow:0 12px 20px rgba(8,16,24,.24),0 32px 42px rgba(8,16,24,.22), inset 0 1px 0 rgba(255,255,255,.06);}
body.landing-page .rscm-preview-disclaimer{color:#7b8e9d;font-size:10.5px;text-align:center;line-height:1.5;margin-top:17px;}

/* Tablet: showcase becomes a complete stacked preview, not a squashed desktop UI. */
@media (max-width:1190px){
  body.landing-page .hero-grid{grid-template-columns:minmax(0,1fr);gap:29px;min-height:0;padding-top:106px;padding-bottom:45px;}
  body.landing-page .hero-copy{max-width:720px;}
  body.landing-page .hero-visual.rscm-dashboard-preview{max-width:1050px;justify-self:center;}
  body.landing-page .rscm-preview-app{height:565px;grid-template-columns:145px minmax(0,1fr);}
  body.landing-page .rscm-preview-workspace{padding:10px;}
}
@media (max-width:800px){
  body.landing-page .rscm-preview-app{height:auto;min-height:0;grid-template-columns:1fr;}
  body.landing-page .rscm-preview-sidebar{display:none;}
  body.landing-page .rscm-preview-workspace{overflow:visible;}
  body.landing-page .rscm-preview-content{overflow:visible;}
  body.landing-page .rscm-preview-columns{grid-template-columns:1fr;}
  body.landing-page .rscm-preview-detail,body.landing-page .rscm-preview-directory{overflow:visible;}
  body.landing-page .rscm-preview-bed-unit{min-height:235px;}
  body.landing-page .rscm-preview-bed-stage{min-height:175px;}
  body.landing-page .rscm-preview-list{overflow:visible;max-height:none;}
  body.landing-page .rscm-preview-directory{max-height:none;}
}
@media (max-width:600px){
  body.landing-page .hero-grid{padding-top:98px;gap:28px;}
  body.landing-page .rscm-preview-bezel{padding:5px 5px 0;border-radius:13px 13px 3px 3px;}
  body.landing-page .rscm-preview-screen{border-radius:8px 8px 1px 1px;}
  body.landing-page .rscm-preview-workspace{padding:6px;gap:7px;}
  body.landing-page .rscm-preview-topbar{padding:9px;border-radius:8px;}
  body.landing-page .rscm-preview-topbar h2{font-size:15px;}
  body.landing-page .rscm-preview-topbar p{font-size:7px;}
  body.landing-page .rscm-preview-avatar{padding:3px 5px;}
  body.landing-page .rscm-preview-initial{width:23px;height:23px;}
  body.landing-page .rscm-preview-avatar>span:last-child{display:none;}
  body.landing-page .rscm-preview-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
  body.landing-page .rscm-preview-stat{min-height:50px;padding:7px;}
  body.landing-page .rscm-preview-stat-icon{width:31px;height:32px;flex-basis:31px;}
  body.landing-page .rscm-preview-stat-copy strong{font-size:18px;}
  body.landing-page .rscm-preview-stat-foot{font-size:6px;}
  body.landing-page .rscm-preview-detail,body.landing-page .rscm-preview-directory{padding:9px 8px;}
  body.landing-page .rscm-preview-identity-row{grid-template-columns:1fr 1.1fr;}
  body.landing-page .rscm-preview-identity>strong{font-size:10px;}
  body.landing-page .rscm-preview-field-kicker{font-size:6px;}
  body.landing-page .rscm-preview-placement-chips{grid-template-columns:1fr;}
  body.landing-page .rscm-preview-bed-unit{min-height:230px;}
  body.landing-page .rscm-preview-bed-stage{min-height:177px;}
  body.landing-page .rscm-preview-rail-controls .rail-preview-button{min-height:41px;}
  body.landing-page .rscm-preview-rail-controls .rail-preview-button strong{font-size:12px;}
  body.landing-page .rscm-preview-panel-title strong{font-size:13px;}
  body.landing-page .rscm-preview-filters{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.landing-page .rscm-preview-table-header{display:none;}
  body.landing-page .rscm-preview-list-rowbody{grid-template-columns:1.1fr .7fr .8fr;}
  body.landing-page .rscm-preview-list-rowbody .rscm-preview-list-status,body.landing-page .rscm-preview-list-rowbody .row-arrow{display:none;}
  body.landing-page .rscm-preview-list-name strong{font-size:9px;}
  body.landing-page .rscm-preview-list-risk strong,body.landing-page .rscm-preview-list-location strong{font-size:8px;}
  body.landing-page .rscm-preview-monitor-chin{height:26px;padding-inline:11px;font-size:6.5px;border-radius:0 0 9px 9px;}
  body.landing-page .rscm-preview-monitor-neck{height:19px;}
  body.landing-page .rscm-preview-monitor-base{height:8px;}
  body.landing-page .rscm-preview-disclaimer{font-size:9.5px;}
}
@media (prefers-reduced-motion:reduce){
  body.landing-page .rscm-dashboard-preview .rail-preview-button{transition:none;}
}


/* =======================================================================
   RSCM IoMT V4.3.61 — AUTHENTIC DASHBOARD SHOWCASE + THREE-PHASE DEMO
   Public Beranda only. Uses real Dashboard Font Awesome Pro glyphs.
   All numbers/patients are local sample data, NEVER sensor/clinical data.
   ======================================================================= */
body.landing-page .rscm-dashboard-preview .showcase-icon.fa-solid {
  display:inline-flex; align-items:center; justify-content:center;
  font-style:normal; line-height:1; text-align:center;
}
/* Original Dashboard icon treatment: teal bed, red rail open, yellow closed, grey unknown. */
body.landing-page .rscm-preview-stat-icon {
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 4px 8px rgba(29,59,76,.20),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 7px rgba(20,55,61,.12);
}
body.landing-page .rscm-preview-stat-icon.teal {background:linear-gradient(155deg,#63bcb4 0%,#2d8b88 100%);}
body.landing-page .rscm-preview-stat-icon.red {background:linear-gradient(160deg,#f3445b 0%,#ce1530 90%);}
body.landing-page .rscm-preview-stat-icon.lime {background:linear-gradient(150deg,#fcff82 0%,#e2e72e 100%);color:#fff;text-shadow:0 1px 2px rgba(88,110,13,.45);}
body.landing-page .rscm-preview-stat-icon.slate {background:linear-gradient(145deg,#f6f9fc 0%,#cbd7e1 100%);color:#657f97;}
body.landing-page .rscm-preview-stat-icon .showcase-icon {font-size:22px;width:23px;height:23px;}
body.landing-page .rscm-preview-stat-copy strong {font-variant-numeric:tabular-nums;}

/* Original Dashboard selected-placement LED: green/grey, not red when an alert occurs.
   Same 0.8 s ON + 0.8 s OFF as the registered clinical indicator (DEMO only). */
@keyframes rscm-showcase-led-v4361 {
  0%,49.99%,100%{opacity:1}50%,99.99%{opacity:0}
}
body.landing-page .rscm-dashboard-preview .rscm-preview-device-led {
  display:block;position:absolute;right:3px;top:3px;width:9px;height:9px;flex:0 0 9px;
  border-radius:50%;border:1px solid #b7ce9b;
  background:radial-gradient(circle at center,#bfceae,#9fb78b);
  box-shadow:0 0 2px rgba(104,141,66,.13);
}
body.landing-page .rscm-preview-placement-chips>span:last-child {
  position:relative;padding-right:13px;
}
body.landing-page .rscm-dashboard-preview .rscm-preview-device-led::after,
body.landing-page .rscm-dashboard-preview .rscm-preview-list-row.is-selected .rscm-preview-presence.ready::after {
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 40% 35%,#efffc9,#b6ff47 64%,#93c529 100%);
  box-shadow:0 0 3px rgba(151,223,60,.63);
  animation:rscm-showcase-led-v4361 1.6s step-end infinite;
}
body.landing-page .rscm-preview-presence.ready {
  position:relative;background:#9fb78b;border:1px solid #adc593;
}
/* Different physical indicator examples intentionally blink out of phase. */
body.landing-page .rscm-preview-list-row:not(.is-selected) .rscm-preview-presence.ready::after {
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:#baff53;animation:rscm-showcase-led-v4361 1.73s step-end infinite;
}
body.landing-page .rscm-preview-list-row:nth-child(4) .rscm-preview-presence.ready::after {animation-duration:1.87s;animation-delay:-.34s;}
body.landing-page .rscm-preview-list-row:nth-child(5) .rscm-preview-presence.ready::after {animation-duration:1.69s;animation-delay:-.61s;}
body.landing-page .rscm-preview-monitor-led {animation:rscm-showcase-led-v4361 1.6s step-end infinite;}

/* Make room for the alert without reflowing the bed illustration at every phase. */
body.landing-page .rscm-preview-riskrow{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) auto;
  gap:4px;align-items:center;justify-content:stretch;padding:5px;
}
body.landing-page .rscm-preview-risk{
  padding:3px;gap:3px;min-width:0;max-width:100%;
}
body.landing-page .rscm-preview-risk-round{width:24px;height:24px;flex-basis:24px;font-size:8px;}
body.landing-page .rscm-preview-risk small{font-size:6px;}
body.landing-page .rscm-preview-risk strong{font-size:8px;line-height:1.15;}
body.landing-page .rscm-preview-sound{padding:4px 3px;gap:2px;font-size:7px;justify-self:end;}
body.landing-page .rscm-preview-sound .showcase-icon{width:10px;height:10px;font-size:10px;flex-basis:10px;}
body.landing-page .rscm-preview-switch{width:18px;height:11px;flex:0 0 18px;}
body.landing-page .rscm-preview-switch::after{height:7px;width:7px;}
body.landing-page .rscm-preview-open-alert{
  display:flex;align-items:center;justify-content:center;gap:3px;
  min-width:0;min-height:29px;padding:3px 5px;
  border:1px solid transparent;border-radius:7px;
  background:transparent;visibility:hidden;opacity:0;
  box-shadow:none;white-space:nowrap;
}
body.landing-page .rscm-preview-open-alert>i{flex:0 0 15px;font-size:14px;color:#fff;}
body.landing-page .rscm-preview-open-alert>span{min-width:0;display:grid;gap:1px;}
body.landing-page .rscm-preview-open-alert strong{color:#fff;font-size:7px;line-height:1.1;}
body.landing-page .rscm-preview-open-alert small{color:#fff;font-size:5.8px;line-height:1.13;}
body.landing-page .rscm-dashboard-preview[data-showcase-phase="left-open"] .rscm-preview-open-alert,
body.landing-page .rscm-dashboard-preview[data-showcase-phase="right-open"] .rscm-preview-open-alert,
body.landing-page .rscm-dashboard-preview[data-showcase-phase="both-open"] .rscm-preview-open-alert {
  visibility:visible;opacity:1;
  background:linear-gradient(115deg,#f14d64 0%,#d52141 100%);
  border-color:#dd2445;
  box-shadow:0 2px 6px rgba(211,31,57,.22);
}
body.landing-page .rscm-dashboard-preview[data-showcase-phase="left-open"] .rscm-preview-open-alert>i,
body.landing-page .rscm-dashboard-preview[data-showcase-phase="right-open"] .rscm-preview-open-alert>i,
body.landing-page .rscm-dashboard-preview[data-showcase-phase="both-open"] .rscm-preview-open-alert>i{
  animation:rscm-showcase-alarm-ico 1.35s ease-in-out infinite;
}
@keyframes rscm-showcase-alarm-ico {0%,100%{transform:scale(1)}50%{transform:scale(1.11)}}
body.landing-page .rscm-preview-bed-stage{margin-top:-6px;}
body.landing-page .rscm-preview-rail-controls .rail-preview-button>.showcase-icon{font-size:13px;}
body.landing-page .rscm-dashboard-preview .rscm-preview-rail-controls .rail-preview-button.is-open {
  background:linear-gradient(180deg,#f4475f 0%,#d51f3e 100%);
  border-color:#e33050;color:#fff;
  box-shadow:0 3px 8px rgba(208,28,55,.32),inset 0 1px 0 rgba(255,255,255,.25);
}
body.landing-page .rscm-dashboard-preview .rscm-preview-rail-controls .rail-preview-button.is-open>i,
body.landing-page .rscm-dashboard-preview .rscm-preview-rail-controls .rail-preview-button.is-open strong{
  color:#fff;
}
body.landing-page .rscm-preview-history-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
  padding:3px 3px 0;
}
body.landing-page .rscm-preview-history-grid>span{
  display:block;text-align:center;color:#8799a8;font-size:7px;line-height:1.2;
  font-variant-numeric:tabular-nums;
}
body.landing-page .rscm-preview-list-row.is-selected .rscm-preview-list-left:has(.rscm-preview-list-open) .rscm-preview-list-open,
body.landing-page .rscm-preview-list-row.is-selected .rscm-preview-list-right:has(.rscm-preview-list-open) .rscm-preview-list-open{
  color:#fff;
}
body.landing-page .rscm-dashboard-preview:has([data-hero-rail="left"].is-open) .rscm-preview-list-row.is-selected .rscm-preview-list-left,
body.landing-page .rscm-dashboard-preview:has([data-hero-rail="right"].is-open) .rscm-preview-list-row.is-selected .rscm-preview-list-right{
  color:#fff;border-color:#e33050;
  background:linear-gradient(180deg,#f24963,#d91b3f);
  box-shadow:0 2px 6px rgba(215,28,54,.18);
}
body.landing-page .rscm-preview-list-row.is-selected .rscm-preview-list-rails .rscm-preview-list-open{color:inherit !important;}
body.landing-page .rscm-preview-demo-toggle{
  appearance:none;display:inline-flex;justify-content:center;align-items:center;
  min-width:40px;min-height:21px;padding:2px 8px;
  border:1px solid #506c7a;border-radius:6px;
  color:#e3eef2;background:#314959;
  font-size:9px;font-weight:750;line-height:1.1;letter-spacing:0;
  cursor:pointer;
}
body.landing-page .rscm-preview-demo-toggle:hover{background:#426374;}
body.landing-page .rscm-preview-demo-toggle:focus-visible{outline:2px solid #a6f1e9;outline-offset:2px;}

@media (max-width:600px){
  body.landing-page .rscm-preview-riskrow{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;gap:3px;}
  body.landing-page .rscm-preview-open-alert{padding:3px;min-height:26px;}
  body.landing-page .rscm-preview-open-alert>i{flex-basis:11px;font-size:11px;}
  body.landing-page .rscm-preview-open-alert strong{font-size:6px;}
  body.landing-page .rscm-preview-open-alert small{font-size:5px;}
  body.landing-page .rscm-preview-risk-round{width:20px;height:20px;flex-basis:20px;}
  body.landing-page .rscm-preview-risk strong{font-size:7px;}
  body.landing-page .rscm-preview-stat-icon .showcase-icon{font-size:19px;width:20px;height:20px;}
  body.landing-page .rscm-preview-history-grid>span{font-size:7px;}
}
@media (max-width:370px){
  body.landing-page .rscm-preview-riskrow{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) auto;}
  body.landing-page .rscm-preview-open-alert small{display:none;}
  body.landing-page .rscm-preview-sound .showcase-icon{display:none;}
  body.landing-page .rscm-preview-sound{font-size:6px;}
}
@media (prefers-reduced-motion:reduce){
  body.landing-page .rscm-dashboard-preview .rscm-preview-device-led::after,
  body.landing-page .rscm-dashboard-preview .rscm-preview-presence.ready::after,
  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-led,
  body.landing-page .rscm-dashboard-preview .rscm-preview-open-alert>i{animation:none!important;opacity:1!important;}
}


/* ==========================================================================
   RSCM IoMT V4.3.62 — COMPACT DESKTOP SHOWCASE, CSS-ONLY
   Baseline: V4.3.61 Authentic Dashboard / three-phase auto simulation.

   Layout invariant:
     CSS zoom and width use the SAME factor; the miniature retains its
     original internal layout widths while its visible geometry shrinks
     uniformly in both dimensions. Browser layout accounts for the shorter
     monitor naturally (unlike transform:scale).

   Scope: Public Beranda desktop only. Original Dashboard, JS simulation,
   SVG side rails, LED and alert animations are deliberately unchanged.
   1191–1439px: 92% to retain small-dashboard readability on laptops.
   1440px+: 85% to balance proportions with compact hero copy.
   <=1190px: preserved exactly as the previous responsive baseline.
   ========================================================================= */
@media (min-width:1191px) {
  body.landing-page .hero-visual.rscm-dashboard-preview {
    align-items:center;
  }
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    width:92%;
    zoom:.92;
    max-width:none;
    flex:0 0 auto;
  }
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-disclaimer {
    width:92%;
    margin-inline:auto;
  }
}
@media (min-width:1440px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    width:85%;
    zoom:.85;
  }
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-disclaimer {
    width:85%;
  }
}


/* ===========================================================================
   RSCM IoMT V4.3.63 — MORE COMPACT SHOWCASE / ISOLATED DESKTOP-ONLY
   Baseline: V4.3.62 (proven working). CSS-only visual reduction.

   Keep monitor and all inner components under the SAME CSS zoom factor.
   The matching percentage width ensures the browser reserves appropriate
   layout width; no transform/position hacks, no height/overflow overrides.
   Original three-phase demonstration, blinking LEDs, buttons and SVG intact.

   Desktop >=1440px: 76% (was 85%; 10.6% additional reduction)
   Compact desktop 1191–1439px: 84% (was 92%; 8.7% additional reduction)
   Tablet/mobile <=1190px: UNCHANGED from V4.3.62.
   =========================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    width:84%;
    zoom:.84;
  }
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-disclaimer {
    width:84%;
  }
}
@media (min-width:1440px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    width:76%;
    zoom:.76;
  }
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-disclaimer {
    width:76%;
  }
}


/* ===========================================================================
   RSCM IoMT V4.3.64 — SHOWCASE MONITOR RIGHT ALIGN / CSS-ONLY
   Baseline: V4.3.63 compact monitor.

   Desktop >=1191px: right edge of the monitor aligns with the existing
   40px-right hero container boundary. The description beneath it follows
   the same right edge. No scaling, width, height or transform changes.
   Tablet and mobile <=1190px are byte-for-byte the same rules as V4.3.63.
   =========================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-visual.rscm-dashboard-preview {
    align-items:flex-end;
  }
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-disclaimer {
    align-self:flex-end;
    margin-inline:0;
  }
}


/* ===========================================================================
   RSCM IoMT V4.3.65 — SHOWCASE MOVE 20px LEFT / CSS ONLY
   Baseline: V4.3.64 (right-aligned 40px).

   Desired visual position: a further 20px left, with the visible right
   edge at 60px. CSS zoom scales the monitor's positioning offsets:
     1191–1439px: 20 / .84 = 23.8095238 CSS px
     >=1440px:    20 / .76 = 26.3157895 CSS px
   The separate note beneath the monitor is not zoomed (right:20px).
   Relative positioning preserves layout, bounding dimensions, and hero.
   Tablet/phone <=1190px stay untouched. JS, data, and SVG unaffected.
   =========================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    position:relative;
    right:23.809524px;
  }
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-disclaimer {
    position:relative;
    right:20px;
  }
}
@media (min-width:1440px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    right:26.31579px;
  }
}


/* ============================================================================
   RSCM IoMT V4.3.67 — LARGER PRODUCT BRAND / SIMPLIFIED HERO
   Baseline: V4.3.66 (patient safety hero, approved visual).
   UI-only: enlarge original logo+lockup and remove redundant kicker.
   Scope: .hero-copy ONLY. Showcase monitor scaling, LED, SVG, animations,
   footer, responsive monitor, audio, Firebase and Dashboard remain untouched.
   ============================================================================ */
body.landing-page .hero-copy .rscm-hero-product-brand {
  display:inline-flex;
  align-items:center;
  gap:15px;
  max-width:100%;
  margin:0 0 25px;
  padding:0;
  border:0;
  background:transparent;
}
body.landing-page .rscm-hero-product-logo {
  display:block;
  width:80px;
  height:80px;
  flex:0 0 80px;
  object-fit:contain;
}
body.landing-page .rscm-hero-product-lockup {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  min-width:0;
}
body.landing-page .rscm-hero-product-title {
  display:block;
  color:#18384b;
  font-size:37px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.045em;
  white-space:nowrap;
}
body.landing-page .rscm-hero-product-title > span {color:#218b85;}
body.landing-page .rscm-hero-product-lockup > small {
  color:#6b8190;
  font-size:11.5px;
  font-weight:730;
  line-height:1.25;
  letter-spacing:.125em;
}
body.landing-page .hero-copy h1 {
  max-width:465px;
  margin:0 0 17px;
  color:#203b50;
  font-size:clamp(30px,2.45vw,38px);
  font-weight:785;
  line-height:1.14;
  letter-spacing:-.038em;
  text-wrap:pretty;
}
body.landing-page .hero-copy h1 em {
  color:#318f88;
  font-style:normal;
}
body.landing-page .hero-copy .hero-description {
  max-width:465px;
  color:#607b8c;
  font-size:13.25px;
  font-weight:420;
  line-height:1.75;
  text-wrap:pretty;
}
body.landing-page .hero-copy .hero-actions {
  gap:10px;
  margin-top:25px;
}
body.landing-page .hero-copy .hero-actions .button {
  min-height:43px;
  padding:10px 15px;
  border-radius:10px;
  font-size:11.5px;
  line-height:1.2;
}
@media (min-width:1191px) and (max-width:1439px) {
  body.landing-page .hero-copy .rscm-hero-product-brand {margin-bottom:23px;}
  body.landing-page .hero-copy h1 {font-size:34px;line-height:1.14;}
  body.landing-page .hero-copy .hero-description {font-size:12.75px;line-height:1.68;}
}
@media (max-width:900px) {
  body.landing-page .hero-copy .rscm-hero-product-brand {margin-bottom:21px;}
  body.landing-page .hero-copy h1 {max-width:620px;font-size:clamp(31px,4.8vw,38px);}
  body.landing-page .hero-copy .hero-description {max-width:600px;font-size:13px;}
}
@media (max-width:600px) {
  body.landing-page .hero-copy .rscm-hero-product-brand {gap:11px;margin-bottom:20px;}
  body.landing-page .rscm-hero-product-logo {width:63px;height:63px;flex-basis:63px;}
  body.landing-page .rscm-hero-product-title {font-size:30px;}
  body.landing-page .rscm-hero-product-lockup {gap:5px;}
  body.landing-page .rscm-hero-product-lockup > small {font-size:9.5px;}
  body.landing-page .hero-copy h1 {margin-bottom:12px;font-size:clamp(28px,7.5vw,34px);line-height:1.17;}
  body.landing-page .hero-copy .hero-description {font-size:12.25px;line-height:1.7;}
  body.landing-page .hero-copy .hero-actions {margin-top:18px;}
  body.landing-page .hero-copy .hero-actions .button {min-height:43px;font-size:11px;}
}
@media (max-width:370px) {
  body.landing-page .rscm-hero-product-logo {width:55px;height:55px;flex-basis:55px;}
  body.landing-page .rscm-hero-product-title {font-size:27px;}
  body.landing-page .rscm-hero-product-lockup > small {font-size:8.5px;}
  body.landing-page .hero-copy h1 {font-size:27px;}
}


/* ============================================================================
   RSCM IoMT V4.3.68 — HERO BRAND ENLARGEMENT II / CSS ONLY
   Baseline V4.3.67 (approved). Product lockup only; no other layout/function.
   Original SVG demo, LED, timeline, dashboard monitor and authentication intact.
   ============================================================================ */
body.landing-page .hero-copy .rscm-hero-product-brand {
  gap:18px;
}
body.landing-page .hero-copy .rscm-hero-product-logo {
  width:102px;
  height:102px;
  flex:0 0 102px;
}
body.landing-page .hero-copy .rscm-hero-product-title {
  font-size:46px;
}
body.landing-page .hero-copy .rscm-hero-product-lockup > small {
  font-size:13.5px;
  letter-spacing:.11em;
}
@media (max-width:900px) {
  body.landing-page .hero-copy .rscm-hero-product-brand {gap:15px;}
  body.landing-page .hero-copy .rscm-hero-product-logo {width:94px;height:94px;flex-basis:94px;}
  body.landing-page .hero-copy .rscm-hero-product-title {font-size:43px;}
  body.landing-page .hero-copy .rscm-hero-product-lockup > small {font-size:12px;}
}
@media (max-width:600px) {
  body.landing-page .hero-copy .rscm-hero-product-brand {gap:12px;}
  body.landing-page .hero-copy .rscm-hero-product-logo {width:76px;height:76px;flex-basis:76px;}
  body.landing-page .hero-copy .rscm-hero-product-title {font-size:35px;}
  body.landing-page .hero-copy .rscm-hero-product-lockup > small {font-size:10.5px;}
}
@media (max-width:370px) {
  body.landing-page .hero-copy .rscm-hero-product-brand {gap:10px;}
  body.landing-page .hero-copy .rscm-hero-product-logo {width:63px;height:63px;flex-basis:63px;}
  body.landing-page .hero-copy .rscm-hero-product-title {font-size:30px;}
  body.landing-page .hero-copy .rscm-hero-product-lockup > small {font-size:9.5px;}
}


/* ==========================================================================
   RSCM IoMT V4.3.69 — HERO TYPOGRAPHY / WIDER TEXT AREA
   CSS ONLY | Baseline V4.3.68

   - Smaller h1; larger, more legible hero description.
   - Give the left copy more readable width WITHOUT changing the hero grid's
     columns, Dashboard monitor size, placement/zoom, or its 60px right inset.
   - The extra copy width borrows unused whitespace before the monitor.
   - Tablet/phone use their existing stacked layout, with smaller headlines.
   - Absolutely no changes to SVG, simulation JS, Firebase, layout shell,
     footer, institutional brand, or responsive Dashboard preview.
   ========================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-grid > .hero-copy {
    width:calc(100% + clamp(68px, 6.2vw, 85px));
    max-width:580px;
    min-width:0;
  }
  body.landing-page .hero-copy h1 {
    width:100%;
    max-width:100%;
    font-size:29.5px;
    line-height:1.19;
    letter-spacing:-.032em;
    text-wrap:pretty;
  }
  body.landing-page .hero-copy .hero-description {
    width:100%;
    max-width:100%;
    font-size:14.75px;
    line-height:1.70;
    text-wrap:pretty;
  }
}
@media (min-width:1440px) {
  body.landing-page .hero-grid > .hero-copy {
    width:calc(100% + clamp(105px, 8vw, 125px));
  }
  body.landing-page .hero-copy h1 {font-size:32px;line-height:1.19;}
  body.landing-page .hero-copy .hero-description {font-size:15.5px;line-height:1.72;}
}
@media (min-width:601px) and (max-width:1190px) {
  body.landing-page .hero-grid > .hero-copy {width:100%;max-width:min(720px,100%);}
  body.landing-page .hero-copy h1 {width:100%;max-width:660px;font-size:29px;line-height:1.22;}
  body.landing-page .hero-copy .hero-description {width:100%;max-width:690px;font-size:15px;line-height:1.7;}
}
@media (max-width:600px) {
  body.landing-page .hero-copy h1 {
    width:100%;max-width:100%;
    font-size:clamp(25px,6.1vw,28px);
    line-height:1.2;
    letter-spacing:-.032em;
  }
  body.landing-page .hero-copy .hero-description {
    width:100%;max-width:100%;
    font-size:14px;
    line-height:1.68;
  }
}
@media (max-width:370px) {
  body.landing-page .hero-copy h1 {font-size:24.5px;}
  body.landing-page .hero-copy .hero-description {font-size:13.75px;}
}


/* ============================================================================
   RSCM IoMT V4.3.70 — HERO COPY NARROWER + 14PX LEFT ADJUSTMENT
   Baseline: V4.3.69 (hero typography + Get Started / Simulasi IoMT)
   CSS ONLY. Geometri monitor showcase, dua logo, dashboard preview, animasi
   tiga kondisi, kontrol Jeda, Firebase Auth, dan footer tidak berubah.

   Desktop: persempit area copy tanpa mengubah grid dua kolom; geser 14px
   ke kiri menggunakan relative positioning agar kolom monitor tidak bergerak.
   Laptop menengah: penyesuaian kiri lebih ringan 12px.
   Tablet/HP <= 1190px: tidak dimodifikasi untuk mencegah regresi.
   ============================================================================ */
@media (min-width:1191px) {
  body.landing-page .hero-grid > .hero-copy {
    position:relative;
    left:-14px;
    width:100%;
    max-width:490px;
    min-width:0;
    box-sizing:border-box;
  }
  body.landing-page .hero-grid > .hero-copy > h1,
  body.landing-page .hero-grid > .hero-copy > .hero-description {
    width:100%;
    max-width:100%;
  }
}
@media (min-width:1191px) and (max-width:1439px) {
  body.landing-page .hero-grid > .hero-copy {
    left:-12px;
    max-width:465px;
  }
}

/* ==========================================================================
   RSCM IoMT V4.3.71 — DESKTOP HERO COPY MOVED RIGHT / CSS-ONLY
   Baseline: the user-uploaded index.css containing the V4.3.70 rules.
   Shift the entire .hero-copy block right while leaving its column widths,
   monitor geometry, preview animation, footer and <=1190px layout untouched.
   At desktop widths with 40px side gutters: 40px + 20px = 60px left inset.
   ========================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-grid > .hero-copy {
    left:20px;
  }
}
/* ============================================================================
   RSCM IoMT V4.3.72 — HERO COPY +20PX KE KANAN DARI V4.3.71
   CSS-only. Hanya desktop/laptop >=1191px; tata letak tablet/HP tidak berubah.
   Mengubah posisi relatif hero-copy dari 20px menjadi 40px.
   Ukuran teks, lebar copy, CTA, posisi monitor, JS simulasi, dan autentikasi tetap.
   ============================================================================ */
@media (min-width:1191px) {
  body.landing-page .hero-grid > .hero-copy {
    left:40px;
  }
}

/* ============================================================================
   RSCM IoMT V4.3.73 — HERO COPY NAIK 35PX / CSS-ONLY
   Baseline: V4.3.72. Pertahankan left:40px, geser hero-copy 35px ke atas.
   Hanya desktop/laptop >=1191px; mobile/tablet, grid, dan monitor tidak berubah.
   ============================================================================ */
@media (min-width:1191px) {
  body.landing-page .hero-grid > .hero-copy {
    top:-35px;
  }
}

/* ============================================================================
   RSCM IoMT V4.3.74 — HERO COPY NAIK +10PX, KANAN +10PX / CSS-ONLY
   Baseline: V4.3.73; perubahan kumulatif: top -35px -> -45px,
   left 40px -> 50px. Hanya desktop/laptop >=1191px.
   Tidak mengubah layout <=1190px, ukuran monitor, HTML, JS, atau autentikasi.
   ============================================================================ */
@media (min-width:1191px) {
  body.landing-page .hero-grid > .hero-copy {
    left:50px;
    top:-45px;
  }
}

/* ============================================================================
   RSCM IoMT V4.3.75 — SHIFT PUBLIC DASHBOARD SHOWCASE 10PX TO THE LEFT
   CSS ONLY | Baseline: V4.3.74 full-file replacement.

   Visual-only: keep the left hero copy at left:50px / top:-45px.
   Move the monitor and its simulation disclaimer together by 10 rendered px,
   preserving their prior zoom factor and original dimensions.
   1191–1439px: right 30 / .84 = 35.714286 CSS px.
   >=1440px:    right 30 / .76 = 39.473684 CSS px.
   Disclaimer is not zoomed; its right offset changes from 20px to 30px.
   <=1190px: No override. No HTML, JS, auth, or operational Dashboard changes.
   ============================================================================ */
@media (min-width:1191px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    right:35.714286px;
  }
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-disclaimer {
    right:30px;
  }
}

@media (min-width:1440px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    right:39.473684px;
  }
}

/* ============================================================================
   RSCM IoMT V4.3.76 — HERO SIDE MARGINS SYMMETRICAL / CSS ONLY
   Baseline: V4.3.75; no markup, JS, Firebase, or clinical feature changes.

   Desktop hero has 40px outside gutters. Its left copy is shifted 50px right
   (x = 90px from the viewport's left edge). Match the visible right edge of
   the preview monitor AND its disclaimer to 90px from the right viewport edge:
   container right gutter 40px + desired visual relative inset 50px.

   Keep the existing zoom values (0.84/0.76), width, vertical alignment, and
   internal preview exactly the same; CSS relative 'right' scales with zoom.
   Laptop 1191–1439px: 50px / .84 = 59.523810 CSS px.
   Desktop >=1440px:   50px / .76 = 65.789474 CSS px.
   Mobile/tablet <=1190px unchanged.
   ============================================================================ */
@media (min-width:1191px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    right:59.523810px;
  }
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-disclaimer {
    right:50px;
  }
}

@media (min-width:1440px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    right:65.789474px;
  }
}


/* ============================================================================
   RSCM IoMT V4.3.80 — WHITE DESKTOP / REFERENCE 3D SHOWCASE
   Baseline HTML: V4.3.79; baseline CSS: V4.3.76.
   Target: selected user visual reference, WITHOUT decorative backdrop.

   PUBLIC UI ONLY. Preserve existing desktop hero offsets, original Dashboard
   showcase dimensions/zoom, phase JS, buttons, LED, all IDs/data attributes,
   mobile/tablet baseline, footer and ALL authentication/clinical functions.
   ============================================================================ */

/* Decorative benefit row is desktop-only. It is outside normal flow so the
   previously approved hero alignment and monitor scale do not reflow. */
body.landing-page .rscm-hero-benefits {
  display: none;
}

@media (min-width: 1191px) {
  /* No background waves, photos, marketing decoration or changed section tone. */
  body.landing-page,
  body.landing-page .hero-section {
    background: #fff;
  }
  body.landing-page .hero-section::before,
  body.landing-page .hero-section::after {
    display: none;
  }

  /* Keep the exact existing left/top offsets set in V4.3.74 and the
     symmetrical 90px outside gutters set in V4.3.76. */
  body.landing-page .hero-copy .rscm-hero-product-logo {
    filter: drop-shadow(0 3px 5px rgba(28, 93, 99, .08));
  }
  body.landing-page .hero-copy .hero-actions .button {
    border-radius: 11px;
    min-height: 43px;
    box-shadow: 0 5px 12px rgba(26, 78, 90, .07),
                0 13px 22px rgba(30, 82, 95, .045);
  }
  body.landing-page .hero-copy .hero-actions .button-primary {
    background: linear-gradient(180deg, #5cbbb2 0%, #278b84 100%);
    box-shadow: 0 6px 13px rgba(38, 119, 112, .18),
                0 14px 24px rgba(42, 112, 104, .08),
                inset 0 1px 0 rgba(255, 255, 255, .32);
  }
  body.landing-page .hero-copy .hero-actions .button-quiet {
    border-color: #c5e2dd;
    background: #fff;
    box-shadow: 0 3px 11px rgba(37, 84, 101, .055),
                inset 0 1px 0 #fff;
  }

  /* Real DOM content, not pseudo-text, and no new app/data dependencies. */
  body.landing-page .rscm-hero-benefits {
    position: absolute;
    top: calc(100% + 53px);
    left: 0;
    display: grid;
    grid-template-columns: .94fr 1.27fr 1fr;
    gap: 0;
    width: min(586px, calc(100% + 86px));
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #17384c;
  }
  body.landing-page .rscm-hero-benefit {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 0 14px 0 0;
  }
  body.landing-page .rscm-hero-benefit + .rscm-hero-benefit {
    border-left: 1px solid #e3ecf0;
    padding-left: 15px;
  }
  body.landing-page .rscm-hero-benefit-icon {
    display: inline-grid;
    flex: 0 0 44px;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #d9eeee;
    border-radius: 12px;
    color: #258b85;
    background: #f0faf9;
    box-shadow: 0 2px 6px rgba(44, 91, 102, .035),
                inset 0 1px 0 #fff;
  }
  body.landing-page .rscm-hero-benefit-icon svg {
    display: block;
    width: 21px;
    height: 21px;
  }
  body.landing-page .rscm-hero-benefit-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding-top: 2px;
  }
  body.landing-page .rscm-hero-benefit-copy strong {
    color: #213d52;
    font-size: 11.1px;
    font-weight: 760;
    line-height: 1.35;
  }
  body.landing-page .rscm-hero-benefit-copy small {
    color: #7b90a0;
    font-size: 9.35px;
    font-weight: 450;
    line-height: 1.5;
  }

  /* Stand-alone demo monitor only: white screen, original DARK bezel from
     chosen reference, tactile silver stand, 3D shadow. No fake screenshot. */
  /* Keep the original stable front-facing monitor position.
     Only the desktop styling changes, not the viewing angle. */
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    transform: none;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 10px 12px rgba(28, 54, 68, .08))
            drop-shadow(0 24px 20px rgba(25, 52, 66, .12));
    backface-visibility: hidden;
  }
  body.landing-page .rscm-preview-bezel {
    padding: 8px 8px 0;
    border: 1px solid #202830;
    border-radius: 22px 22px 8px 8px;
    background: linear-gradient(180deg, #2b333b 0%, #1c232b 42%, #121920 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08),
                inset -1px 0 0 rgba(255,255,255,.04),
                0 10px 24px rgba(7, 13, 19, .18);
  }
  body.landing-page .rscm-preview-screen {
    border: 1px solid #252d35;
    border-radius: 13px 13px 3px 3px;
    background: #fff;
  }
  body.landing-page .rscm-preview-monitor-chin {
    background: linear-gradient(180deg, #232c34, #10171d);
    border-color: #182029;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  body.landing-page .rscm-preview-monitor-neck {
    background: linear-gradient(90deg, #242d34, #3c4750 46%, #242d34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  body.landing-page .rscm-preview-monitor-base {
    background: linear-gradient(180deg, #3c4751, #232b33 61%, #151b22);
    border-color: #202a32;
    box-shadow: 0 4px 6px rgba(8, 16, 24, .16),
                0 8px 12px rgba(8, 16, 24, .10);
  }
}

/* Short desktop windows: don't draw the feature strip over the page footer. */
@media (min-width: 1191px) and (max-height: 740px) {
  body.landing-page .rscm-hero-benefits { display: none; }
}

/* Laptop viewport: keep the existing mini-Dashboard visual sizes and hero grid. */
@media (min-width: 1191px) and (max-width: 1439px) {
  body.landing-page .rscm-hero-benefits {
    top: calc(100% + 39px);
    width: min(505px, calc(100% + 52px));
  }
  body.landing-page .rscm-hero-benefit { gap: 7px; padding-right: 8px; }
  body.landing-page .rscm-hero-benefit + .rscm-hero-benefit { padding-left: 9px; }
  body.landing-page .rscm-hero-benefit-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 10px;
  }
  body.landing-page .rscm-hero-benefit-icon svg { width: 18px; height: 18px; }
  body.landing-page .rscm-hero-benefit-copy strong { font-size: 9.8px; }
  body.landing-page .rscm-hero-benefit-copy small { font-size: 8.4px; }
}

@media (min-width: 1440px) {
  /* Keep the previously approved text sizes/left positioning unchanged;
     only the extra (noninteractive) feature row gets reference-like spacing. */
  body.landing-page .rscm-hero-benefits {
    width: min(586px, calc(100vw - 914px));
  }
}


/* ===========================================================================
   RSCM IoMT V4.3.84 — INTEGRATED SILVER MONITOR PEDESTAL
   CSS-only correction of V4.3.83: remove angular faceted base.
   Scope: public dashboard preview desktop >=1191px ONLY.
   Monitor viewpoint, width, offset, simulated dashboard and mobile unchanged.
   =========================================================================== */
@media (min-width: 1191px) {
  /* Softly tapered brushed aluminum neck. */
  body.landing-page .rscm-preview-monitor-neck {
    position: relative;
    z-index: 0;
    width: 22%;
    height: auto;
    aspect-ratio: 8 / 1;
    margin: 0 auto -2px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(24% 0, 76% 0, 81% 100%, 19% 100%);
    background:
      linear-gradient(180deg, rgba(47, 69, 82, .14), transparent 28%, rgba(255, 255, 255, .12) 100%),
      linear-gradient(90deg, #9eacb7 0%, #bac8d1 22%, #d5dfe6 45%,
                    #dce5eb 53%, #c6d2db 77%, #9eacb8 100%);
    box-shadow: none;
  }
  body.landing-page .rscm-preview-monitor-neck::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(74, 97, 111, .11), transparent 77%);
    pointer-events: none;
  }

  /* Low, broad rounded foot. No hard-edged diagonal pieces. */
  body.landing-page .rscm-preview-monitor-base {
    position: relative;
    z-index: 1;
    display: block;
    width: 35%;
    height: auto;
    aspect-ratio: 12.5 / 1;
    margin: 0 auto max(0px, calc(73px - 5.55%));
    overflow: hidden;
    border: 1px solid #b1bec8;
    border-radius: 22px 22px 7px 7px / 20px 20px 7px 7px;
    background: linear-gradient(180deg, #d5dee4 0%, #c1ced7 46%, #9eafbc 83%, #8598a6 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .94),
      inset 0 -1px 0 rgba(96, 118, 132, .24),
      0 4px 7px rgba(35, 60, 75, .10),
      0 12px 17px rgba(37, 61, 75, .09);
  }
  /* Continuous subtly curved silver upper surface, not a trapezoid overlay. */
  body.landing-page .rscm-preview-monitor-base::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 1px 2px 16%;
    border-radius: 22px 22px 4px 4px / 19px 19px 4px 4px;
    background:
      linear-gradient(180deg, rgba(249, 251, 252, .24), transparent 35%, rgba(98, 119, 135, .08) 100%),
      linear-gradient(90deg, #b9c6cf 0%, #d1dce3 22%, #dce5ea 48%,
                    #d3dee5 73%, #b8c6d0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    pointer-events: none;
  }
  /* Thin integrated front lip, deliberately low contrast. */
  body.landing-page .rscm-preview-monitor-base::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15%;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg, #d5e0e7, #8c9eab 70%, #8294a1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
    pointer-events: none;
  }
}


/* ==========================================================================
   RSCM IoMT V4.3.86 — BLACK METALLIC STAND / FINAL CASCADE FIX
   Scope: public landing showcase desktop only (>=1191px).
   V4.3.84 contains later silver pedestal rules and pseudo-element overlays;
   V4.3.85 changed primary colors but was overridden by those silver layers.
   Keep 100% of stand geometry, size, layout and other UI untouched.
   ========================================================================== */
@media (min-width: 1191px) {
  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-neck {
    border-color: #1a232c;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .13), transparent 34%, rgba(255, 255, 255, .035) 100%),
      linear-gradient(90deg,
        #161d24 0%, #2b343d 22%, #3b454e 46%,
        #414b55 53%, #2c353e 76%, #131a21 100%);
    box-shadow: none;
  }

  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-neck::before {
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .27), transparent 77%);
  }

  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-base {
    border-color: #252d35;
    background: linear-gradient(180deg,
      #353f48 0%, #252e36 46%, #161d24 83%, #0d1319 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .15),
      inset 0 -1px 0 rgba(0, 0, 0, .27),
      0 4px 7px rgba(7, 14, 20, .14),
      0 12px 17px rgba(7, 14, 20, .11);
  }

  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-base::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .075), transparent 35%, rgba(0, 0, 0, .10) 100%),
      linear-gradient(90deg,
        #222a32 0%, #333d46 22%, #3d4750 48%,
        #303a43 73%, #1e262e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  }

  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-base::after {
    background: linear-gradient(180deg, #333e47 0%, #1b232b 70%, #10161d 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  }
}

/* V4.3.87 stand neck refinement: taller straight rectangular neck. */
body.landing-page .rscm-preview-monitor-neck{height:76px;width:10.5%;border-radius:0 0 4px 4px;clip-path:none;}

/* ================================================================
   RSCM IoMT V4.3.89 — SHOWCASE AUTO-PLAY / CLEAN MONITOR CHIN
   Hanya label & penyelarasan dagu monitor publik.
   Tombol Jeda dihapus dari HTML; index.js menangani toggle opsional.
   Semua geometri monitor, tiang hitam V4.3.87, responsivitas,
   fase animasi dan data simulasi tetap seperti sebelumnya.
   ================================================================ */
body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-chin {
  position: relative;
  justify-content: center;
}
body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-chin .rscm-preview-monitor-led {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}
body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-brand {
  display: block;
  min-width: 0;
  max-width: calc(100% - 42px);
  margin-inline: auto;
  color: inherit;
  text-align: center;
  font-weight: 700;
  letter-spacing: .10em;
}
@media (max-width: 600px) {
  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-chin .rscm-preview-monitor-led {
    left: 10px;
  }
}


/* ==================================================================
   RSCM IoMT V4.3.90 — Mini-Dashboard Brand Identity Parity
   Copy visual language of the public header into the STATIC showcase:
   mark + RSCM | IoMT + SIDERAIL MONITORING + Kemenkes/RSCM.
   Preview remains display-only; no navigation, Auth, or data changes.
   All selectors are scoped to the public mini-Dashboard.
   ================================================================== */

body.landing-page .rscm-dashboard-preview .rscm-preview-brandline {
  height: 47px;
  min-width: 0;
  justify-content: center;
  overflow: hidden;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .rscm-preview-public-identities {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  white-space: nowrap;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .rscm-public-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex: 0 1 auto;
  margin: 0;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .rscm-public-logo {
  display: block;
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .brand-lockup {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .brand-lockup strong {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -.032em;
  color: #17384c;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .brand-lockup strong > span:last-child {
  font-size: 8.8px;
  color: #218b85;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .brand-divider {
  display: block;
  width: 1px;
  height: 8px;
  flex: 0 0 1px;
  background: #ccd8df;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .brand-lockup small {
  display: block;
  margin-top: 2px;
  font-size: 4.5px;
  font-weight: 720;
  letter-spacing: .03em;
  line-height: 1.2;
  color: #6e8190;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .rscm-public-identity-divider {
  display: block;
  width: 1px;
  height: 20px;
  flex: 0 0 1px;
  background: #d7e0e4;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .rscm-public-institution-mark {
  display: flex;
  width: 58px;
  max-width: 58px;
  min-width: 0;
  flex: 0 0 58px;
  align-items: center;
  justify-content: center;
}

body.landing-page .rscm-dashboard-preview
.rscm-preview-brandline .rscm-public-institution-mark img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 26px;
  object-fit: contain;
}

/* 801–1190px: Sidebar is 145px wide; preserve brand proportions. */
@media (min-width: 801px) and (max-width: 1190px) {
  body.landing-page .rscm-dashboard-preview
  .rscm-preview-brandline .rscm-preview-public-identities {
    gap: 3px;
  }

  body.landing-page .rscm-dashboard-preview
  .rscm-preview-brandline .rscm-public-logo {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    flex-basis: 18px;
  }

  body.landing-page .rscm-dashboard-preview
  .rscm-preview-brandline .brand-lockup strong {
    font-size: 7.7px;
  }

  body.landing-page .rscm-dashboard-preview
  .rscm-preview-brandline .brand-lockup strong > span:last-child {
    font-size: 7.6px;
  }

  body.landing-page .rscm-dashboard-preview
  .rscm-preview-brandline .brand-lockup small {
    font-size: 3.9px;
    margin-top: 1px;
  }

  body.landing-page .rscm-dashboard-preview
  .rscm-preview-brandline .rscm-public-institution-mark {
    width: 47px;
    max-width: 47px;
    flex-basis: 47px;
  }
}


/* V4.3.92 — sambungan tetap lurus, tetapi pojok kiri/kanan bawah monitor kembali melengkung. */
body.landing-page .rscm-preview-bezel{border-radius:20px 20px 0 0;}
body.landing-page .rscm-preview-screen{border-radius:11px 11px 0 0;}
body.landing-page .rscm-preview-monitor-chin{border-radius:0 0 15px 15px;overflow:hidden;}

/* V4.3.93 — dagu monitor lebih tinggi, label brand sedikit lebih besar. */
body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-chin{height:38px;padding:0 18px;}
body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-chin .rscm-preview-monitor-led{left:18px;}
body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-brand{font-size:10.6px;line-height:1;font-weight:780;letter-spacing:.11em;}
@media (max-width:600px){body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-chin{height:36px;padding:0 14px;}body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-chin .rscm-preview-monitor-led{left:10px;}body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-brand{font-size:9.4px;}}

/* V4.3.94 — label RSCM IoMT diperbesar lagi sesuai revisi. */

/* V4.3.95 — monitor varian terpilih dibuat lebih 3D/timbul dengan layered shadow. */
@media (max-width:1190px){body.landing-page .rscm-dashboard-preview::after{width:70%;height:48px;bottom:-11px;filter:blur(15px);opacity:1;}}
@media (max-width:800px){body.landing-page .rscm-dashboard-preview::after{width:74%;height:36px;bottom:-8px;filter:blur(12px);opacity:.98;}body.landing-page .rscm-preview-monitor{filter:drop-shadow(0 14px 22px rgba(8,16,24,.14)) drop-shadow(0 30px 36px rgba(8,16,24,.18));}}

/* V4.3.96 — shadow diperkuat agar monitor lebih timbul/realistis. */

/* V4.3.97 — shadow monitor diperkuat lagi dan dibuat seimbang di kiri/kanan penyangga. */
body.landing-page .rscm-preview-monitor-neck::after{
  content:"";position:absolute;left:56%;bottom:-10px;transform:translateX(-50%);
  width:190%;height:30px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(9,15,22,.28) 0%,rgba(9,15,22,.14) 48%,rgba(9,15,22,0) 82%);
  filter:blur(9px);
}
body.landing-page .rscm-preview-monitor-base::before,
body.landing-page .rscm-preview-monitor-base::after{
  content:"";position:absolute;top:50%;pointer-events:none;z-index:-1;
  filter:blur(10px);
}
body.landing-page .rscm-preview-monitor-base::before{
  left:-6%;width:32%;height:20px;
  background:radial-gradient(ellipse at center,rgba(9,15,22,.18) 0%,rgba(9,15,22,.08) 46%,rgba(9,15,22,0) 82%);
  transform:translateY(-8%) rotate(-3deg);
}
body.landing-page .rscm-preview-monitor-base::after{
  right:-14%;width:58%;height:30px;
  background:radial-gradient(ellipse at center,rgba(9,15,22,.34) 0%,rgba(9,15,22,.18) 48%,rgba(9,15,22,0) 84%);
  transform:translateY(-14%) rotate(5deg);
}

/* V4.3.98 — shadow alas/penyangga dibuat lebih dominan di sisi kanan. */

/* ===================================================================
   RSCM IoMT V4.3.100 — CENTERED BALANCED STAND SHADOW
   Source: V4.3.99 full stylesheet provided by user.
   Scope: only public showcase at desktop >=1191px.
   Ground shadow is anchored to the monitor/stand itself, NOT hero-grid.
   A single centered elliptical gradient replaces the right-heavy projection.
   The display, stand geometry, demo JS, and <=1190px CSS are untouched.
   =================================================================== */
@media (min-width: 1191px) {
  /* Neutralize offset shadow from the older hero-visual wrapper. */
  body.landing-page .rscm-dashboard-preview::after {
    opacity: 0;
    filter: none;
  }

  /* Keep original 3D body depth from V4.3.99, front-facing, no transforms. */
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    filter: drop-shadow(0 13px 16px rgba(8, 14, 20, .16))
            drop-shadow(0 24px 26px rgba(8, 14, 20, .15));
  }

  /* Symmetric ground shade: equal horizontal reach left/right of stand. */
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -34px;
    width: 88%;
    height: 98px;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
      ellipse at 50% 49%,
      rgba(8, 13, 20, .56) 0%,
      rgba(8, 13, 20, .31) 36%,
      rgba(8, 13, 20, .12) 62%,
      rgba(8, 13, 20, 0) 84%
    );
    filter: blur(17px);
  }

  /* Re-center the small neck contact shade from the older 56% offset. */
  body.landing-page .rscm-preview-monitor-neck::after {
    left: 50%;
  }
}

/* V4.3.101 — Align benefits strip with the width of its hero-copy parent. */
@media (min-width:1191px){
  body.landing-page .hero-grid > .hero-copy > .rscm-hero-benefits {
    width:100%;max-width:100%;
  }
  body.landing-page .rscm-hero-benefit{gap:6px;padding-right:5px;}
  body.landing-page .rscm-hero-benefit + .rscm-hero-benefit{padding-left:8px;}
  body.landing-page .rscm-hero-benefit-icon{width:30px;height:30px;flex-basis:30px;border-radius:9px;}
  body.landing-page .rscm-hero-benefit-icon svg{width:17px;height:17px;}
  body.landing-page .rscm-hero-benefit-copy strong{font-size:10px;line-height:1.32;}
  body.landing-page .rscm-hero-benefit-copy small{font-size:8.7px;line-height:1.48;}
}
@media (min-width:1191px) and (max-width:1279px){
  body.landing-page .rscm-hero-benefit{flex-direction:column;align-items:flex-start;gap:7px;padding-right:7px;}
  body.landing-page .rscm-hero-benefit + .rscm-hero-benefit{padding-left:8px;}
  body.landing-page .rscm-hero-benefit-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px;}
  body.landing-page .rscm-hero-benefit-icon svg{width:18px;height:18px;}
  body.landing-page .rscm-hero-benefit-copy strong{font-size:9.8px;}
}


/* ======================================================================
   RSCM IoMT V4.3.105 — PETUGAS GENUINELY FILLED ICON
   The V4.3.104 workaround incorrectly forced the footer glyph through
   fa-thin-100.woff2 and did not achieve the bold appearance requested.
   Use the real FA Classic Solid user-shield glyph, letting the existing
   Font Awesome solid.min.css select its own actual Solid font family.
   No vendor font files or operational Dashboard assets modified.
   ====================================================================== */
body.landing-page .rscm-home-footer-access
.rscm-home-footer-action > i.rscm-footer-bold-icon {
  display: inline-block;
  flex: 0 0 21px;
  width: 21px;
  font-size: 19px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: inherit;
  -webkit-text-stroke: .3px currentColor;
}


/* =======================================================================
   RSCM IoMT V4.3.107 — PETUGAS USER-KEY / TRUE CLASSIC SOLID 900
   Source: verified Dashboard V4.3.29.1 sidebar mapping; local files swapped.
   The Pro Solid 900 glyphs live in fa-thin-100.woff2 on this installation.
   The 'fa-user-key' codepoint is e7b0 (Classic Solid, Font Awesome Pro).
   Intentionally override the inherited/incorrect font FACE selection;
   font-weight:900 by itself does NOT turn a Thin glyph into Solid.
   No SVG, injected JS, login modification, or vendor asset replacement.
   ======================================================================= */
@font-face {
  font-family: "RSCM Sidebar Classic Solid";
  src: url("../../assets/vendor/fontawesome-pro/webfonts/fa-thin-100.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: block;
}
body.landing-page .rscm-home-footer-access
.rscm-home-footer-action > i.rscm-footer-solid-key {
  display: inline-block;
  flex: 0 0 22px;
  width: 22px;
  font-family: "RSCM Sidebar Classic Solid", "Font Awesome 7 Pro" !important;
  font-style: normal !important;
  font-weight: 900 !important;
  font-variant: normal;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: inherit;
  -webkit-text-stroke: 0;
}
body.landing-page .rscm-home-footer-access
.rscm-home-footer-action > i.rscm-footer-solid-key::before {
  content: "\e7b0" !important;
  font-family: "RSCM Sidebar Classic Solid", "Font Awesome 7 Pro" !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

/* V4.3.109 — footer font maps to the same proven Classic Solid 900
   webfont as the Dashboard sidebar. No changes to vendor font files. */

/* ===========================================================================
   RSCM IoMT V4.3.110 — FONT AWESOME CLASSIC SOLID DI MINI-DASHBOARD
   Baseline V4.3.109 berhasil: vendor font lokal fa-thin-100.woff2 berisi
   Font Awesome 7 Pro Solid 900, meski nama berkasnya tidak sesuai metadata.
   Terapkan pemetaan identik hanya pada 27 ikon di mini-Dashboard Beranda.
   Ikon Petugas V4.3.109 dan seluruh tata letak/JS tidak disentuh.
   =========================================================================== */
body.landing-page .rscm-dashboard-preview i.fa-classic.fa-solid,
body.landing-page .rscm-dashboard-preview i.fa-classic.fa-solid::before {
  font-family: "RSCM Sidebar Classic Solid" !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

/* ========================================================================
   RSCM IoMT V4.3.112 — PROGRAM INOVASI ABOVE INSTITUTIONAL HEADER MARK
   - Header brand only. The mini-Dashboard and footer remain unchanged.
   - Mirrors the verified Dashboard sidebar caption: left aligned,
     formal slate type, tightly spaced above the original institution logo.
   - Does not change header height, navigation, routes, JS or clinical systems.
   ======================================================================== */
body.landing-page .site-header .rscm-public-institution-mark {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:2px;
}
body.landing-page .site-header .rscm-public-program-label {
  display:block;
  align-self:stretch;
  width:100%;
  color:#657f8b;
  font-size:8.5px;
  font-weight:800;
  line-height:1.12;
  letter-spacing:.04em;
  text-align:left;
  white-space:nowrap;
}
@media (max-width:1200px) {
  body.landing-page .site-header .rscm-public-program-label {
    font-size:7px;
    letter-spacing:.02em;
  }
}
@media (max-width:600px) {
  body.landing-page .site-header .rscm-public-program-label {
    font-size:6px;
    letter-spacing:0;
  }
}
@media (max-width:370px) {
  body.landing-page .site-header .rscm-public-program-label {
    font-size:5px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.113 — BALANCED PUBLIC HEADER BRAND HEIGHT
   Match the whole institutional stack (Program Inovasi + logo) to the
   existing IoMT brand height at each breakpoint. The brand/logo files,
   public navigation, mini-Dashboard, JS and clinical subsystems stay intact.
   ======================================================================== */
body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark {
  width:96px;
  max-width:96px;
  flex:0 0 96px;
}
body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark img {
  width:100%;
  max-width:100%;
  height:auto;
  max-height:25px;
}
@media (max-width:1200px) {
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark {
    width:85px;
    max-width:85px;
    flex-basis:85px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark img {
    max-height:23px;
  }
}
@media (max-width:600px) {
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark {
    width:74px;
    max-width:74px;
    flex-basis:74px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark img {
    max-height:20px;
  }
}
@media (max-width:370px) {
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark {
    width:64px;
    max-width:64px;
    flex-basis:64px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark img {
    max-height:18px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.114 — THREE ACTION BUTTONS / CLASSIC SOLID 900
   Reuse the confirmed Pro Solid 900 face that powers Footer Petugas and
   Dashboard Sidebar V4.3.29.1 (on this installation the font assets have
   mismatched filenames). No font asset, vendor CSS or JS is changed.
   Scope: main topbar Masuk, hero Get Started, hero Simulasi IoMT only.
   Icon order is defined solely by existing HTML child order.
   ======================================================================== */
body.landing-page .site-header .nav-actions > a.button > i.rscm-cta-fa-icon,
body.landing-page .hero-copy .hero-actions > a.button > i.rscm-cta-fa-icon {
  display:inline-flex;
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
  flex:0 0 16px;
  width:16px;
  min-width:16px;
  height:16px;
  min-height:16px;
  padding:0;
  margin:0;
  border:0;
  background:none;
  font-family:"RSCM Sidebar Classic Solid" !important;
  font-style:normal !important;
  font-weight:900 !important;
  font-variant:normal;
  font-size:16px;
  line-height:1;
  color:inherit;
  vertical-align:middle;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
body.landing-page .site-header .nav-actions > a.button > i.rscm-cta-fa-icon::before,
body.landing-page .hero-copy .hero-actions > a.button > i.rscm-cta-fa-icon::before {
  font-family:"RSCM Sidebar Classic Solid" !important;
  font-style:normal !important;
  font-weight:900 !important;
  line-height:1;
}
/* Topbar's original trailing SVG used a compact 13px slot. */
body.landing-page .site-header .nav-actions > a.button > i.rscm-cta-fa-icon {
  flex-basis:14px;
  width:14px;
  min-width:14px;
  height:14px;
  min-height:14px;
  font-size:14px;
}


/* ========================================================================
   RSCM IoMT V4.3.115 — HERO TOP-ANCHORED POSITION (DESKTOP ONLY)
   Align the two columns to a fixed document-top offset, not to the center
   of the viewport-height grid. On the 1440x900 reference, both hero-copy
   and preview move 30px upward from V4.3.114 (210->180 and 194->164).
   The logo/copy sits 16px below the preview's top edge as in the reference.
   A taller viewport adds whitespace BELOW the two sections, never above.
   Limit to >=1191px: all tablet/mobile stack rules remain untouched.
   Do not change monitor zoom, 3D stand/shadow, simulator or auth behavior.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-grid {
    align-items:start;
    padding-top:164px;
  }
  body.landing-page .hero-grid > .hero-copy {
    top:0;
    margin-top:16px;
  }
  body.landing-page .hero-grid > .hero-visual.rscm-dashboard-preview {
    align-self:start;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.116 — THREE HERO FEATURE CARDS / CLASSIC SOLID
   Presentation-only on the public landing page. Preserve approved WHITE
   background, anchored hero/monitor positions, three-phase rail demo,
   Firebase/Auth, operational Dashboard, and all existing CSS rules.
   Three static informative cards are immediately below the hero CTAs.
   ======================================================================== */
body.landing-page .hero-copy > .rscm-hero-feature-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  width:100%;
  max-width:490px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}
body.landing-page .hero-copy .rscm-hero-feature-card {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:65px;
  margin:0;
  padding:10px 9px;
  border:1px solid #e3ebef;
  border-radius:13px;
  color:#24445a;
  background:#fff;
  box-shadow:0 3px 8px rgba(47,83,102,.045),
             0 10px 20px rgba(47,83,102,.035),
             inset 0 1px 0 #fff;
}
body.landing-page .hero-copy .rscm-hero-feature-card > i.fa-classic.fa-solid.rscm-hero-feature-icon,
body.landing-page .hero-copy .rscm-hero-feature-card > i.fa-classic.fa-solid.rscm-hero-feature-icon::before {
  font-family:"RSCM Sidebar Classic Solid" !important;
  font-style:normal !important;
  font-weight:900 !important;
  font-synthesis:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
}
body.landing-page .hero-copy .rscm-hero-feature-card > i.rscm-hero-feature-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:26px;
  padding:0;
  margin:0;
  font-size:23px;
  color:#278b84;
  text-align:center;
}
body.landing-page .hero-copy .rscm-hero-feature-label {
  display:block;
  flex:1 1 auto;
  min-width:0;
  font-size:10.8px;
  font-weight:740;
  line-height:1.35;
  letter-spacing:-.012em;
  overflow-wrap:normal;
}
@media (min-width:1191px) and (max-width:1439px) {
  body.landing-page .hero-copy > .rscm-hero-feature-cards {
    gap:7px;
    margin-top:22px;
  }
  body.landing-page .hero-copy .rscm-hero-feature-card {
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    min-height:85px;
    gap:6px;
    padding:9px 8px;
  }
  body.landing-page .hero-copy .rscm-hero-feature-card > i.rscm-hero-feature-icon {
    flex-basis:20px;
    width:20px;
    height:20px;
    font-size:19px;
  }
  body.landing-page .hero-copy .rscm-hero-feature-label {
    font-size:9.6px;
    line-height:1.3;
  }
}
@media (min-width:601px) and (max-width:1190px) {
  body.landing-page .hero-copy > .rscm-hero-feature-cards {
    max-width:560px;
  }
}
@media (max-width:600px) {
  body.landing-page .hero-copy > .rscm-hero-feature-cards {
    gap:7px;
    margin-top:20px;
  }
  body.landing-page .hero-copy .rscm-hero-feature-card {
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    min-height:81px;
    gap:7px;
    padding:9px 8px;
  }
  body.landing-page .hero-copy .rscm-hero-feature-card > i.rscm-hero-feature-icon {
    flex-basis:19px;
    width:20px;
    height:19px;
    font-size:19px;
  }
  body.landing-page .hero-copy .rscm-hero-feature-label {
    font-size:10px;
    line-height:1.32;
  }
}
@media (max-width:420px) {
  body.landing-page .hero-copy > .rscm-hero-feature-cards {
    grid-template-columns:1fr;
    gap:7px;
  }
  body.landing-page .hero-copy .rscm-hero-feature-card {
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    min-height:47px;
    gap:11px;
    padding:9px 12px;
  }
  body.landing-page .hero-copy .rscm-hero-feature-label {
    font-size:11px;
    line-height:1.25;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.118 — LAPTOP SHOWCASE SLIGHTLY LARGER / CSS ONLY
   Baseline: V4.3.117; the original laptop monitor uses width + zoom .84.
   - 1191–1279px: 85% (gentle change to protect the narrower hero text).
   - 1280–1439px: 87% (slightly larger for typical laptop screens).
   The original right-side 50px visual inset is preserved by compensating
   relative right offsets for each zoom level (50px / zoom).
   >=1440px and <=1190px unchanged. No monitor/stand redesign, JS or auth.
   ======================================================================== */
@media (min-width:1191px) and (max-width:1279px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    width:85%;
    zoom:.85;
    right:58.823529px;
  }
}
@media (min-width:1280px) and (max-width:1439px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-preview-monitor {
    width:87%;
    zoom:.87;
    right:57.471264px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.119 — DESKTOP FOOTER CLOSE TO HERO CONTENT / CSS ONLY
   V4.3.115 anchors both hero columns to a fixed position from page top,
   but the legacy viewport-dependent grid min-height creates blank space
   below the monitor on tall desktop screens. Restore content-driven height.
   Keep desktop hero top offsets, 50px lower spacing, monitor 3D shadow,
   laptop zoom, white background and all <=1190px layouts untouched.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-grid {
    min-height:0;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.120 — FOOTER FILLS REMAINING DESKTOP VIEWPORT
   Public index only, desktop >=1191px. Preserve content-driven hero height
   from V4.3.119 and the existing hero-to-footer gap. On a tall viewport,
   expand only the footer teal background to the screen bottom. Mobile,
   showcase geometry, simulation, HTML and Firebase remain unchanged.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page {
    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:100svh;
  }
  body.landing-page > main#main {
    flex:0 0 auto;
  }
  body.landing-page > footer.rscm-home-footer {
    flex:1 0 auto;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.121 -- DESKTOP FOOTER ANCHORED TO VIEWPORT BOTTOM
   Follow-up to V4.3.120: the footer must keep its natural height rather
   than stretching the teal background below its content.
   The white hero region grows when the viewport is taller than content;
   on shorter viewports the entire page remains normally scrollable.
   Scoped exclusively to the public landing page at desktop >=1191px.
   All hero top anchoring, showcase geometry, 3D shadow, controls, JS,
   links, responsive tablet/mobile styling, and Firebase are untouched.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page > main#main {
    display:flex;
    flex-direction:column;
    flex:1 0 auto;
    min-width:0;
  }

  body.landing-page > main#main > section.hero-section {
    flex:1 0 auto;
  }

  body.landing-page > footer.rscm-home-footer {
    flex:0 0 auto;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.122 — HERO BRAND: RS CIPTO MANGUNKUSUMO
   Scope: subtitle beneath the large RSCM IoMT product mark on index.html.
   Match the teal color used by IoMT and use normal letter spacing.
   Existing type size, weight, breakpoints, monitor, footer and JS untouched.
   ======================================================================== */
body.landing-page .hero-copy .rscm-hero-product-lockup > small {
  color:#218b85;
  letter-spacing:normal;
}

/* ========================================================================
   RSCM IoMT V4.3.124 — HERO INSTITUTION SUBTITLE LARGER AGAIN
   Enlarge only "RS Cipto Mangunkusumo" in the large product brand lockup.
   Preserve teal #218b85, normal letter spacing and all other components.
   Font size is responsive to avoid cramped text on narrow screens.
   ======================================================================== */
body.landing-page .hero-copy .rscm-hero-product-lockup > small {
  font-size:20px;
}
@media (max-width:900px) {
  body.landing-page .hero-copy .rscm-hero-product-lockup > small {
    font-size:17px;
  }
}
@media (max-width:600px) {
  body.landing-page .hero-copy .rscm-hero-product-lockup > small {
    font-size:14px;
  }
}
@media (max-width:370px) {
  body.landing-page .hero-copy .rscm-hero-product-lockup > small {
    font-size:12px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.125 — INSTITUTION BRAND SUBTITLES
   Update only the public topbar and mini-Dashboard brand subtitles.
   Both use the same teal as "IoMT" (#218b85), without added letter spacing.
   Preserve their existing type sizes, breakpoints, widths, branding and JS.
   Footer subtitle remains untouched.
   ======================================================================== */
body.landing-page .site-header .rscm-public-brand-link .brand-lockup > small,
body.landing-page .rscm-dashboard-preview .rscm-preview-brandline .rscm-public-brand-link .brand-lockup > small {
  color:#218b85;
  letter-spacing:normal;
}

/* ========================================================================
   RSCM IoMT V4.3.128 — HERO CTA SLIGHTLY LARGER (DESKTOP ONLY)
   Enlarge only the Get Started and Simulasi IoMT buttons in the hero.
   Preserve header Masuk, 3 feature cards, 3D showcase, footer and mobile.
   Public UI only; no changes to JavaScript, authentication or IoMT data.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-copy .hero-actions > a.button {
    min-height:49px;
    padding:12px 19px;
    font-size:13px;
  }
  body.landing-page .hero-copy .hero-actions > a.button > i.rscm-cta-fa-icon {
    flex:0 0 18px;
    width:18px;
    min-width:18px;
    height:18px;
    min-height:18px;
    font-size:18px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.129 — HERO FEATURE CARD TITLE + SUBTITLE
   Scope: three informational cards below hero CTA only.
   Semantic title is bold; description is regular-weight and secondary slate.
   Keep existing Classic Solid icons, borders, shadows and responsive layout.
   No simulation JS, auth, monitor, or footer changes.
   ======================================================================== */
body.landing-page .hero-copy .rscm-hero-feature-card {
  min-height:92px;
}
body.landing-page .hero-copy .rscm-hero-feature-label {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  font-weight:400;
  letter-spacing:normal;
  overflow-wrap:break-word;
}
body.landing-page .hero-copy .rscm-hero-feature-title {
  display:block;
  color:#203b50;
  font-size:11px;
  font-weight:760;
  line-height:1.25;
  letter-spacing:-.01em;
}
body.landing-page .hero-copy .rscm-hero-feature-subtitle {
  display:block;
  color:#607b8c;
  font-size:9.5px;
  font-weight:400;
  line-height:1.38;
  letter-spacing:normal;
}
@media (min-width:1191px) and (max-width:1439px) {
  body.landing-page .hero-copy .rscm-hero-feature-card {min-height:112px;}
  body.landing-page .hero-copy .rscm-hero-feature-title {font-size:10.7px;}
  body.landing-page .hero-copy .rscm-hero-feature-subtitle {font-size:9.5px;}
}
@media (min-width:421px) and (max-width:600px) {
  body.landing-page .hero-copy .rscm-hero-feature-card {min-height:111px;}
  body.landing-page .hero-copy .rscm-hero-feature-title {font-size:10.5px;}
  body.landing-page .hero-copy .rscm-hero-feature-subtitle {font-size:9.3px;}
}
@media (max-width:420px) {
  body.landing-page .hero-copy .rscm-hero-feature-card {min-height:58px;}
  body.landing-page .hero-copy .rscm-hero-feature-title {font-size:11px;}
  body.landing-page .hero-copy .rscm-hero-feature-subtitle {font-size:10px;}
}

/* ========================================================================
   RSCM IoMT V4.3.132 — MORE COMPACT HERO FEATURE CARDS (DESKTOP ONLY)
   Reduce vertical whitespace within the three informational hero cards.
   Maintain icon/text styling and the exact original mobile/tablet baseline.
   No HTML, simulator, footer, authentication or app behavior changes.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-copy .rscm-hero-feature-card {
    min-height:66px;
    padding-top:7px;
    padding-bottom:7px;
  }
}
@media (min-width:1191px) and (max-width:1439px) {
  body.landing-page .hero-copy .rscm-hero-feature-card {
    min-height:86px;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.133 — TWO PUBLIC HEADER IDENTITIES SLIGHTLY LARGER
   Enlarge only the RSCM IoMT brand lockup and the Program Inovasi /
   Kemenkes–RSCM mark within the public topbar. Preserve 74px header height,
   nav routes, menu button, header alignment and all tablet/mobile styles.
   The mini-Dashboard brand and footer marks remain untouched.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .site-header .rscm-public-identities {
    gap:11px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-brand-link {
    gap:9px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-logo {
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong {
    font-size:18px;
  }
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong > span:last-child {
    font-size:17px;
  }
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup small {
    font-size:7.5px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-identity-divider {
    height:30px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark {
    width:96px;
    max-width:96px;
    flex:0 0 96px;
  }
  body.landing-page .site-header .rscm-public-program-label {
    font-size:8.1px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark img {
    max-height:26px;
  }
}
@media (min-width:1280px) {
  body.landing-page .site-header .rscm-public-identities {
    gap:15px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-logo {
    width:42px;
    height:42px;
    flex-basis:42px;
  }
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong {
    font-size:21px;
  }
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup strong > span:last-child {
    font-size:20px;
  }
  body.landing-page .site-header .rscm-public-brand-link .brand-lockup small {
    font-size:8.4px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-identity-divider {
    height:34px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark {
    width:112px;
    max-width:112px;
    flex:0 0 112px;
  }
  body.landing-page .site-header .rscm-public-program-label {
    font-size:9.6px;
  }
  body.landing-page .site-header .rscm-public-identities .rscm-public-institution-mark img {
    max-height:30px;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.134 — FOOTER IDENTITY + PROGRAM INOVASI
   Footer ONLY. Match institutional subtitle to the topbar/hero wording and
   present Program Inovasi above a smaller Kemenkes–RSCM mark. Align the
   complete institutional badge height to the adjacent IoMT logo (49px).
   Preserve footer tone, columns, links, monitor, simulation and all app JS.
   ======================================================================== */
body.landing-page .rscm-home-footer-brand-text > small {
  letter-spacing:normal;
}
body.landing-page .rscm-home-footer-brandline > .rscm-home-footer-institution {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  flex:0 0 143px;
  width:143px;
  height:49px;
  padding:4px 10px;
}
body.landing-page .rscm-home-footer-institution .rscm-home-footer-program-label {
  display:block;
  width:100%;
  color:#657f8b;
  font-size:9px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:normal;
  text-align:left;
  white-space:nowrap;
}
body.landing-page .rscm-home-footer-institution > img {
  display:block;
  align-self:flex-start;
  width:auto;
  max-width:120px;
  height:auto;
  max-height:27px;
  object-fit:contain;
  object-position:left center;
}
@media (max-width:1250px) {
  body.landing-page .rscm-home-footer-brandline > .rscm-home-footer-institution {
    flex-basis:135px;
    width:135px;
    padding-inline:9px;
  }
}
@media (max-width:600px) {
  body.landing-page .rscm-home-footer-brandline > .rscm-home-footer-institution {
    flex-basis:124px;
    width:124px;
    height:43px;
    padding:3px 8px;
    gap:1px;
  }
  body.landing-page .rscm-home-footer-institution .rscm-home-footer-program-label {
    font-size:8px;
  }
  body.landing-page .rscm-home-footer-institution > img {
    max-width:106px;
    max-height:23px;
  }
}
@media (max-width:370px) {
  body.landing-page .rscm-home-footer-brandline > .rscm-home-footer-institution {
    flex-basis:120px;
    width:120px;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.135 -- WIRELESS DESKTOP WORKSTATION
   A pair of image assets isolated directly from the approved visual reference.
   The live DOM-based mini-Dashboard monitor is unchanged and remains interactive.
   Accessories are independent siblings of .rscm-preview-monitor and never
   inherit its width / zoom scaling. No JavaScript or mobile changes.
   ======================================================================== */
body.landing-page .rscm-workstation-peripherals {
  display:none;
}

@media (min-width:1191px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,719fr) minmax(0,134fr);
    align-items:end;
    column-gap:4px;
    width:104%;
    max-width:none;
    min-width:0;
    height:auto;
    flex:0 0 auto;
    align-self:flex-end;
    right:4px;
    margin:20px 0 0;
    padding:0;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
  }

  body.landing-page .rscm-workstation-peripherals > img {
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    object-fit:contain;
    margin:0;
    padding:0;
    border:0;
    box-shadow:none;
  }
}

/* The hero text is taller than the monitor on narrow laptops. Keep the
   keyboard below the third feature card without moving either column. */
@media (min-width:1191px) and (max-width:1279px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    width:101.5%;
    margin-top:48px;
  }
}

/* Wide desktop reference: source keyboard+mouse is ~120% of the monitor,
   aligned ~20px inside the showcase's right boundary. */
@media (min-width:1440px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    width:91%;
    right:20px;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.136 — BLACK SLIM WIRELESS WORKSTATION VARIANT
   Accessories sourced from the user's latest selected visual reference.
   Desktop-only proportional reduction and alignment below the stable monitor.
   No changes to Dashboard markup, monitor geometry, siderail simulation,
   patient sample data, footer, shared/mobile CSS or authentication.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    grid-template-columns:minmax(0,604fr) minmax(0,108fr);
    column-gap:8px;
    width:90%;
    right:24px;
    margin-top:16px;
  }
}
@media (min-width:1191px) and (max-width:1279px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    width:87%;
    right:27px;
    margin-top:35px;
  }
}
@media (min-width:1280px) and (max-width:1439px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    width:90%;
    right:22px;
    margin-top:18px;
  }
}
@media (min-width:1440px) {
  body.landing-page .hero-visual.rscm-dashboard-preview > .rscm-workstation-peripherals {
    width:74%;
    right:60px;
    margin-top:6px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.137 -- THREE FEATURE ICON COLORS (CSS ONLY)
   The reference swatch hex codes are used in card order:
     1. Real-time     #60C0D0
     2. Keselamatan   #F4475F (updated in V4.3.150)
     3. Fleksibel    #CDDC29
   Only the Font Awesome icon colors change. Preserve white cards,
   navy titles, secondary subtitles, spacing, keyboard + mouse assets,
   3D monitor, siderail simulation, and all responsive layouts.
   ======================================================================== */
body.landing-page .hero-copy .rscm-hero-feature-card:nth-child(1) > i.rscm-hero-feature-icon {
  color:#60C0D0;
}
/* V4.3.150: Match the red start color of the mini-Dashboard Terbuka button. */
body.landing-page .hero-copy .rscm-hero-feature-card:nth-child(2) > i.rscm-hero-feature-icon {
  color:#F4475F;
}
body.landing-page .hero-copy .rscm-hero-feature-card:nth-child(3) > i.rscm-hero-feature-icon {
  color:#CDDC29;
}

/* ========================================================================
   RSCM IoMT V4.3.138 — RAISED WHITE CARD FOR HERO LOGO ONLY
   Wrap only the large hero product mark with a 100% solid white card.
   Layered shadow creates a subtle 3D/elevated effect; logo image retains
   its original visible size at every breakpoint. Text, monitor, demo,
   workstation peripherals, footer and other logo placements are unchanged.
   ======================================================================== */
body.landing-page .hero-copy .rscm-hero-logo-card {
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:114px;
  height:114px;
  flex:0 0 114px;
  /* Negative margin keeps the original image footprint and text alignment. */
  margin:-6px;
  padding:5px;
  overflow:hidden;
  border:1px solid #e3ebef;
  border-radius:21px;
  background:#fff;
  box-shadow:0 3px 8px rgba(38,74,92,.07),
             0 11px 24px rgba(38,74,92,.11),
             0 22px 38px rgba(38,74,92,.06),
             inset 0 1px 0 #fff;
}
body.landing-page .hero-copy .rscm-hero-logo-card > .rscm-hero-product-logo {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  flex:none;
  margin:0;
  object-fit:contain;
}
@media (max-width:900px) {
  body.landing-page .hero-copy .rscm-hero-logo-card {
    width:106px;
    height:106px;
    flex-basis:106px;
    border-radius:19px;
  }
}
@media (max-width:600px) {
  body.landing-page .hero-copy .rscm-hero-logo-card {
    width:86px;
    height:86px;
    flex-basis:86px;
    margin:-5px;
    padding:4px;
    border-radius:17px;
  }
}
@media (max-width:370px) {
  body.landing-page .hero-copy .rscm-hero-logo-card {
    width:73px;
    height:73px;
    flex-basis:73px;
    border-radius:15px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.139 — HERO BRAND TEXT 3PX RIGHT (DESKTOP ONLY)
   Move only the two-line RSCM IoMT / RS Cipto Mangunkusumo lockup
   3px away from the raised white logo card. Preserve the logo card,
   typography, monitor, workstation, footer and mobile baseline.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-copy .rscm-hero-product-brand > .rscm-hero-product-lockup {
    margin-left:3px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.141 — RAISED HERO WORDMARK / TEXT SHADOW
   Only the RSCM IoMT brand title and RS Cipto Mangunkusumo subtitle
   receive a subtle layered shadow. The 3px spacing, original colors,
   font sizes, logo card, mini-Dashboard, workstation and footer stay intact.
   Desktop/laptop only; original tablet/mobile visuals are preserved.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-copy .rscm-hero-product-lockup > .rscm-hero-product-title {
    text-shadow:0 1px 0 rgba(255,255,255,.88),
                0 2px 2px rgba(21,60,78,.20),
                0 5px 8px rgba(21,60,78,.13);
  }
  body.landing-page .hero-copy .rscm-hero-product-lockup > small {
    text-shadow:0 1px 0 rgba(255,255,255,.84),
                0 2px 3px rgba(25,100,92,.19),
                0 5px 9px rgba(25,100,92,.12);
  }
}

/* ========================================================================
   RSCM IoMT V4.3.142 — PRONOUNCED 3D EXTRUDED HERO BRAND (DESKTOP)
   Strengthen the previous raised-text effect with crisp stacked depth and
   a soft ambient shadow. Navy and teal retain separate shadow palettes.
   No geometry/font-size/margin change; preserve 3px offset, white logo card,
   mini-Dashboard, wireless workstation, footer, JS and mobile styling.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .hero-copy .rscm-hero-product-lockup > .rscm-hero-product-title {
    text-shadow:0 -1px 0 rgba(255,255,255,.9),
                0 1px 0 rgba(19,49,66,.50),
                0 2px 0 rgba(19,49,66,.41),
                0 3px 0 rgba(17,46,63,.33),
                0 4px 1px rgba(16,44,61,.26),
                0 7px 7px rgba(15,45,61,.25),
                0 12px 15px rgba(15,45,61,.15);
  }
  body.landing-page .hero-copy .rscm-hero-product-lockup > .rscm-hero-product-title > span {
    text-shadow:0 -1px 0 rgba(255,255,255,.88),
                0 1px 0 rgba(14,111,103,.53),
                0 2px 0 rgba(13,102,95,.44),
                0 3px 0 rgba(12,94,87,.36),
                0 4px 1px rgba(11,89,83,.29),
                0 7px 7px rgba(10,97,88,.25),
                0 12px 15px rgba(10,97,88,.15);
  }
  body.landing-page .hero-copy .rscm-hero-product-lockup > small {
    text-shadow:0 -1px 0 rgba(255,255,255,.84),
                0 1px 0 rgba(17,109,101,.46),
                0 2px 0 rgba(16,99,92,.38),
                0 3px 1px rgba(13,91,86,.30),
                0 5px 5px rgba(13,91,86,.23),
                0 9px 12px rgba(13,91,86,.15);
  }
}

/* ========================================================================
   RSCM IoMT V4.3.144 — INOVASI TEKNOLOGI RUMAH SAKIT / FEATURE SECTION TITLE
   Add only a concise formal heading above the three existing hero cards.
   Keep all cards, CTA, mini-Dashboard, wireless accessories, simulations,
   footer, mobile ordering, auth and the 3D brand styling unchanged.
   ======================================================================== */
body.landing-page .hero-copy > .rscm-hero-feature-heading {
  display:block;
  margin:32px 0 0;
  padding:0;
  color:#203b50;
  font-size:19px;
  font-weight:760;
  line-height:1.3;
  letter-spacing:normal;
}
body.landing-page .hero-copy > .rscm-hero-feature-cards {
  margin-top:9px;
}
@media (min-width:1191px) and (max-width:1439px) {
  body.landing-page .hero-copy > .rscm-hero-feature-heading {
    margin-top:30px;
    font-size:18px;
  }
  body.landing-page .hero-copy > .rscm-hero-feature-cards {
    margin-top:8px;
  }
}
@media (max-width:600px) {
  body.landing-page .hero-copy > .rscm-hero-feature-heading {
    margin-top:28px;
    font-size:16px;
  }
  body.landing-page .hero-copy > .rscm-hero-feature-cards {
    margin-top:8px;
  }
}


/* V4.3.146 — Intermediate tablet heading scale; other page areas unchanged. */
@media (min-width:601px) and (max-width:1190px) {
  body.landing-page .hero-copy > .rscm-hero-feature-heading { font-size:18px; }
}

/* ========================================================================
   RSCM IoMT V4.3.147 — DEEP BLACK WIRELESS KEYBOARD + MOUSE
   Color correction via CSS only. Match the monitor's deep black appearance
   while preserving the original transparent WebP assets, edge geometry,
   key legends, 3D shading, positioning, dimensions and mobile behavior.
   The feature heading + cards have also moved down precisely 10px by
   changing ONLY the heading's top margin at all responsive breakpoints.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page .rscm-workstation-peripherals > img.rscm-workstation-keyboard,
  body.landing-page .rscm-workstation-peripherals > img.rscm-workstation-mouse {
    filter:brightness(.72) contrast(1.23) saturate(.85);
  }
}


/* ========================================================================
   RSCM IoMT V4.3.148 — MONITOR STAND + BASE MATCH DESKTOP FRAME
   Darken the neck and pedestal so they match the desktop frame/bezel tone.
   Keep geometry, size, shadow, keyboard/mouse, and all interactions unchanged.
   ======================================================================== */
@media (min-width: 1191px) {
  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-neck {
    border-color: #1a232b;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 28%, rgba(0,0,0,.16) 100%),
      linear-gradient(90deg,
        #141b22 0%, #202932 18%, #2c3640 45%,
        #35404a 52%, #2c3640 78%, #141b22 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 8px 16px rgba(8,16,24,.16);
  }

  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-neck::before {
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .33), transparent 76%);
  }

  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-base {
    border-color: #1d252d;
    background: linear-gradient(180deg,
      #2c3741 0%, #1d262f 44%, #121920 78%, #0d1319 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.34),
      0 6px 10px rgba(7,14,20,.16),
      0 14px 20px rgba(7,14,20,.14);
  }

  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-base::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), transparent 34%, rgba(0,0,0,.12) 100%),
      linear-gradient(90deg,
        #192028 0%, #273039 22%, #33404a 48%,
        #29333c 73%, #171f27 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  }

  body.landing-page .rscm-dashboard-preview .rscm-preview-monitor-base::after {
    background: linear-gradient(180deg, #2f3a44 0%, #1b232b 68%, #0f151c 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }
}

/* ========================================================================
   RSCM IoMT V4.3.149 — ANIMATED FOOTER NAV UNDERLINE
   Mirror the main topbar's 2px left-to-right hover line on the three footer
   navigation links only. Preserve existing typography, column geometry,
   focus outline, access button, and all other page components.
   ======================================================================== */
body.landing-page nav.rscm-home-footer-column > a {
  position:relative;
  display:inline-block;
  text-decoration:none;
}
body.landing-page nav.rscm-home-footer-column > a::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-4px;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  transition:right .18s ease;
}
body.landing-page nav.rscm-home-footer-column > a:hover,
body.landing-page nav.rscm-home-footer-column > a:focus-visible {
  color:#fff;
  text-decoration:none;
}
body.landing-page nav.rscm-home-footer-column > a:hover::after,
body.landing-page nav.rscm-home-footer-column > a:focus-visible::after {
  right:0;
}
@media (prefers-reduced-motion:reduce) {
  body.landing-page nav.rscm-home-footer-column > a::after {
    transition:none;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.152 — PREMIUM SOFT FLOATING HERO CTA
   Match the approved visual reference: refined diffused teal/slate shadow,
   crisp top highlights, no hard lower extrusion / solid 3D shelf.
   Scope exclusively: Get Started + Simulasi IoMT in .hero-copy.
   Preserve button dimensions, gradient/background, border, icon, link,
   hero layout, responsive breakpoints, mobile UX and JS behavior.
   ======================================================================== */
body.landing-page .hero-copy .hero-actions > a.button {
  transition: transform .2s ease, box-shadow .22s ease;
}
body.landing-page .hero-copy .hero-actions > a.button-primary {
  box-shadow:
    0 5px 10px rgba(22, 87, 91, .10),
    0 15px 25px rgba(21, 130, 121, .22),
    0 28px 43px rgba(24, 107, 107, .09),
    inset 0 1px 0 rgba(255, 255, 255, .40);
}
body.landing-page .hero-copy .hero-actions > a.button-quiet {
  box-shadow:
    0 4px 11px rgba(28, 77, 89, .07),
    0 14px 25px rgba(26, 91, 97, .14),
    0 26px 40px rgba(28, 98, 102, .06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
@media (hover: hover) and (pointer: fine) {
  body.landing-page .hero-copy .hero-actions > a.button:hover {
    transform: translateY(-1px);
  }
  body.landing-page .hero-copy .hero-actions > a.button-primary:hover {
    box-shadow:
      0 7px 13px rgba(22, 87, 91, .12),
      0 19px 30px rgba(21, 130, 121, .25),
      0 32px 47px rgba(24, 107, 107, .11),
      inset 0 1px 0 rgba(255, 255, 255, .42);
  }
  body.landing-page .hero-copy .hero-actions > a.button-quiet:hover {
    box-shadow:
      0 6px 14px rgba(28, 77, 89, .09),
      0 18px 29px rgba(26, 91, 97, .17),
      0 30px 44px rgba(28, 98, 102, .08),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
}
body.landing-page .hero-copy .hero-actions > a.button:active {
  transform: translateY(1px);
}
body.landing-page .hero-copy .hero-actions > a.button-primary:active {
  box-shadow:
    0 3px 7px rgba(22, 87, 91, .11),
    0 8px 15px rgba(21, 130, 121, .15),
    inset 0 1px 2px rgba(8, 73, 70, .07);
}
body.landing-page .hero-copy .hero-actions > a.button-quiet:active {
  box-shadow:
    0 3px 7px rgba(28, 77, 89, .08),
    0 8px 15px rgba(26, 91, 97, .11),
    inset 0 1px 2px rgba(28, 91, 96, .035);
}
@media (prefers-reduced-motion: reduce) {
  body.landing-page .hero-copy .hero-actions > a.button {
    transition: none;
  }
}

/* ========================================================================
   RSCM IoMT — INDEX FOOTER WHITE LOGO PARITY V1
   Referensi: tentang-iomt.html / css/pages/public-pages.css.
   Hanya footer Beranda: kedua logo putih, tanpa kartu putih.
   Hero, monitor demo, rail, nav, layout dan responsive tetap tidak berubah.
   ======================================================================== */
body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-home-footer-brandline .rscm-home-footer-logo-frame,
body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-home-footer-brandline .rscm-home-footer-institution {
  background:transparent;
  border:0;
  box-shadow:none;
}
body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-home-footer-brandline .rscm-home-footer-institution {
  padding:0;
}
body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-home-footer-brandline .rscm-home-footer-logo-frame img,
body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-home-footer-brandline .rscm-home-footer-institution > img {
  filter:grayscale(1) invert(1) brightness(5) contrast(2);
  mix-blend-mode:screen;
}
body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-home-footer-brandline .rscm-home-footer-brand-text strong,
body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-home-footer-brandline .rscm-home-footer-brand-text small,
body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-home-footer-brandline .rscm-home-footer-program-label {
  color:#fff;
}
body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-home-footer-brand-primary > .rscm-home-footer-brand-text {
  transform:translateX(-8px);
}


/* ========================================================================
   RSCM IoMT V4.3.214 — RESPONSIVE DESKTOP SPLIT HERO REVEAL
   Correction of V4.3.213 oversized photo and offscreen mini-Dashboard.
   0–3 s: original Index layout is preserved (including rail showcase).
   Then: hero copy fades; monitor + keyboard move/scale into LEFT half,
   Hospital Bed IoMT image fades into RIGHT half like Tentang IoMT.
   Position variables are measured by an isolated, dependency-free module.
   No impact on footer, navbar, mobile/tablet, simulator, Auth, or backend.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page) .hero-section > .hero-grid {
    position:relative;
    isolation:isolate;
  }

  /* Preserve existing HTML grid flow and ALL initial monitor sizes. */
  body.landing-page:not(.rscm-public-page):not(.login-page) .hero-grid > .hero-copy {
    position:relative;
    z-index:4;
    transition:opacity .76s ease 0s,
               transform .95s cubic-bezier(.2,.72,.2,1) 0s,
               visibility 0s linear .76s;
  }
  body.landing-page:not(.rscm-public-page):not(.login-page) .hero-grid > .hero-visual.rscm-dashboard-preview {
    position:relative;
    z-index:5;
    transform-origin:top left;
    transition:transform 1.65s cubic-bezier(.22,.8,.16,1) .20s;
  }

  /* Right half: native About IoMT image framing, not a 73vw full-width crop. */
  body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-hero-device-reveal {
    position:absolute;
    z-index:1;
    top:0;
    right:calc(50% - 50vw);
    bottom:0;
    width:54vw;
    max-width:940px;
    height:auto;
    margin:0;
    padding:0;
    overflow:hidden;
    background:#fff;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translate3d(42px,0,0);
    transition:opacity 1.3s ease .60s,
               transform 1.55s cubic-bezier(.2,.72,.2,1) .60s,
               visibility 0s linear 1.9s;
  }
  body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-hero-device-photo {
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    /* V4.3.215: Match the About IoMT photograph's visible subject scale.
       Unlike cover, contain preserves the native 1446:1087 ratio within
       the right column instead of enlarging the image to fill its height. */
    object-fit:contain;
    object-position:right top;
    border:0;
    box-shadow:none;
  }
  /* Match About IoMT: white blend over the left edge and into bottom canvas. */
  body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-hero-device-reveal::before,
  body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-hero-device-reveal::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }
  body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-hero-device-reveal::before {
    background:linear-gradient(90deg,
      #fff 0%,rgba(255,255,255,.96) 5%,
      rgba(255,255,255,.72) 14%,rgba(255,255,255,.27) 27%,
      rgba(255,255,255,0) 40%);
  }
  body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-hero-device-reveal::after {
    background:
      linear-gradient(to bottom,
        rgba(255,255,255,0) 56%,
        rgba(255,255,255,.10) 67%,
        rgba(255,255,255,.36) 77%,
        rgba(255,255,255,.68) 86%,
        rgba(255,255,255,.92) 94%,
        #fff 100%);
    box-shadow:inset 0 -72px 82px -28px rgba(255,255,255,.98);
  }

  body.landing-page.rscm-hero-revealed:not(.rscm-public-page):not(.login-page) .hero-grid > .hero-copy {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(-38px,0,0);
  }
  /* The script fits the actual monitor+peripherals union inside the left
     section; no hardcoded -75% viewport-overflow translation is used. */
  body.landing-page.rscm-hero-revealed:not(.rscm-public-page):not(.login-page) .hero-grid > .hero-visual.rscm-dashboard-preview {
    transform:translate3d(var(--rscm-reveal-x,0px),0,0) scale(var(--rscm-reveal-scale,1));
  }
  body.landing-page.rscm-hero-revealed:not(.rscm-public-page):not(.login-page) .rscm-hero-device-reveal {
    opacity:1;
    visibility:visible;
    transform:translate3d(0,0,0);
    transition:opacity 1.3s ease .60s,
               transform 1.55s cubic-bezier(.2,.72,.2,1) .60s,
               visibility 0s linear 0s;
  }
}
@media (prefers-reduced-motion:reduce) and (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page) .hero-grid > .hero-copy,
  body.landing-page:not(.rscm-public-page):not(.login-page) .hero-grid > .hero-visual.rscm-dashboard-preview,
  body.landing-page:not(.rscm-public-page):not(.login-page) .rscm-hero-device-reveal {
    transition:none !important;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.216 — SAME MONITOR SCALE BEFORE/AFTER HERO SHIFT
   The preview starts at the exact responsive scale used in the revealed
   left section. Its initial X is calculated to center it in the RIGHT hero
   half; after 3 seconds, only horizontal position animates to the left.
   Original monitor DOM, internal mini-dashboard, sensor demo and peripherals
   are unchanged. Scope is ONLY desktop public index >=1191px.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .hero-grid > .hero-visual.rscm-dashboard-preview {
    transform-origin:top left;
    transform:translate3d(var(--rscm-reveal-start-x,0px),0,0)
              scale(var(--rscm-reveal-scale,1));
    /* No scale animation on load: the initial preview is already small. */
    transition:none;
  }

  body.landing-page.rscm-hero-revealed:not(.rscm-public-page):not(.login-page)
  .hero-grid > .hero-visual.rscm-dashboard-preview {
    transform:translate3d(var(--rscm-reveal-x,0px),0,0)
              scale(var(--rscm-reveal-scale,1));
    transition:transform 1.65s cubic-bezier(.22,.8,.16,1) .20s;
  }
}
@media (prefers-reduced-motion:reduce) and (min-width:1191px) {
  body.landing-page.rscm-hero-revealed:not(.rscm-public-page):not(.login-page)
  .hero-grid > .hero-visual.rscm-dashboard-preview {
    transition:none !important;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.218 — STRONGER BOTTOM WHITE SHADOW ON RIGHT HERO PHOTO
   Goal: add a softer but more visible white fade/shadow under the Hospital
   Bed IoMT image in the right section, while preserving the split layout,
   reveal timing, footer, navbar, and no-horizontal-scroll behavior.
   Scope: desktop public index hero photo only.
   ======================================================================== */

/* ========================================================================
   RSCM IoMT V4.3.217 — DESKTOP HERO HORIZONTAL OVERFLOW CORRECTION
   The V4.3.216 reveal remains visually identical: the monitor stays at the
   same scale, shifts left after three seconds, and Hospital Bed IoMT fades
   into the right half. The animated area must NOT widen the document.

   Cause addressed at source:
   - Desktop .hero-grid is 100% - 80px (40px gutter on each side).
   - Using 50vw for the right edge ignores the classic vertical scrollbar
     gutter on Windows, causing unwanted page-level horizontal scroll.
   - The preview wrapper has a large transform box even when the visible
     monitor and peripherals fit. Clip that animation ONLY within the hero.
   No body/html overflow hacks; no changes to navbar, footer or JS.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page) .hero-section {
    overflow-x:clip;
    overflow-y:visible;
  }

  body.landing-page:not(.rscm-public-page):not(.login-page)
  .hero-section > .hero-grid > .rscm-hero-device-reveal {
    /* Existing responsive container has 40px side gutters on desktop.
       Anchor to the actual document content edge, not to 100vw. */
    right:-40px;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.220 — CLOSE TOP GAP ON RIGHT HERO PHOTO
   Align the right-side Hospital Bed IoMT reveal to the top edge of the hero
   area so there is no blank white strip between the image and the top bar.
   Keep the split layout, reveal timing, monitor scale, footer, and seamless
   bottom fade intact. Scope: desktop public index hero photo only.
   ======================================================================== */

/* ========================================================================
   RSCM IoMT V4.3.219 — SEAMLESS BOTTOM FADE (FIX ACTUAL IMAGE EDGE)
   CSS-only correction. Previously the overlay gradient was tied to the
   taller reveal wrapper, not to the visible image produced by object-fit:
   contain. The photo ended abruptly before the overlay became white.
   Size the IMG by its intrinsic aspect ratio and fade its own alpha instead.
   Keep initial/final monitor scale, hero split, delayed reveal, no overflow,
   footer, navbar, demo controller and responsive layouts unchanged.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal > .rscm-hero-device-photo {
    /* V4.3.228: keep most of the bed visible and fade gently at its base. */
    display:block;
    width:100%;
    height:auto;
    max-height:100%;
    object-fit:contain;
    object-position:right top;
    -webkit-mask-image:linear-gradient(to bottom,
      #000 0%,
      #000 62%,
      rgba(0,0,0,.98) 69%,
      rgba(0,0,0,.85) 78%,
      rgba(0,0,0,.60) 87%,
      rgba(0,0,0,.25) 95%,
      transparent 100%);
    mask-image:linear-gradient(to bottom,
      #000 0%,
      #000 62%,
      rgba(0,0,0,.98) 69%,
      rgba(0,0,0,.85) 78%,
      rgba(0,0,0,.60) 87%,
      rgba(0,0,0,.25) 95%,
      transparent 100%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }
  /* A shorter, lighter white bottom gradient still prevents hard image edges. */
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal::after {
    inset:auto 0 0 0;
    height:37%;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.03) 26%,
      rgba(255,255,255,.12) 44%,
      rgba(255,255,255,.29) 62%,
      rgba(255,255,255,.55) 79%,
      rgba(255,255,255,.80) 91%,
      #fff 100%);
    box-shadow:none;
  }
}

/* ========================================================================
   RSCM IoMT V4.3.221 — VERTICAL PHOTO POSITION / PUBLIC BERANDA ONLY
   Geser FOTO (bukan wrapper/fade/kolom) ke bawah 54px agar bagian atas
   komposisi terlihat lebih rendah dalam section kanan setelah reveal.
   Kontainer tetap merapat ke topbar, fade bawah mengikuti foto, serta
   Dashboard/keyboard/mouse, animasi 3 detik, footer dan mobile tidak berubah.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal {
    --rscm-iomt-photo-offset-y:38px;
  }

  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal > .rscm-hero-device-photo {
    transform:translate3d(0,var(--rscm-iomt-photo-offset-y),0);
  }
}


/* ========================================================================
   RSCM IoMT V4.3.223 — PHOTO ALIGNED TO DESKTOP TOPBAR + TALLER WHITE FADE
   Based on the user's verified V4.3.222. Scope: public Index desktop >=1191px.
   - The header is 74px high; photo begins at exactly y=74px (was y=54px).
   - Source image itself remains unchanged, natural aspect ratio preserved.
   - Bottom alpha mask begins dissolving at 44% rather than 52%.
   - Soft white overlay reaches upward across 55% of the hero photo area.
   - No changes to dashboard preview, 3s animation, footer, or mobile rules.
   ======================================================================== */


/* ========================================================================
   RSCM IoMT V4.3.227 — NATURAL LEFT WHITE FADE + 6% LARGER RIGHT PHOTO
   Scope: Beranda only, desktop/laptop >=1191px.
   Keep the white fade at the left seam but let it disappear much earlier.
   Scale the RIGHT photo uniformly from its top-right anchor. Do not alter
   the hero grid, mini-Dashboard, reveal timing, bottom fade, or mobile UI.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal::before {
    background:linear-gradient(90deg,
      #fff 0%,
      #fff 7%,
      rgba(255,255,255,.98) 13%,
      rgba(255,255,255,.87) 19%,
      rgba(255,255,255,.64) 27%,
      rgba(255,255,255,.34) 35%,
      rgba(255,255,255,.10) 42%,
      rgba(255,255,255,0) 47%);
  }

  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal > .rscm-hero-device-photo {
    /* 1.06 preserves the original image's proportions (not width stretching). */
    transform:translate3d(0,var(--rscm-iomt-photo-offset-y),0) scale(1.06);
    transform-origin:top right;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.228 — BOTTOM FADE LIGHTER / LEFT SEAM DENSER
   V4.3.227 image size (106%) and photo placement are preserved.
   Desktop Index only: white starts denser at the left boundary and fades out
   fully by 47% of the right-photo container; lower fade begins later and uses
   a smaller overlay (37% instead of 55%) without its old heavy inset shadow.
   The original hero animation, monitor, navbar, footer and responsive layouts
   are unchanged. Declarations above incorporate these adjustments directly.
   ======================================================================== */


/* ========================================================================
   RSCM IoMT V4.3.229 — RIGHT PHOTO LARGER + LEFT WHITE FADE NARROWER
   Based on V4.3.228. Desktop Beranda only. Goals:
   - make the right-side Hospital Bed IoMT photo slightly larger again;
   - keep the same composition and proportions;
   - reduce how far the left white fade spreads into the photo;
   - preserve the lighter bottom fade from V4.3.228.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal::before {
    background:linear-gradient(90deg,
      #fff 0%,
      #fff 6%,
      rgba(255,255,255,.985) 11%,
      rgba(255,255,255,.90) 16%,
      rgba(255,255,255,.66) 23%,
      rgba(255,255,255,.34) 30%,
      rgba(255,255,255,.12) 36%,
      rgba(255,255,255,0) 41%);
  }

  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal > .rscm-hero-device-photo {
    transform:translate3d(0,var(--rscm-iomt-photo-offset-y),0) scale(1.10);
    transform-origin:top right;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.232 — RIGHT HERO PHOTO LARGER AND HIGHER
   Goal: make the right-side Hospital Bed IoMT image larger and move it higher
   without changing the approved perspective or other hero behavior.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal {
    --rscm-iomt-photo-offset-y:16px;
  }

  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal > .rscm-hero-device-photo {
    transform:translate3d(0,var(--rscm-iomt-photo-offset-y),0) scale(1.16);
    transform-origin:top right;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.233 — RIGHT HERO PHOTO MOVE UP 30PX MORE
   Goal: keep the approved larger image size, but move the right-side photo
   30px higher because it is still visually too low.
   ======================================================================== */
@media (min-width:1191px) {
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal {
    --rscm-iomt-photo-offset-y:-44px;
  }

  body.landing-page:not(.rscm-public-page):not(.login-page)
  .rscm-hero-device-reveal > .rscm-hero-device-photo {
    transform:translate3d(0,var(--rscm-iomt-photo-offset-y),0) scale(1.16);
    transform-origin:top right;
  }
}

/* V4.3.234 — Desktop right photo moved up an additional 30px by the final V4.3.233 offset above; size/angle/fades unchanged. */


/* ========================================================================
   RSCM IoMT V4.3.235 — LANDING PAGE MOBILE: HIDE HERO VISUALS
   Scope: index.html, viewport <= 760px (phone / narrow portrait).
   Hide the COMPLETE demonstration monitor (including bezel, chin, stand,
   keyboard and mouse) and the separate Hospital Bed IoMT photo.  Keep the
   hero copy, two CTAs and the 3 feature cards visible.  Desktop untouched.
   CSS-only: no changes to HTML, JS, auth, patient or clinical monitoring.
   ======================================================================== */
@media (max-width: 760px) {
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .hero-section > .hero-grid > .hero-visual.rscm-dashboard-preview,
  body.landing-page:not(.rscm-public-page):not(.login-page)
  .hero-section > .hero-grid > .rscm-hero-device-reveal {
    display: none !important;
  }
}


/* ========================================================================
   RSCM IoMT V4.3.237 — SHARED PUBLIC MOBILE OFF-CANVAS SIDEBAR
   Unified across public pages at <=760px. Replaces the legacy dropdown with a
   full-height right drawer. Same CSS for Beranda, Tentang, Simulasi, Akses, Login.
   V4.3.235 (hide hero photograph and preview monitor on phone) is retained.
   No auth, clinical, dashboard SPA, sensor, alarm or data changes.
   ======================================================================== */
/* Extra drawer structure stays absent from the desktop horizontal navbar. */
body.landing-page .rscm-mobile-drawer-head,
body.landing-page .rscm-mobile-drawer-caption,
body.landing-page .rscm-mobile-drawer-icon,
body.landing-page .rscm-mobile-drawer-foot,
body.landing-page .rscm-mobile-nav-scrim {
  display:none;
}

@media (max-width:760px) {
  html.rscm-mobile-nav-open,
  html.rscm-mobile-nav-open body.landing-page {
    overflow:hidden !important;
    overscroll-behavior:none;
  }

  /* Overrides the legacy @max-width:950 dropdown only on narrow phones. */
  body.landing-page > .site-header #publicNav.public-nav {
    box-sizing:border-box;
    display:flex !important;
    position:fixed !important;
    inset:0 0 0 auto !important;
    top:0 !important;
    left:auto !important;
    right:0 !important;
    bottom:0 !important;
    width:min(326px,88vw) !important;
    max-width:calc(100vw - 24px);
    height:100vh;
    height:100dvh;
    min-height:0;
    margin:0 !important;
    padding:0 0 max(10px,env(safe-area-inset-bottom)) !important;
    border:0 !important;
    border-left:1px solid #dce8ec !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:-13px 0 43px rgba(16,46,61,.19) !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    z-index:12;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(104%,0,0);
    transition:transform .24s cubic-bezier(.2,.75,.2,1),
               opacity .19s ease,
               visibility 0s linear .24s;
  }
  body.landing-page > .site-header #publicNav.public-nav.is-open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0);
    transition:transform .24s cubic-bezier(.2,.75,.2,1), opacity .19s ease;
  }

  body.landing-page > .site-header .rscm-mobile-nav-scrim:not([hidden]) {
    position:fixed;
    inset:0;
    display:block !important;
    width:100vw;
    height:100vh;
    height:100dvh;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:rgba(15,37,51,.47);
    box-shadow:none;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    cursor:pointer;
    z-index:11;
  }

  body.landing-page > .site-header #publicNav .rscm-mobile-drawer-head {
    box-sizing:border-box;
    display:flex !important;
    flex:0 0 auto;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:89px;
    padding:20px 19px 17px;
    background:#fff;
    border-bottom:1px solid #e5edf0;
  }
  body.landing-page .rscm-mobile-drawer-identity {
    display:flex;
    align-items:center;
    min-width:0;
    gap:11px;
  }
  body.landing-page .rscm-mobile-drawer-identity img {
    display:block;
    flex:0 0 37px;
    width:37px;
    height:37px;
    object-fit:contain;
  }
  body.landing-page .rscm-mobile-drawer-identity > span {
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:1px;
  }
  body.landing-page .rscm-mobile-drawer-identity strong {
    color:#17384c;
    font-size:16px;
    font-weight:800;
    line-height:1.3;
  }
  body.landing-page .rscm-mobile-drawer-identity small {
    color:#718799;
    font-size:11px;
    font-weight:600;
    line-height:1.4;
  }
  body.landing-page .rscm-mobile-drawer-close {
    box-sizing:border-box;
    display:grid;
    place-items:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid #dfebed;
    border-radius:11px;
    background:#f7fafb;
    color:#476778;
    cursor:pointer;
  }
  body.landing-page .rscm-mobile-drawer-close:hover {
    background:#eaf6f3;
    color:#087b76;
    border-color:#bee0d9;
  }
  body.landing-page #publicNav .rscm-mobile-drawer-caption {
    display:block !important;
    flex:0 0 auto;
    margin:26px 26px 10px;
    color:#7c909e;
    font-size:10px;
    font-weight:800;
    line-height:1.5;
    letter-spacing:.13em;
  }
  body.landing-page > .site-header #publicNav.public-nav > a {
    box-sizing:border-box;
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-start;
    gap:13px;
    width:auto;
    min-height:54px;
    margin:3px 15px;
    padding:13px 15px;
    border:1px solid transparent;
    border-radius:12px;
    background:#fff;
    box-shadow:none;
    color:#456579;
    font-size:14px;
    font-weight:650;
    line-height:1.4;
    text-align:left;
    white-space:normal;
    text-decoration:none;
    transition:background .16s ease, border-color .16s ease, color .16s ease;
  }
  body.landing-page > .site-header #publicNav.public-nav > a::after {
    display:none !important;
  }
  body.landing-page > .site-header #publicNav.public-nav > a:hover,
  body.landing-page > .site-header #publicNav.public-nav > a:focus-visible {
    color:#087b76;
    background:#f1faf7;
    border-color:#d3e8e1;
  }
  body.landing-page > .site-header #publicNav.public-nav > a[aria-current="page"] {
    color:#fff;
    background:linear-gradient(180deg,#42b6ad,#218b85);
    border-color:#37a39b;
    box-shadow:0 5px 12px rgba(31,129,121,.18),inset 0 1px 0 rgba(255,255,255,.24);
    font-weight:780;
  }
  body.landing-page > .site-header #publicNav.public-nav > a[aria-current="page"]:hover,
  body.landing-page > .site-header #publicNav.public-nav > a[aria-current="page"]:focus-visible {
    color:#fff;
    background:linear-gradient(180deg,#42b6ad,#218b85);
    border-color:#37a39b;
  }
  body.landing-page > .site-header #publicNav .rscm-mobile-drawer-icon {
    display:block !important;
    flex:0 0 21px;
    width:21px;
    height:21px;
    stroke:currentColor;
  }
  body.landing-page #publicNav .rscm-mobile-drawer-foot {
    box-sizing:border-box;
    display:flex !important;
    flex:0 0 auto;
    flex-direction:column;
    gap:4px;
    margin:auto 18px 0;
    padding:19px 9px 17px;
    border-top:1px solid #e5edf0;
    color:#8596a3;
    text-align:left;
  }
  body.landing-page .rscm-mobile-drawer-foot small {
    font-size:11px;
    font-weight:650;
    color:#667f8c;
  }
  body.landing-page .rscm-mobile-drawer-foot span {
    font-size:10px;
    color:#8a9ba5;
  }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  body.landing-page > .site-header #publicNav.public-nav {
    transition:none !important;
  }
}