/* Wise Gradebook on the WBS product shell (package 142, 11 Nov 2026).
   The /gb/ pages are body.wbs-site.gb-site: everything is site.css, ed.css and
   wbs.css. This file changes the mark from the booking system's to the
   gradebook's and adds the three blocks WBS has no class for. */
.gb-site .wm-mark,
.gb-site .fwm-mark { background-image: url(/assets/img/gb-mark.svg); }
.gb-site .eyebrow::before { background-image: url(/assets/img/gb-mark.svg); }

.gb-hero .hero-in { max-width: 60rem; }
.gb-prose { max-width: 46rem; margin-inline: auto; text-align: center; }

.gb-steps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: gb; }
.gb-steps li { counter-increment: gb; padding: 1.1rem 1.2rem; border-radius: 14px; background: #fff; border: 1px solid rgba(31, 42, 68, .12); }
.gb-steps li::before { content: counter(gb); display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .5rem; border-radius: 50%; background: #1f2a44; color: #fff; font-weight: 700; }
.gb-steps h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.gb-steps p { margin: 0; }

@media (prefers-color-scheme: dark) {
  .gb-steps li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
  .gb-steps li::before { background: #f0821e; }
}

/* package 143: our own pictures on the feature cards, and the phone app in a phone's frame */
.gb-site .wbs-feat .gb-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 13px; background: var(--c, #2456d6); color: #fff; }
.gb-site .wbs-feat .gb-ico svg { display: block; }
.gb-phones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2rem; align-items: start; }
.gb-phone { margin: 0; text-align: center; }
.gb-phone img { display: block; width: 100%; height: auto; border: 7px solid #1f2a44; border-radius: 30px; background: #1f2a44; box-shadow: 0 14px 34px rgba(31, 42, 68, .22); }
.gb-phone figcaption { margin-top: .8rem; font-size: .92rem; color: var(--muted, #5b6680); }
.gb-phone figcaption b { display: block; color: #1f2a44; font-size: 1rem; }
@media (max-width: 900px) {
  .gb-phones { grid-template-columns: repeat(5, 62vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
  .gb-phone { scroll-snap-align: center; }
}

/* PACKAGE 145 (11 Nov 2026). THE LOGO AT THE VERY LEFT: the header's row is as wide as the window on this
   product's pages, so the mark starts where the eye starts and the menu has the room a fifth entry needs. */
.gb-site .site-head .head-in { max-width: none; padding-left: 20px; padding-right: 20px; }
/* A module page's "how it goes": the guide's own steps, sentences without a heading - wider cells read better. */
.gb-steps.gb-plain { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.gb-steps.gb-plain li { display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; align-items: start; }
.gb-steps.gb-plain li::before { margin-bottom: 0; }