body{overflow-x:hidden}
img{max-width:100%}
.sp-break{display:none}

/* Presentation tone: keep HospitaLink crisp without the overly-heavy SaaS-ad weight. */
.logo,
.brand{
  font-weight:760 !important;
}
.links,
.nav small{
  font-weight:620 !important;
}
.hero h1,
.section h2,
.center h2,
.dark h2,
.cta h2,
.cta-band h2{
  font-weight:620 !important;
}
.hero p,
.lead,
.center p,
.section-note,
.section .sub,
.dark p{
  font-weight:460 !important;
}
.btn,
.main-btn,
.nav .cta,
.download,
.link,
.link-action,
.coral{
  font-weight:650 !important;
}
.value div,
.bullets div,
.checks,
.strip b,
.guard h3,
.side div,
.tab,
.plan h3,
.package h3,
.step h3,
.body h3,
.feature-title h3,
.real-card .head,
.queue-card b,
.feed-item b{
  font-weight:650 !important;
}
.pill,
.tag,
.small,
.mini,
.price,
.package .price,
.metric b,
.metric-row b,
.kpi b,
.num{
  font-weight:700 !important;
}

@media(max-width:760px){
  body{
    background:#fff;
  }
  .lp{
    width:100%;
  }
  .nav{
    position:static;
    height:auto;
    padding:16px;
    gap:12px;
    align-items:flex-start;
  }
  .nav small{display:none}
  .brand{
    font-size:24px;
  }
  .mark{
    width:30px;
    height:30px;
  }
  .links{
    width:100%;
    gap:8px;
  }
  .links a:not(.cta):not(.btn){display:none}
  .nav .cta,
  .links .btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .hero{
    padding:34px 16px 40px;
    gap:30px;
    background:linear-gradient(180deg,#fff 0%,#fff 56%,#f7fbff 56%,#f7fbff 100%);
  }
  .hero>div:first-child{
    position:static;
    padding-top:0;
  }
  .hero h1{
    max-width:calc(100vw - 32px);
    font-size:30px !important;
    line-height:1.32;
    margin:0 0 24px;
    font-weight:700;
    overflow-wrap:anywhere;
  }
  .hero h1 .nowrap{
    display:inline;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .sp-break{
    display:block;
  }
  .lead,
  .hero p{
    font-size:15px;
    line-height:1.85;
    max-width:100%;
  }
  .main-btn,
  .btn{
    min-height:50px;
    height:auto;
    white-space:normal;
    line-height:1.35;
    padding:12px 16px;
    font-size:13px;
  }

  /* 01 Slack Cockpit */
  .hero-actions{
    width:100%;
    margin-top:30px;
  }
  .partners{
    margin-top:38px;
  }
  .logos{
    flex-wrap:wrap;
    gap:10px 16px;
    font-size:12px;
  }
  .slack-shell{
    max-width:100%;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 18px 38px rgba(7,25,54,.14);
  }
  .slack-top{
    height:44px;
    padding:0 14px;
    font-size:13px;
  }
  .slack-grid{
    grid-template-columns:1fr;
    min-width:0;
    min-height:0;
  }
  .slack-side{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    align-items:center;
    padding:14px 12px;
  }
  .profile{
    width:100%;
    gap:7px;
    margin-bottom:6px;
    font-size:12px;
  }
  .avatar{
    width:28px;
    height:28px;
    font-size:12px;
  }
  .side-label{
    display:none;
  }
  .ch{
    flex:0 0 auto;
    height:28px;
    font-size:11px;
    width:auto;
    min-width:0;
    padding:0 9px;
    gap:6px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.05);
    white-space:nowrap;
  }
  .slack-side .side-label:nth-of-type(9),
  .slack-side .ch:nth-of-type(n+10){
    display:none;
  }
  .slack-feed,
  .queue{
    padding:16px 12px;
  }
  .slack-feed{
    border-right:0;
    border-bottom:1px solid var(--line,#dce5ef);
  }
  .feed-head{
    margin-bottom:12px;
  }
  .feed-head h3,
  .queue h3{
    font-size:17px;
  }
  .filter{
    padding:7px 10px;
    font-size:12px;
  }
  .feed-item{
    grid-template-columns:30px 1fr;
    gap:9px;
    padding:11px;
    border-radius:9px;
  }
  .feed-item>div:last-child{
    grid-column:2;
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:3px;
  }
  .feed-icon{
    width:30px;
    height:30px;
    border-radius:7px;
    font-size:12px;
  }
  .feed-item b,
  .queue-card b{
    font-size:12px;
  }
  .feed-item p,
  .queue-card p{
    font-size:10px;
  }
  .queue-card{
    padding:14px;
    box-shadow:0 7px 18px rgba(7,25,54,.06);
  }
  .queue-actions{
    gap:8px;
  }
  .mini{
    min-height:40px;
    height:auto;
    padding:8px 10px;
    font-size:12px;
  }
  .message-box{
    height:auto;
    min-height:42px;
    padding:10px 12px;
    font-size:11px;
  }
  .three,
  .flow-wrap,
  .voice{
    gap:24px;
  }
  .feature-title{
    align-items:flex-start;
  }
  .section h2{
    text-align:left;
    font-size:26px;
    line-height:1.35;
  }
  .section .sub{
    text-align:left;
    margin-bottom:28px;
  }
  .feature-title h3{
    font-size:21px;
  }
  .real-card{
    min-height:0;
    padding:18px;
  }
  .real-card .head{
    flex-wrap:wrap;
    gap:8px;
  }
  .real-card table{
    font-size:13px;
  }
  .source-row,
  .kpis{
    grid-template-columns:1fr;
  }
  .flow-card{
    padding:18px;
    min-height:0;
  }
  .arrow{
    font-size:28px;
    transform:rotate(90deg);
  }
  .cta-band{
    padding:24px 18px;
    gap:18px;
  }
  .cta-band h2{
    font-size:25px;
  }

  /* 02 Regional OS */
  .visual{
    overflow:hidden;
  }
  .visual>.map{
    width:680px;
    height:600px;
    transform:scale(.52);
    transform-origin:left top;
    margin-bottom:-286px;
  }
  .tenant{
    border-radius:8px;
  }
  .tabs{
    overflow-x:auto;
    align-items:end;
  }
  .tabs span{
    white-space:nowrap;
    padding:0 16px 13px;
  }
  .tenant-top{
    height:auto;
    flex-wrap:wrap;
    padding:14px;
  }
  .select{
    width:100%;
    padding-right:12px;
  }
  .menu div{
    height:auto;
    min-height:54px;
  }
  .code{
    max-height:420px;
    overflow:auto;
    font-size:11px;
  }
  .metrics{
    border-left:0;
    border-top:1px solid var(--line,#dfe8f3);
  }
  .section{
    padding:42px 16px;
  }
  .section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .cards{
    grid-template-columns:1fr;
  }
  .photo{
    height:176px;
  }
  .steps{
    gap:16px;
  }
  .step{
    min-height:0;
    padding:22px;
  }
  .results{
    gap:18px;
  }
  .cta{
    padding:42px 16px;
  }
  .cta h2{
    font-size:28px;
  }
  .cta .btn{
    min-width:0;
    width:100%;
  }

  /* 03 Control Layer */
  .value{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:28px;
  }
  .actions{
    align-items:stretch;
    flex-direction:column;
    gap:12px;
    margin-top:28px;
  }
  .diagram{
    gap:16px;
  }
  .diagram,
  .diagram .col,
  .diagram .layer,
  .diagram .saas,
  .diagram .out{
    width:100%;
    max-width:calc(100vw - 32px);
    min-width:0;
  }
  .checks span{
    overflow-wrap:anywhere;
  }
  .saas,
  .out{
    height:auto;
    min-height:56px;
    padding:13px 16px;
  }
  .layer{
    height:auto;
    min-height:320px;
    padding:34px 18px 76px;
  }
  .strip{
    margin:0 16px 32px;
  }
  .strip div{
    border-right:0;
    border-bottom:1px solid #e6eef8;
    padding:20px;
  }
  .guards{
    gap:14px;
  }
  .guard{
    padding:22px;
  }
  .dashboard{
    border-radius:8px;
  }
  .dashboard .main{
    overflow-x:auto;
    padding:18px;
  }
  .dashboard table{
    min-width:720px;
  }
  .panel{
    border-left:0;
    border-top:1px solid var(--line,#dce5ef);
  }
  .plans{
    gap:18px;
  }
  .plan{
    min-height:0;
    padding:24px;
  }
  .dark{
    padding:42px 16px;
  }
  .dark h2{
    font-size:27px;
  }
  .coral{
    width:100%;
  }
  .footer{
    gap:18px;
    padding:30px 16px;
  }

  /* Final SP polish */
  .links{
    display:block;
  }
  .nav .cta,
  .links .btn{
    display:flex;
  }
  .brand,
  .logo{
    font-size:24px;
  }
  .mark{
    flex:0 0 auto;
  }

  .slack-shell{
    overflow:hidden;
    box-shadow:0 16px 42px rgba(7,25,54,.14);
  }
  .slack-top{
    height:44px;
  }
  .slack-grid{
    transform:none;
    margin:0;
  }

  .visual>.map{
    width:660px;
    height:560px;
    transform:scale(.54);
    margin-bottom:-258px;
  }
  .tenant{
    overflow:hidden;
  }
  .tenant-grid{
    display:block;
  }
  .tenant-grid .menu{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-right:0;
  }
  .tenant-grid .menu div{
    border-right:1px solid var(--line,#dfe8f3);
  }
  .tenant-grid .code{
    border-top:1px solid var(--line,#dfe8f3);
  }
  .tenant-grid .metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .tenant-grid .metrics .metric:first-child,
  .tenant-grid .metrics .metric:last-child{
    grid-column:1 / -1;
  }
  .tenant-grid .metric b{
    font-size:22px;
  }
  .row{
    gap:12px;
  }
  .row b{
    text-align:right;
  }

  .dashboard{
    display:block;
  }
  .dashboard .side{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
    padding:16px;
  }
  .dashboard .side b{
    grid-column:1 / -1;
    margin-bottom:6px;
  }
  .dashboard .side div{
    height:auto;
    min-height:34px;
  }
  .dashboard .main{
    -webkit-overflow-scrolling:touch;
  }
  .dashboard .panel{
    border-left:0;
    border-top:1px solid var(--line,#dce5ef);
  }
  .story,
  .scenario-grid,
  .ops-board,
  .package-grid{
    grid-template-columns:1fr;
  }
  .story-panel,
  .scenario,
  .package{
    padding:20px;
  }
  .pain-list div{
    grid-template-columns:30px 1fr;
    padding:12px;
  }
  .matrix{
    display:block;
  }
  .matrix div{
    min-height:0;
    border-right:0;
  }
  .matrix .head{
    display:none;
  }
  .ops-board{
    border-radius:8px;
  }
  .ops-side{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:16px;
  }
  .ops-side b{
    grid-column:1 / -1;
  }
  .ops-main,
  .ops-metrics{
    padding:16px;
  }
  .alert-row{
    grid-template-columns:1fr;
    gap:7px;
    align-items:start;
  }
  .package .price{
    font-size:24px;
  }
}

@media(max-width:360px){
  .nav{
    padding:14px;
  }
  .brand,
  .logo{
    font-size:22px;
  }
  .hero{
    padding:30px 14px 36px;
  }
  .hero h1{
    font-size:34px;
    line-height:1.24;
  }
  .sp-break{
    display:block;
  }
  .main-btn,
  .btn{
    font-size:14px;
    padding:12px 14px;
  }
  .download{
    font-size:14px;
  }
  .slack-side{
    padding:13px 10px;
    gap:6px;
  }
  .ch{
    height:26px;
    font-size:10px;
    padding:0 7px;
  }
  .pill{
    font-size:10px;
    padding:1px 6px;
  }
  .feed-item{
    grid-template-columns:28px 1fr;
    padding:10px;
  }
  .feed-icon{
    width:28px;
    height:28px;
  }
  .queue-actions{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  .lead,
  .hero p,
  .bullets div,
  .section-note{
    display:block;
    width:auto !important;
    max-width:calc(100vw - 44px) !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .lead span{
    display:block;
  }
  .page,
  .lp,
  .hero{
    overflow-x:hidden;
  }

  /* 01: keep the Slack channel rail from pushing the viewport on small screens. */
  .slack-side>.ch:nth-of-type(7),
  .slack-side>.ch:nth-of-type(8){
    display:none;
  }

  /* 02: Regional OS reads better on SP as a compact map followed by a stacked tenant panel. */
  .visual{
    display:block;
    width:100%;
    max-width:calc(100vw - 32px);
    min-width:0;
  }
  .visual>.map{
    width:250px;
    height:490px;
    transform:scale(.72);
    transform-origin:left top;
    margin:18px auto -118px;
  }
  .tenant{
    width:calc(100vw - 32px) !important;
    max-width:calc(100vw - 32px) !important;
    min-width:0 !important;
  }
  .tenant .tabs{
    height:auto;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    overflow:hidden;
  }
  .tenant .tabs span{
    min-width:0;
    padding:14px 6px 12px;
    font-size:11.5px;
    text-align:center;
    overflow-wrap:anywhere;
  }
  .tenant .tabs span:nth-child(n+3){
    display:none;
  }
  .tenant-top{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
    height:auto;
    gap:10px;
    padding:14px;
  }
  .tenant-top .select,
  .select{
    width:100%;
    padding:9px 12px;
  }
  .tenant-grid{
    display:block;
    min-height:0;
  }
  .tenant-grid .menu{
    display:grid;
    grid-template-columns:1fr;
    border-right:0;
  }
  .tenant-grid .menu div{
    height:auto;
    min-height:48px;
    padding:12px 14px;
    border-right:0;
  }
  .tenant-grid .code{
    max-height:360px;
    overflow:auto;
    border-top:1px solid var(--line,#dfe8f3);
    font-size:11px;
    padding:16px;
  }
  .tenant-grid .metrics{
    display:grid;
    grid-template-columns:1fr;
    border-left:0;
    border-top:1px solid var(--line,#dfe8f3);
  }
  .tenant-grid .metrics .metric{
    grid-column:auto;
  }
}

@media(max-width:360px){
  .hero{
    padding:30px 14px 36px;
  }
  .hero h1{
    max-width:calc(100vw - 28px) !important;
    font-size:30px !important;
    line-height:1.32 !important;
    overflow-wrap:anywhere;
  }
  .lead,
  .hero p{
    font-size:13.5px !important;
    line-height:1.8 !important;
    max-width:calc(100vw - 28px) !important;
  }
  .bullets{
    gap:10px;
  }
  .bullets div{
    display:grid;
    grid-template-columns:18px minmax(0,1fr);
    gap:7px;
    align-items:start;
    font-size:12.5px !important;
    line-height:1.55;
    overflow-wrap:anywhere;
    word-break:break-all;
  }
  .bullets b{
    margin-right:0;
  }
  .nav .cta,
  .links .btn,
  .actions .btn,
  .main-btn,
  .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    text-align:center;
    font-size:12.5px !important;
    line-height:1.35;
    padding:11px 12px;
  }
  .download{
    font-size:13.5px;
  }
  .tenant .tabs{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .tenant .tabs span:nth-child(4){
    display:none;
  }
  .tenant .tabs span:nth-child(n+3){
    display:none;
  }
}

/* FTP preview typography polish: keep hierarchy, but remove the over-bold sales-deck feel. */
.brand,
.logo{
  font-weight:700 !important;
}

.nav small,
.links,
.nav .links{
  font-weight:600 !important;
}

.hero h1{
  font-weight:620 !important;
}

.section h2,
.center h2,
.dark h2,
.cta h2,
.cta-band h2{
  font-weight:620 !important;
}

.hero p,
.lead,
.section .sub,
.section-note,
.plan p,
.plan li,
.package li,
.guard p,
.matrix p,
.scenario ul,
.story-panel p{
  font-weight:500 !important;
}

.btn,
.main-btn,
.nav .cta,
.download,
.link,
.link-action,
.actions .btn,
.detail,
.mini,
.small,
.coral{
  font-weight:650 !important;
}

.side b,
.panel b,
.box b,
.card b,
.real-card .head,
.queue-card b,
.feature-title h3,
.body h3,
.story-panel h3,
.scenario h3,
.step h3,
.plan h3,
.package h3,
.guard h3,
.main h3,
.layer h2{
  font-weight:650 !important;
}

.value div,
.checks,
.checks span,
.source-list span,
.connector,
.tabs span,
.tab,
.pill,
.tag,
.status,
.tenant-menu div,
.menu div,
.ops-side div,
.ch,
.filter,
.feed-item b,
.label,
.pin,
.pref,
.matrix .head,
.scenario small,
.alert-row .level{
  font-weight:600 !important;
}

.price,
.plan .price,
.package .price,
.metric-row b,
.metric b,
.kpi b,
.num,
.step-num,
.feed-icon,
.avatar,
.ico,
.ok,
.dot{
  font-weight:680 !important;
}

.dark .btn,
.dark .coral{
  font-weight:650 !important;
  letter-spacing:0;
}

/* Regional OS closing area: make the presentation CTA feel calmer. */
.metric-row b{
  font-weight:600 !important;
  letter-spacing:0;
}

.metric-row div{
  font-weight:500 !important;
}

.casebox > b{
  font-weight:600 !important;
}

.casebox span,
.casebox .pref{
  font-weight:560 !important;
}

#diagnose.cta{
  padding-top:68px !important;
  padding-bottom:70px !important;
}

#diagnose.cta h2{
  font-size:34px !important;
  line-height:1.55 !important;
  font-weight:560 !important;
  max-width:980px;
  margin:0 auto 22px !important;
}

#diagnose.cta p{
  font-weight:500 !important;
  line-height:1.9;
}

#diagnose.cta .btn{
  height:58px !important;
  min-width:360px !important;
  padding:0 34px !important;
  font-size:17px !important;
  font-weight:600 !important;
  box-shadow:0 12px 24px rgba(240,96,80,.22) !important;
}

/* Control Layer bottom CTA: keep it clickable without the heavy headline weight. */
section.dark#diagnose .btn.coral{
  height:58px !important;
  min-width:390px !important;
  padding:0 30px !important;
  font-size:15.5px !important;
  line-height:1.45 !important;
  font-weight:560 !important;
  letter-spacing:0 !important;
  box-shadow:0 12px 24px rgba(240,96,80,.2) !important;
}