/* Bisro for medical stores: clean clinical palette with a teal accent. Hero = text beside the pharmacy photo with a
   family's monthly account card overlapping it; medicines as a shelf table; distributor steps; a bordered
   "what Bisro doesn't do" panel. */
.md-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 5vw; align-items: center; padding-top: 124px; padding-bottom: clamp(50px, 8vh, 90px); min-height: min(94vh, 900px) }
.md-hero .h-xl { font-size: clamp(36px, 4.2vw, 62px) }
.md-vis { position: relative; padding: 0 0 50px 170px }
.md-photo { display: block; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 4.6 } .md-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.acct { position: absolute; left: 0; bottom: 0; width: min(318px, 70%); padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #CDEDE5; box-shadow: 0 40px 70px -40px rgba(0,60,50,.55) }
.ac-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px } .ac-top b { display: block; font-size: 16px } .ac-top small { color: var(--faint); font-size: 12.5px } .ac-top .tag { margin: 0 0 0 auto; background: #0B5E48 }
.ac-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E3F6F1; color: #0B6B50; font-weight: 800 }
.ac-list { list-style: none; margin: 0; padding: 0; font-size: 14px }
.ac-list li { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #E1ECE9 }
.ac-d { color: var(--faint); font-size: 12.5px } .ac-list .due b { color: var(--red) } .ac-list .ok b { color: #0B7A5B }
.ac-bal { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 12px; padding-top: 8px; border-top: 2px solid var(--ink) } .ac-bal span { font-weight: 700 } .ac-bal b { font: 800 22px/1 var(--font); color: var(--red) }
.ac-btn { width: 100%; padding: 11px; font-size: 14.5px }
.ac-msg { margin-top: 10px; padding: 10px 12px; border-radius: 12px 12px 4px 12px; background: #D9FDD3 } .ac-msg[hidden] { display: none }
.ac-msg p { margin: 0; font-size: 14px; color: #111B21 } .ac-msg small { display: block; margin-top: 4px; font-size: 12px; color: #4A5A4A }
.acct .eg { margin: 8px 0 0 }

/* medicines */
.sh-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: end; margin-bottom: 28px } .sh-head .lead { margin: 0 }
.sh-t { width: 100%; max-width: 920px; border-collapse: collapse; font-size: 16.5px }
.sh-t th, .sh-t td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400 }
.sh-t thead th { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); border-bottom: 2px solid #0E8A70 }
.sh-t tbody th { font-weight: 700 } .sh-t .num { text-align: right } .sh-t tr.low td.tnum:nth-of-type(1) { color: var(--red); font-weight: 700 }
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 800 } .pill.low { background: #FDECEC; color: var(--red) } .pill.ok { background: #E3F6F1; color: #0B6B50 }
.md-shelf .eg { margin-top: 12px }

/* distributor */
.md-dist { background: linear-gradient(180deg, var(--bg), #EEF8F5 25%, #EEF8F5 75%, var(--bg)) }
.ds-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6vw; align-items: center }
.ds-link a { color: var(--link); font-weight: 700; text-decoration: none } .ds-link a:hover { text-decoration: underline }
.ds-steps { list-style: none; counter-reset: d; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.ds-steps li { counter-increment: d; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid #CDEDE5; display: grid; gap: 4px }
.ds-steps li::before { content: counter(d); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #0E8A70; color: #fff; font-weight: 800; font-size: 14px; margin-bottom: 6px }
.ds-steps b { font-size: 17px } .ds-steps span { color: var(--muted); font-size: 15px }

/* what it doesn't do */
.md-not { margin-top: 10px }
.md-not .h-l { max-width: 20ch }
.nt-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 2px solid #F3C7C7; border-radius: 16px; overflow: hidden }
.nt-list li { padding: 20px; display: grid; gap: 6px; background: #FFFAFA } .nt-list li + li { border-left: 1px solid #F3C7C7 }
.nt-list b { font-size: 17px; color: #8C1D1D } .nt-list span { color: #4A3434; font-size: 15px }

@media (max-width: 980px) {
  .md-hero { grid-template-columns: minmax(0, 1fr); padding-top: 104px; min-height: 0; gap: 26px }
  .md-vis { padding: 0 } .md-photo { aspect-ratio: 16 / 10 } .acct { position: relative; width: auto; margin: -60px 12px 0 } .ac-top .tag { display: none }
  .sh-head, .ds-in { grid-template-columns: minmax(0, 1fr); gap: 14px } .sh-t { font-size: 14.5px } .sh-t th, .sh-t td { padding-right: 8px }
  .ds-steps { grid-template-columns: minmax(0, 1fr) }
  .nt-list { grid-template-columns: minmax(0, 1fr) } .nt-list li + li { border-left: 0; border-top: 1px solid #F3C7C7 }
}