/* ==========================================================================
   sjs-site.css - the sjschoolva.org site chrome for the parent-facing pages
   of the SJS IT Self Service Portal (sjhelpdesk).

   PART 1 is not hand-written. It is the exact set of CSS rules that
   registration.sjschoolva.org applies to its own .site-header and
   .sjs-standard-footer, captured from the live page in source order on
   2026-08-06 so the banner, nav, flyouts and footer render identically here.

   Only four selectors are changed, and only to stop them escaping the header:
     *            -> kept (the portal already sets border-box everywhere)
     a            -> .site-header a, .sjs-standard-footer a
     nav          -> .site-header nav
     button       -> .site-header button
     button, a    -> .site-header button, .site-header a
   Everything else is byte-for-byte what the registration site computes.

   PART 2 is this portal's own additions: the left-hand self-service nav and
   the Back / Home bar. Those are all sjs- prefixed and touch nothing above.
   ========================================================================== */

/* ==== PART 1 - registration.sjschoolva.org header + footer, verbatim ==== */

.site-header, .sjs-standard-footer {
  --green: #0f300c;
  --green-2: #0f300c;
  --gold: #0f5a30;
  --sjs-bar-green: #0f300c;
  --sjs-bar-green-2: #0f300c;
  --sjs-bar-gradient: linear-gradient(135deg, #0f300c 0%, #0f300c 48%, #0f300c 100%);
}

.site-header *, .sjs-standard-footer * { box-sizing: border-box; }

.site-header a, .sjs-standard-footer a { color: var(--green); font-weight: 700; text-decoration: none; }

.site-header {
  display: grid; grid-template-columns: 1fr; justify-items: center; gap: 14px;
  padding: 18px clamp(18px, 5vw, 96px) 14px;
  background: linear-gradient(rgba(0,0,0,.88), rgba(0,0,0,.96)),
              radial-gradient(circle at 18% 0px, rgba(13,91,53,.65), transparent 34%), rgb(0,0,0);
  border-bottom: 6px solid var(--green);
  position: relative; z-index: 5;
}

.site-header .brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: #fff; width: 100%;
}

.site-header .brand img {
  display: block; width: min(760px, 86vw); height: auto; max-height: 126px;
  object-fit: contain; filter: drop-shadow(rgba(0,0,0,.35) 0 10px 18px);
}

.site-header nav {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center;
  width: 100%; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18);
}

.site-header nav a {
  color: #fff; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent;
  font: inherit; font-size: 1rem; font-weight: 900; line-height: inherit; cursor: pointer;
}

.site-header nav a:hover { background: rgba(255,255,255,.1); }

/* Scoped with :not(.nav-toggle): on the registration site this is a bare
   `button` selector, which loses to .nav-toggle{display:none}. Scoping it to
   .site-header raised its specificity above .nav-toggle and the hamburger
   started rendering as a 42px button on desktop, pushing the whole header down
   by 48px. */
.site-header button:not(.nav-toggle) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
  padding: 10px 16px; border: 1px solid var(--green); border-radius: 4px;
  color: #fff; background: var(--green); font-weight: 800; cursor: pointer;
}

@media (max-width: 820px) {
  .site-header { display: grid; }
  .site-header .brand img { width: min(360px, 86vw); }
  .site-header nav { gap: 8px; }
  .site-header { position: static; }
  .site-header nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .site-header nav a { width: 100%; min-width: 0; justify-content: center; padding: 10px 8px;
    font-size: .9rem; text-align: center; white-space: normal; }
}

@media (max-width: 560px) {
  .site-header nav { grid-template-columns: 1fr; }
  .site-header .brand img { width: min(280px, 82vw); }
}

.site-header nav { isolation: isolate; }
.site-header { background: var(--sjs-bar-gradient) !important; }
.site-header { border-color: var(--gold) !important; }
.site-header { border-bottom-color: var(--gold) !important; }

.sjs-standard-footer {
  width: 100%; margin: clamp(10px, 1.6vw, 20px) 0 0; padding: 0; line-height: 0;
  background: #fff; overflow: hidden; height: clamp(86px, 10vw, 150px);
}

.sjs-standard-footer img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
}

@media (max-width: 720px) {
  .sjs-standard-footer { height: 96px; }
  .sjs-standard-footer img { object-position: center bottom; }
}

.sjs-standard-footer {
  width: 100% !important; height: auto !important; margin: clamp(10px, 1.6vw, 20px) 0 0 !important;
  padding: 0 !important; overflow: visible !important; line-height: 0 !important; background: #fff !important;
}

.sjs-standard-footer img {
  display: block !important; width: 100% !important; height: auto !important; max-width: none !important;
  object-fit: contain !important; object-position: center center !important;
}

.site-header { background: none #003311 !important; border-bottom: 3px solid #c9952e !important; }
.site-header nav { border-top-color: rgba(255,255,255,.16) !important; }
.site-header nav a { background-image: none !important; box-shadow: none !important; }
.site-header nav a:hover {
  color: #fff !important; border-color: rgba(214,163,57,.54) !important;
  background: none rgba(255,255,255,.1) !important;
  box-shadow: rgba(214,163,57,.18) 0 0 0 1px inset !important;
}

.site-header { gap: 8px !important; padding: 10px clamp(16px, 4vw, 64px) 8px !important; }

.site-header:not(.school-site-header) .brand img {
  width: min(520px, 72vw) !important; max-height: 74px !important;
  filter: drop-shadow(rgba(0,0,0,.24) 0 6px 10px) !important;
}

.site-header:not(.school-site-header) nav { gap: clamp(8px, 1vw, 16px) !important; padding-top: 7px !important; }

.site-header:not(.school-site-header) nav a {
  min-height: 34px !important; padding: 6px 9px !important; font-size: .94rem !important; line-height: 1 !important;
}

@media (max-width: 760px) {
  .site-header { padding: 8px 14px 7px !important; }
  .site-header:not(.school-site-header) .brand img { width: min(390px, 82vw) !important; max-height: 58px !important; }
  .site-header {
    position: relative !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 7px !important; width: 100% !important; max-width: 100% !important;
    min-height: 0 !important; padding: 7px 10px 8px !important; overflow: visible !important;
  }
  .site-header .brand {
    display: flex !important; justify-content: center !important; flex: 0 0 auto !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important;
  }
  .site-header .brand img, .site-header:not(.school-site-header) .brand img {
    display: block !important; width: min(310px, 76vw) !important; max-width: 100% !important;
    max-height: 52px !important; margin: 0 auto !important; object-fit: contain !important;
  }
  .site-header nav {
    position: relative !important; display: flex !important; flex-wrap: nowrap !important;
    justify-content: flex-start !important; align-items: center !important; gap: 6px !important;
    width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 2px 0 1px !important;
    overflow: auto visible !important; border-top: 0 !important; scrollbar-width: none !important;
  }
  .site-header nav a {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 34px !important;
    padding: 0 10px !important; font-size: .82rem !important; line-height: 1 !important;
    white-space: nowrap !important; text-align: center !important; border-radius: 999px !important;
  }
  .sjs-standard-footer { margin-top: 8px !important; overflow: hidden !important; }
}

.sjs-standard-footer { background: #003311 !important; }
.sjs-standard-footer img {
  height: auto !important; max-height: 150px !important;
  object-fit: contain !important; object-position: center center !important;
}
@media (max-width: 900px) { .sjs-standard-footer img { max-height: 110px !important; } }
@media (max-width: 600px) { .sjs-standard-footer img { max-height: 84px !important; } }

.sjs-standard-footer { background: #fbfcfb !important; }
.sjs-standard-footer img { max-height: 185px !important; }
@media (max-width: 900px) { .sjs-standard-footer img { max-height: 132px !important; } }
@media (max-width: 600px) { .sjs-standard-footer img { max-height: 96px !important; } }

.site-actions {
  position: absolute; top: 68px; right: clamp(20px, 5vw, 84px);
  display: flex; align-items: center; gap: 18px; z-index: 8;
}

.hdr-contact { align-items: center; gap: 12px; display: inline-flex !important; }

.hdr-arrow {
  width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.15);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

@media (max-width: 900px) {
  .site-actions { position: static; width: 100%; justify-content: center; margin: 0 0 6px; }
}

.site-actions a {
  color: #fff; font-family: 'Poppins', system-ui, sans-serif; font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer;
}

.site-header nav {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;
  gap: 0; padding: 0; margin-top: 6px; border-top: 0;
}

.site-header { padding-top: 14px !important; padding-bottom: 0 !important; gap: 6px !important; }

.nav-item { position: relative; display: flex; }

.nav-item > a {
  display: flex; align-items: center; white-space: nowrap; cursor: pointer; text-decoration: none;
  font-family: 'Alice', Georgia, serif; font-weight: 400; font-size: 1.16rem; letter-spacing: .01em;
  color: #fff; padding: 15px 20px;
}

.nav-item:hover > a { background: #3c3f3c; color: #fff; }
.nav-item.nav-active > a { background: #fff; color: #0f300c; }
.nav-item.nav-active:hover > a { background: #3c3f3c; color: #fff; }

/* Flyouts, matched to sjschoolva.org: panel #373c39, 30px padding,
   shadow 1px 5px 6px rgba(0,0,0,.46), links Alice 18px. */
.nav-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 252px;
  background: #373c39; padding: 30px; box-shadow: rgba(0,0,0,.46) 1px 5px 6px 0;
  max-height: 78vh; overflow-y: auto;
}

.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu { display: block; }
.nav-item.nav-right > .nav-menu { left: auto; right: 0; }

.nav-menu a {
  display: block; white-space: nowrap; padding: 5px 0; text-decoration: none;
  font-family: 'Alice', Georgia, serif; font-weight: 400; font-size: 18px;
  line-height: 23px; color: #fff;
}

.nav-menu a:hover { color: #fff; text-decoration: underline; }

/* The two tabs the school site groups into named columns. column-count is set
   inline to the number of groups, exactly as the school site does. */
.nav-mega { width: 830px; column-gap: 10px; }
.nav-mega .nav-group { break-inside: avoid; margin-bottom: 18px; }
.nav-mega a { white-space: normal; }

.nav-menu .group-name {
  display: block; margin: 0 0 15px; padding: 5px 0 15px;
  border-bottom: 1px solid #fff; color: #fff;
  font-family: 'Poppins', system-ui, sans-serif; font-size: 18px; font-weight: 400;
  letter-spacing: 1px; text-transform: uppercase;
}

.site-header:not(.school-site-header) .brand img, .site-header .brand img {
  height: 148px !important; width: auto !important; max-width: none !important; max-height: none !important;
}

@media (max-width: 900px) {
  .site-header nav { justify-content: flex-start; overflow-x: auto; }
  .nav-menu { position: static; box-shadow: none; max-height: none; }
}

.site-header button, .site-header a { font-family: 'Alice', Georgia, serif !important; }

.site-header { background: none #0f300c !important; border-bottom: 0 !important; }

.site-header nav .nav-item > a { font-size: 16px !important; }

.hdr-line { display: inline-block; width: 44px; height: 1px; background: rgba(255,255,255,.55); }

/* ==== PHONE HEADER - measured off sjschoolva.org at a 375px layout ========
   Fixed 50px #373c39 utility bar (hamburger left, social right), then a 142px
   green band with the wordmark scaled to the full viewport width (92px tall at
   375). No tab bar on a phone; the drawer below replaces it. */

.sjs-mbar, .sjs-drawer, .sjs-scrim { display: none; }

@media (max-width: 900px) {
  .sjs-mbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    display: flex; align-items: center; justify-content: space-between;
    height: 50px; padding: 0 14px 0 4px; background: #373c39;
  }

  .sjs-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 34px; padding: 0; border: 0; background: none;
    color: #fff; cursor: pointer; min-height: 0;
  }

  .sjs-social { display: flex; align-items: center; gap: 22px; }
  .sjs-social a { color: #fff; display: inline-flex; }

  /* The fixed bar is out of flow, so the green band starts under it. */
  .site-header {
    position: relative !important; display: block !important;
    margin-top: 50px !important; padding: 0 !important; gap: 0 !important;
    background: #0f300c !important; border-bottom: 0 !important;
  }

  .site-header .brand {
    display: block !important; width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 25px 0 !important;
  }

  .site-header .brand img,
  .site-header:not(.school-site-header) .brand img {
    display: block !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: none !important;
    margin: 0 !important; object-fit: contain !important; filter: none !important;
  }

  .site-header nav { display: none !important; }
  .site-actions { display: none !important; }

  /* ---- drawer ---- */
  .sjs-scrim {
    display: block; position: fixed; inset: 50px 0 0; z-index: 190;
    background: rgba(0, 0, 0, .45);
  }
  .sjs-scrim[hidden] { display: none; }

  .sjs-drawer {
    display: block; position: fixed; top: 50px; left: 0; bottom: 0; z-index: 195;
    width: min(350px, 78vw); padding: 0 0 40px;
    background: #3c3f3c; overflow-y: auto;
    transform: translateX(-100%); transition: transform .22s ease;
    -webkit-overflow-scrolling: touch;
  }
  .sjs-drawer[hidden] { display: block; }
  body.sjs-drawer-open .sjs-drawer { transform: translateX(0); }
  body.sjs-drawer-open { overflow: hidden; }

  .sjs-dsec {
    margin: 0; padding: 6px 14px; background: #0f300c; color: #fff; text-align: center;
    font-family: 'Poppins', system-ui, sans-serif; font-size: 15px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
  }

  .sjs-drawer .sjs-drow {
    display: flex; align-items: center; min-height: 48px; padding: 8px 22px;
    color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-family: 'Poppins', system-ui, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.3;
  }

  .sjs-drawer .sjs-drow.is-current { background: rgba(255, 255, 255, .22); font-weight: 700; }
  .sjs-drawer .sjs-drow:active { background: rgba(255, 255, 255, .12); }

  .sjs-dparent { justify-content: space-between; gap: 10px; padding-right: 0; }
  .sjs-dparent > a { flex: 1 1 auto; color: #fff; text-decoration: none; font: inherit; }

  .sjs-dtog {
    flex: 0 0 auto; width: 56px; align-self: stretch; min-height: 0;
    border: 0; background: none; color: #fff; cursor: pointer; position: relative; padding: 0;
  }
  .sjs-dtog::before, .sjs-dtog::after {
    content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px;
    transform: translate(-50%, -50%); transition: opacity .15s;
  }
  .sjs-dtog::before { width: 18px; height: 2px; }
  .sjs-dtog::after { width: 2px; height: 18px; }
  .sjs-dgroup.open .sjs-dtog::after { opacity: 0; }

  .sjs-dkids { display: none; }
  .sjs-dgroup.open .sjs-dkids { display: block; }
  .sjs-drawer .sjs-dkid { padding-left: 44px; font-size: 16px; }

  .sjs-dglabel {
    margin: 0;
    padding: 14px 22px 5px 44px;
    color: rgba(255, 255, 255, .62);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  }

  /* No sticky nav strip on a phone - the fixed bar is already there. */
  body.sjs-nav-stuck .site-header nav { position: static; box-shadow: none; }
  .sjs-shell { padding: 0; }
}

/* Sub-items the school site nests one or two levels deeper, so the flyout
   still reads as a hierarchy instead of a flat wall of links. */
/* The registration site's `.site-header nav a { padding:6px 9px !important;
   font-size:.94rem !important }` also catches the flyout links and squashes
   them to 15px. The school site renders them at Alice 18px / 5px 0, so put
   that back for links inside a menu only. */
.site-header nav .nav-menu a {
  padding: 5px 0 !important;
  font-size: 18px !important;
  line-height: 23px !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}

/* The entry for the page you are already on. */
.nav-menu a.here { font-weight: 700; text-decoration: underline; }

/* An 830px panel hung off a tab in the right half of the bar runs past the
   viewport. Anchor those to the tab's right edge instead. */
.nav-item:nth-child(n+5) > .nav-mega { left: auto; right: 0; }
.nav-mega { max-width: calc(100vw - 32px); }

/* The header content column: 1615px on a wide screen, otherwise the header's
   own side padding. Measured on sjschoolva.org - 1615 @ 1885, 1170 @ 1265. */
.site-header .brand,
.site-header nav { max-width: 1615px; margin-left: auto; margin-right: auto; }

/* Tab size deliberately left at the registration site's 16px. The school site
   runs 20px, but scaled up here it read as oversized next to the portal's own
   content, so the two portals stay matched to each other at 16px. */

/* Once the banner scrolls away the nav returns as a slim fixed strip, which is
   what the school site does. Sticking the whole 215px header instead made
   scrolling feel heavy. */
body.sjs-nav-stuck .site-header nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  width: auto; max-width: none;
  margin: 0 !important;
  /* Keep the tabs on the same 1615 column as the banner, but never let the
     gutter drop below the header's own padding on a narrower screen. */
  padding: 7px max(clamp(16px, 4vw, 64px), calc((100% - 1615px) / 2)) !important;
  background: #0f300c;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.sjs-navspacer[hidden] { display: none; }

/* ==== PART 2 - this portal's own left nav and Back / Home bar ============ */

:root { --sjs-green: #0f300c; }

.sjs-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: start;
  max-width: 1615px;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(16px, 4vw, 64px);
}

.sjs-shell.no-side { grid-template-columns: minmax(0, 1fr); }

.sjs-col { min-width: 0; }

/* A quiet rail, not a slab: no fill, no border box, just a hairline and a
   green marker on the page you are on. It sticks so it stays with you. */
.sjs-side {
  position: sticky;
  top: 18px;
  align-self: start;
  padding: 30px 0 26px;
  border-right: 1px solid #e3e9e4;
}

.sjs-side-title {
  margin: 0 22px 3px 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #93a396;
}

.sjs-side-sub {
  margin: 0 22px 22px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #e3e9e4;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sjs-green);
}

.sjs-sidenav { display: grid; gap: 1px; }

.sjs-sidenav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px 9px 12px;
  margin-right: 14px;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  color: #3d4d43;
  text-decoration: none;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background .12s, color .12s, border-color .12s;
}

.sjs-sidenav a svg {
  flex: 0 0 auto; width: 17px; height: 17px; color: #9bab9e;
  transition: color .12s;
}

.sjs-sidenav a:hover { background: #eef3ef; color: var(--sjs-green); }
.sjs-sidenav a:hover svg { color: var(--sjs-green); }

.sjs-sidenav a.is-current {
  background: #e9f0ea;
  border-left-color: var(--sjs-green);
  color: var(--sjs-green);
  font-weight: 700;
}
.sjs-sidenav a.is-current svg { color: var(--sjs-green); }

.sjs-side-group {
  margin: 22px 22px 7px 12px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9bab9e;
}
.sjs-side-group:first-of-type { margin-top: 0; }

.sjs-side-help {
  margin: 26px 22px 0 12px;
  padding-top: 18px;
  border-top: 1px solid #e3e9e4;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .8rem;
  line-height: 1.55;
  color: #6d7d70;
}

.sjs-side-help strong {
  display: block;
  margin-bottom: 5px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sjs-green);
}

.sjs-side-help a { color: var(--sjs-green); font-weight: 600; }

/* The shell already supplies the gutter, so the page and crumb bar stop adding
   their own when a sidebar is present. */
.sjs-shell:not(.no-side) .sjs-col > main.page,
.sjs-shell:not(.no-side) .sjs-crumbs {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.sjs-shell:not(.no-side) .sjs-col > main.page { padding-top: 22px; }

.sjs-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 24px 0;
}

.sjs-crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid #cfdbd2;
  border-radius: 999px;
  background: #fff;
  color: #1d3226;
  text-decoration: none;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

.sjs-crumb:hover { border-color: var(--sjs-green); background: #eef3ee; color: var(--sjs-green); }
.sjs-crumb svg { width: 15px; height: 15px; }

/* ---------- home page: compact hero + one long list ---------------------- */

.sjs-home { max-width: 900px; }

.sjs-home-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 0 22px;
}

.sjs-home-hero-copy { flex: 1 1 auto; min-width: 0; }
/* no photo in the hero any more: keep the lead from running the full width */
.sjs-home-hero-copy .sjs-lead { max-width: 62ch; }

.sjs-home .sjs-eyebrow {
  margin: 0 0 6px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #93a396;
}

.sjs-home h1 {
  margin: 0 0 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  font-weight: 700;
  line-height: 1.15;
  color: var(--sjs-green);
}

.sjs-home .sjs-lead {
  margin: 0 0 12px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .95rem;
  line-height: 1.5;
  color: #4a5a50;
}

.sjs-home-hours {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .78rem;
  line-height: 1.45;
  color: #7b8a7e;
}
.sjs-home-hours svg { flex: 0 0 auto; margin-top: 2px; }

.sjs-home-art {
  flex: 0 0 auto;
  width: 240px;
  max-width: 34%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(16, 48, 12, .13);
}

.sjs-home-note {
  margin: 0 0 20px;
  padding: 12px 15px;
  border-left: 3px solid var(--sjs-green);
  border-radius: 0 8px 8px 0;
  background: #eef3ef;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .85rem;
  line-height: 1.55;
  color: #3d4d43;
}

.sjs-home-note strong { color: var(--sjs-green); }
.sjs-home-note a { color: var(--sjs-green); font-weight: 600; }

.sjs-home-note.quiet {
  margin-top: 22px;
  background: none;
  border-left-color: #dbe4dd;
  color: #6d7d70;
  font-size: .82rem;
}

.sjs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e3e9e4; }

.sjs-list-head {
  padding: 20px 0 7px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9bab9e;
}

.sjs-list > li > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px 13px 4px;
  border-bottom: 1px solid #eef2ef;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}

.sjs-list > li > a:hover { background: #f3f7f4; }

.sjs-list-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e3e9e4;
  color: var(--sjs-green);
}
.sjs-list-ic img { width: 22px; height: 22px; object-fit: contain; }
.sjs-list-ic svg { width: 19px; height: 19px; }

.sjs-list-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }

.sjs-list-txt strong {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: #1d3226;
  line-height: 1.25;
}

.sjs-list-txt span {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .8rem;
  line-height: 1.45;
  color: #6d7d70;
}

.sjs-list-go {
  flex: 0 0 auto;
  color: #9bab9e;
  font-size: 1.05rem;
  transition: transform .12s, color .12s;
}
.sjs-list > li > a:hover .sjs-list-go { color: var(--sjs-green); transform: translateX(3px); }

@media (max-width: 700px) {
  .sjs-home-hero { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .sjs-home-art { width: 100%; max-width: 100%; }
  .sjs-list-txt span { font-size: .78rem; }
}

.sjs-footer-line {
  padding: 12px 24px 20px;
  background: #fbfcfb;
  text-align: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .78rem;
  color: #6d7d70;
}

.sjs-footer-line a { color: var(--sjs-green); font-weight: 700; }

@media (max-width: 1080px) {
  .sjs-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .sjs-side { padding: 22px 12px 28px; }
}

/* On a phone the drawer already carries the portal's own links as its first
   section, so the desktop left rail is hidden rather than shown twice. */
@media (max-width: 900px) {
  .sjs-shell { grid-template-columns: minmax(0, 1fr); }
  .sjs-side { display: none; }
  .sjs-crumbs { padding: 14px 18px 0; }
}

.sjs-side-head { display: none; }

@media (max-width: 600px) {
  .sjs-crumb { padding: 7px 13px; font-size: .74rem; }
}


/* ==== PART 3 - tab bar matched to sjschoolva.org ==========================
   Measured off www.sjschoolva.org on 2026-08-07 at a 1280px viewport with
   getBoundingClientRect(), then reproduced - not eyeballed:

     band      220px tall, wordmark 603x148 sitting 5px from its top
     tab bar   65px tall, flush to the bottom of the band
     tab       Alice 20px/700, line-height 25px, padding 20px 10px
     layout    contiguous flex children that grow to fill the bar; on the
               school site the eight tabs tile the container exactly
               (74+109+124+117+235+176+208+127 = 1170).  A gap plus
               space-between is what made these read as scattered chips.
     current   square, full-height, #fff with #373c39 text

   Supersedes the "tab size deliberately left at 16px" note further up: the
   ask was a match to the school site, which runs 20px.

   Additive - the container width, the left rail, the mega-menu and the
   .sjs-nav-stuck strip are owned elsewhere in this file and are untouched.
   ========================================================================= */

@media (min-width: 901px) {
  /* 5 + 148 (wordmark) + 2 + 65 (tabs) = the school's 220px band */
  .site-header {
    padding-top: 5px !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
  }

  /* re-centred on the wordmark now that it starts 9px higher */
  .site-actions { top: 59px !important; }

  /* :not(.school-site-header) is here to MATCH the specificity of the
     gap/padding-top rule further up (0,2,1).  A plain ".site-header nav" is
     (0,1,1) and loses to it however late it appears. */
  .site-header:not(.school-site-header) nav {
    height: 65px !important;
    margin-top: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    border-top: 0 !important;
  }

  .site-header nav .nav-item {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .site-header nav .nav-item > a {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 65px !important;
    min-height: 65px !important;
    padding: 20px 10px !important;
    border-radius: 0 !important;
    background: none transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: 'Alice', Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 25px !important;
    letter-spacing: normal !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .site-header nav .nav-item:hover > a,
  .site-header nav .nav-item.nav-active:hover > a {
    background: none #3c3f3c !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .site-header nav .nav-item.nav-active > a {
    background: none #fff !important;
    color: #373c39 !important;
  }

  /* the flyout and the mega panel hang off the bottom of the taller tab */
  .site-header nav .nav-menu { top: 65px !important; }

  /* the slim strip that replaces the banner on scroll keeps the same tabs */
  body.sjs-nav-stuck .site-header nav { margin-top: 0 !important; }
}

/* ==== PART 4 - banner scaled down, home photo scaled up ===================
   Damond 2026-08-07: the 220px band "takes up the top", and the 240px mascot
   photo was too small. Same proportions as PART 3, scaled ~32% smaller:

     5 + 96 (wordmark) + 2 + 46 (tab bar) = 149px band, was 220
     tab   Alice 17px/700, line-height 20px, padding 13px 10px  (was 20/25/20)

   Selectors mirror PART 3's specificity on purpose - see the note there.
   ========================================================================= */

@media (min-width: 901px) {
  .site-header:not(.school-site-header) .brand img,
  .site-header .brand img { height: 96px !important; }

  /* recentred on the shorter wordmark: 5 + 96/2 - 20 */
  .site-actions { top: 33px !important; }

  .site-header:not(.school-site-header) nav { height: 46px !important; }

  .site-header nav .nav-item > a {
    height: 46px !important;
    min-height: 46px !important;
    padding: 13px 10px !important;
    font-size: 17px !important;
    line-height: 20px !important;
  }

  .site-header nav .nav-menu { top: 46px !important; }
}

/* The mascot photo: 240px read as a thumbnail next to the list. */
.sjs-home-art { width: 340px !important; max-width: 40% !important; }

@media (max-width: 700px) {
  .sjs-home-art { width: 100% !important; max-width: 100% !important; }
}

/* ==== PART 5 - parent page layout ========================================
   Scoped to .sjs-shell so only the public parent pages are affected.
   ========================================================================= */

/* --- breathing room the page lost when it moved into the sidebar grid --- */
.sjs-shell:not(.no-side) .sjs-col > main.page { padding: 28px 10px 56px !important; }
.sjs-shell:not(.no-side) .sjs-crumbs { padding: 22px 10px 0 !important; }

/* --- type scale, brought in line with the 149px band and the home page --- */
.sjs-shell main.page h1,
.sjs-shell .program-title h1 {
  font-size: clamp(1.5rem, 2.2vw, 1.95rem) !important;
  line-height: 1.18 !important;
  max-width: 40ch;
}

.sjs-shell main.page h2 { font-size: 1.2rem !important; line-height: 1.3 !important; }
.sjs-shell main.page h3 { font-size: 1.02rem !important; line-height: 1.35 !important; }
.sjs-shell .card-head h2,
.sjs-shell .card-head h3 { font-size: 1rem !important; }

.sjs-shell main.page .lead {
  max-width: 74ch !important;
  margin-top: 10px !important;
  font-size: .95rem !important;
  line-height: 1.6 !important;
}

.sjs-shell main.page .eyebrow {
  margin-bottom: 6px !important;
  font-size: .68rem !important;
  letter-spacing: .16em !important;
}

/* --- even, aligned card columns instead of 1.1fr 1fr 1fr --- */
.sjs-shell .program-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;
}

.sjs-shell .program-card { padding: 20px 22px !important; }
.sjs-shell .program-card p { font-size: .9rem !important; line-height: 1.6 !important; }

/* --- consistent vertical rhythm between the blocks on a page --- */
.sjs-shell .program-head { margin-bottom: 18px !important; }
.sjs-shell .sync-info-banner { margin: 0 0 18px !important; }
.sjs-shell .sync-info-banner + .sync-info-banner { margin-top: -6px !important; }
.sjs-shell .program-grid + .program-grid,
.sjs-shell .program-grid + .sync-info-banner,
.sjs-shell .sync-info-banner + .program-grid { margin-top: 20px !important; }
.sjs-shell .program-help-bar { margin-top: 24px !important; }

/* the program logo lockups were sized for a 3.5rem heading */
.sjs-shell .program-logo,
.sjs-shell .program-logo-icon { height: 38px !important; width: auto !important; }
.sjs-shell .program-logo-wide { max-height: 44px !important; width: auto !important; }
.sjs-shell .google-g { height: 30px !important; width: auto !important; }
.sjs-shell .program-title { gap: 12px !important; margin: 4px 0 10px !important; }

/* --- guides page --- */
.sjs-shell .docs-hero { margin-bottom: 22px !important; }
.sjs-shell .resource-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.sjs-shell .resource-card { padding: 18px 20px !important; }
.sjs-shell .support-band { margin-top: 24px !important; }
.sjs-shell .info-panel { margin-bottom: 20px !important; }

/* --- ticket page: 760px was set for a centred full-width page --- */
.sjs-shell .ticket-page { max-width: 820px !important; margin: 0 !important; }
.sjs-shell .ticket-intro { margin-bottom: 16px !important; }
.sjs-shell .self-help-banner { margin-bottom: 18px !important; }

/* --- one-column pages should not stretch to a 1100px measure --- */
.sjs-shell .panel,
.sjs-shell .instructions { max-width: 900px; }

@media (max-width: 900px) {
  .sjs-shell:not(.no-side) .sjs-col > main.page { padding: 22px 16px 44px !important; }
  .sjs-shell:not(.no-side) .sjs-crumbs { padding: 16px 16px 0 !important; }
  .sjs-shell .program-grid { grid-template-columns: 1fr !important; }
}

/* ==== PART 6 - form-and-cards pairing ==================================== */

@media (min-width: 901px) {
  .sjs-shell .program-grid:has(.program-form) {
    grid-template-columns: minmax(320px, 1.15fr) minmax(280px, 1fr) !important;
  }
  .sjs-shell .program-grid:has(.program-form) > .program-form {
    grid-row: span 2;
  }
}


/* ==== PART 7 - room, readability and hierarchy ============================
   Damond 2026-08-07: "main point is for them to request and get information
   fast… they have to scroll all the way to the bottom to get what they want…
   everything seems so blocky and the organization is off and does not stand
   out… before I had more room so the layout was not bad but now its all
   compact and hard to really see."

   Three separate problems, fixed separately:
     ROOM        the rail took 272 + 46 = 318px. Now 236 + 34 = 270px, and the
                 shell cap goes 1615 -> 1760, giving the content ~190px back.
     READABILITY PART 5 cut body copy to .9rem/14.4px chasing "blown up",
                 which was an over-correction - headings were the problem, not
                 body text. Body copy is back to ~1rem.
     ORDER       the request form is what people came for, so it sorts first
                 inside its grid instead of sitting under the explanation.
   ========================================================================= */

/* ---------- room ---------- */
.sjs-shell { grid-template-columns: 236px minmax(0, 1fr) !important; gap: 34px !important; max-width: 1760px !important; }
@media (max-width: 1180px) { .sjs-shell { grid-template-columns: 210px minmax(0, 1fr) !important; gap: 26px !important; } }
@media (max-width: 900px)  { .sjs-shell { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } }

.sjs-side { padding-top: 26px !important; }
.sjs-sidenav a { font-size: .9rem !important; padding: 8px 12px !important; }
.sjs-side-sub { font-size: 1rem !important; }

/* ---------- readability: body copy back up ---------- */
.sjs-shell main.page .lead { font-size: 1.02rem !important; line-height: 1.62 !important; }
.sjs-shell .program-card p,
.sjs-shell .program-card li,
.sjs-shell .note-list,
.sjs-shell .step-list span,
.sjs-shell .info-panel p,
.sjs-shell .resource-card p { font-size: .97rem !important; line-height: 1.62 !important; }
.sjs-shell .sync-info-banner p { font-size: .97rem !important; line-height: 1.62 !important; }
.sjs-shell .card-head h2, .sjs-shell .card-head h3 { font-size: 1.06rem !important; }
.sjs-shell .support { font-size: .87rem !important; line-height: 1.55 !important; }

/* ---------- the request form comes first ---------- */
.sjs-shell .program-grid > .program-form { order: -1; }

/* ---------- section label used between blocks ---------- */
.sjs-sec-label {
  margin: 30px 0 12px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #7b8a7e;
}
.sjs-sec-label:first-of-type { margin-top: 24px; }

/* ---------- home: three prominent actions above the fold ---------- */
.sjs-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

.sjs-quick-card {
  display: grid; gap: 7px; align-content: start;
  padding: 20px 20px 18px;
  border: 1px solid #dce5de; border-top: 3px solid var(--sjs-green); border-radius: 12px;
  background: #fff; text-decoration: none; color: inherit;
  box-shadow: 0 6px 18px rgba(16, 48, 12, .06);
  transition: box-shadow .14s, transform .14s, border-color .14s;
}
.sjs-quick-card:hover { box-shadow: 0 12px 26px rgba(16, 48, 12, .13); transform: translateY(-2px); }

.sjs-quick-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
.sjs-quick-ic img { width: 28px; height: 28px; object-fit: contain; }

.sjs-quick-card strong {
  font-family: 'Poppins', system-ui, sans-serif; font-size: 1.04rem; font-weight: 700;
  color: var(--sjs-green); line-height: 1.25;
}
.sjs-quick-card > span:not(.sjs-quick-ic):not(.sjs-quick-go) {
  font-family: 'Poppins', system-ui, sans-serif; font-size: .9rem; line-height: 1.55; color: #5c6c62;
}
.sjs-quick-go {
  margin-top: 4px;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .84rem; font-weight: 700; color: var(--sjs-green);
}

/* ---------- home: how SSO works ---------- */
.sjs-sso {
  margin: 26px 0 0; padding: 22px 24px 20px;
  border: 1px solid #dce5de; border-left: 4px solid var(--sjs-green); border-radius: 12px;
  background: #f6faf7;
}
.sjs-sso h2 {
  margin: 0 0 6px !important;
  font-family: 'Poppins', system-ui, sans-serif; font-size: 1.18rem !important; font-weight: 700;
  color: var(--sjs-green);
}
.sjs-sso-lead {
  margin: 0 0 16px; max-width: 78ch;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .97rem; line-height: 1.62; color: #43524a;
}
.sjs-sso-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.sjs-sso-steps > li { display: flex; gap: 13px; align-items: flex-start; }
.sjs-sso-steps .n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 50%; background: var(--sjs-green); color: #fff;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .8rem; font-weight: 700;
}
.sjs-sso-steps strong {
  display: block; margin-bottom: 2px;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .97rem; color: #1d3226;
}
.sjs-sso-steps p {
  margin: 0; max-width: 82ch;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .92rem; line-height: 1.6; color: #5c6c62;
}
.sjs-sso-foot {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #dce5de;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .9rem; line-height: 1.6; color: #5c6c62;
}

/* ---------- home list: less boxy, more readable ---------- */
.sjs-list-ic { border: 0 !important; background: transparent !important; width: 32px !important; height: 32px !important; }
.sjs-list-ic img { width: 24px !important; height: 24px !important; }
.sjs-list-ic svg { width: 21px !important; height: 21px !important; }
.sjs-list-txt strong { font-size: 1rem !important; }
.sjs-list-txt span { font-size: .88rem !important; }
.sjs-list > li > a { padding: 12px 12px 12px 2px !important; gap: 13px !important; }

@media (max-width: 700px) {
  .sjs-sso { padding: 18px 16px 16px; }
  .sjs-quick { grid-template-columns: 1fr; }
}

/* ==== PART 7b - use the room, and put the list before the explainer =======
   The home column was still capped at 900px inside a 1187px content area, and
   the SSO explainer sat between the quick actions and the list, pushing the
   full list to y=1599. Order is now: quick actions -> full list -> explainer,
   with a jump link at the top for anyone who wants the explanation first.
   ========================================================================= */
.sjs-home { max-width: 1080px !important; }
.sjs-jump { margin: 0 0 14px; }
.sjs-jump a {
  font-family: 'Poppins', system-ui, sans-serif; font-size: .88rem; font-weight: 600;
  color: var(--sjs-green); text-decoration: none; border-bottom: 1px solid rgba(15,48,12,.3);
}
.sjs-jump a:hover { border-bottom-color: var(--sjs-green); }
.sjs-sso { scroll-margin-top: 70px; margin-top: 34px; }

/* ==== PART 7c - phone: keep the quick actions compact =====================
   Stacked as full cards the three actions ran 840 -> ~1500px and pushed the
   list to y=1537 on a 412px screen. On a phone they become compact rows, and
   the mascot photo gives back some height.
   ========================================================================= */
@media (max-width: 700px) {
  .sjs-home-art { max-height: 170px; object-fit: cover; object-position: center 30%; border-radius: 10px; }

  .sjs-quick { gap: 10px; }
  .sjs-quick-card {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "ic title" "ic desc" "ic go";
    align-items: center;
    gap: 2px 12px;
    padding: 14px 16px;
    border-top-width: 1px;
    border-left: 3px solid var(--sjs-green);
  }
  .sjs-quick-ic { grid-area: ic; align-self: start; margin-top: 2px; }
  .sjs-quick-card strong { grid-area: title; font-size: 1rem; }
  .sjs-quick-card > span:not(.sjs-quick-ic):not(.sjs-quick-go) { grid-area: desc; font-size: .85rem; line-height: 1.45; }
  .sjs-quick-go { grid-area: go; margin-top: 2px; font-size: .8rem; }
}

/* ==== PART 8 - PowerSchool new/returning chooser ==========================
   Damond 2026-08-07: "make a badge for returning parents and new parents and
   seperate out on differnt pages not to confuse anyone".
   ========================================================================= */

.sjs-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.sjs-badge-new { background: #0f300c; color: #fff; }
.sjs-badge-ret { background: #f0e2bd; color: #6b4d06; }

.sjs-backlink {
  font-family: 'Poppins', system-ui, sans-serif; font-size: .78rem; font-weight: 600;
  color: #7b8a7e; text-decoration: none; text-transform: none; letter-spacing: 0;
}
.sjs-backlink:hover { color: var(--sjs-green); }

.sjs-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }

.sjs-choose-card {
  display: grid; gap: 8px; align-content: start;
  padding: 24px 24px 22px;
  border: 1px solid #dce5de; border-radius: 14px; background: #fff;
  text-decoration: none; color: inherit;
  box-shadow: 0 8px 22px rgba(16, 48, 12, .07);
  transition: box-shadow .14s, transform .14s, border-color .14s;
}
.sjs-choose-card:hover {
  border-color: #b9cbbd;
  box-shadow: 0 14px 30px rgba(16, 48, 12, .14);
  transform: translateY(-2px);
}

.sjs-choose-card strong {
  font-family: 'Poppins', system-ui, sans-serif; font-size: 1.12rem; font-weight: 700;
  line-height: 1.28; color: #16241b;
}
.sjs-choose-desc {
  font-family: 'Poppins', system-ui, sans-serif; font-size: .92rem; line-height: 1.58; color: #5c6c62;
}
.sjs-choose-points { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sjs-choose-points li {
  position: relative; padding-left: 22px;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .88rem; line-height: 1.45; color: #43524a;
}
.sjs-choose-points li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sjs-green);
}
.sjs-choose-go {
  margin-top: 8px;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .88rem; font-weight: 700; color: var(--sjs-green);
}

/* the badge sits above the heading on the two sub-pages */
.program-head .sjs-badge { margin-bottom: 8px; }

@media (max-width: 700px) {
  .sjs-choose { grid-template-columns: 1fr; gap: 14px; }
  .sjs-choose-card { padding: 18px 18px 16px; }
}

/* ==== PART 9 - no-side shell fix =========================================
   PART 7's `.sjs-shell { grid-template-columns: … !important }` outranked
   `.sjs-shell.no-side`, so pages with no rail kept a phantom 236px first
   column and rendered their whole content inside it (188px wide, 4543px tall).
   Restate the no-side case with !important at higher specificity.
   ========================================================================= */
.sjs-shell.no-side { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 1180px) { .sjs-shell.no-side { grid-template-columns: minmax(0, 1fr) !important; } }

/* A returning parent usually needs the password reset, not the sibling
   Access ID form, so this page keeps its document order. */
.sjs-shell .ps-returning .program-grid > .program-form { order: 0 !important; }

.sjs-shell .sch-returning .program-grid > .program-form { order: 0 !important; }

/* ==== PART 10 - chooser cards, refined ====================================
   Damond 2026-08-07: "I like powerschool split just want the boxs to look
   nicer and not so bulky and AI."

   What read as bulky/generic: 24px padding, 14px radius, a heavy drop shadow,
   a badge floating above a heading above a paragraph above a bulleted list
   above a CTA - five stacked blocks, ~317px tall each.

   Now: a hairline panel with a colour rule down the left edge, the label set
   inline with a rule, an Alice serif heading (the school's own face), one line
   of supporting copy, the steps as a quiet inline sequence, and a text link.
   Roughly 190px, and it reads as typography rather than a widget.
   ========================================================================= */

.sjs-choose { gap: 18px; }

.sjs-choose-card {
  position: relative;
  gap: 0;
  padding: 22px 24px 20px 26px;
  border: 1px solid #e0e7e1;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}

/* the colour rule that carries the badge meaning */
.sjs-choose-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--sjs-green);
}
.sjs-choose-card.is-returning::before { background: #c9a227; }

.sjs-choose-card:hover { border-color: #b9cbbd; background: #fcfdfc; transform: none; box-shadow: none; }

/* label, set inline with a hairline instead of a floating pill */
.sjs-choose-card .sjs-badge {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 0;
  border-radius: 0; background: none !important;
  color: var(--sjs-green) !important;
  font-size: .66rem; letter-spacing: .18em;
}
.sjs-choose-card.is-returning .sjs-badge { color: #8a6d10 !important; }
.sjs-choose-card .sjs-badge::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .45;
}

.sjs-choose-card strong {
  font-family: 'Alice', Georgia, serif;
  font-size: 1.32rem; font-weight: 400; line-height: 1.25; color: #16241b;
  margin-bottom: 7px;
}

.sjs-choose-desc { font-size: .9rem; line-height: 1.55; color: #61705f; }

/* steps as one quiet sequence, not a bulleted stack */
.sjs-choose-points {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  margin: 14px 0 0; padding: 14px 0 0;
  border-top: 1px solid #eef2ef;
  counter-reset: cstep;
}
.sjs-choose-points li {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0; font-size: .82rem; line-height: 1.4; color: #5c6c62;
}
.sjs-choose-points li::before {
  counter-increment: cstep; content: counter(cstep);
  position: static; width: auto; height: auto; border-radius: 0; background: none;
  color: var(--sjs-green); font-weight: 700; font-size: .72rem;
}
.sjs-choose-card.is-returning .sjs-choose-points li::before { color: #8a6d10; }
.sjs-choose-points li:not(:last-child)::after { content: "·"; margin-left: 8px; color: #c3cec6; }

.sjs-choose-go {
  margin-top: 14px; font-size: .85rem; font-weight: 600;
  border-bottom: 1px solid rgba(15,48,12,.28); align-self: start; padding-bottom: 1px;
}
.sjs-choose-card:hover .sjs-choose-go { border-bottom-color: var(--sjs-green); }
.sjs-choose-card.is-returning .sjs-choose-go { color: #8a6d10; border-bottom-color: rgba(138,109,16,.3); }
.sjs-choose-card.is-returning:hover .sjs-choose-go { border-bottom-color: #8a6d10; }

/* the header badge on the sub-pages, same quieter treatment */
.program-head .sjs-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0; border-radius: 0; background: none !important;
  color: var(--sjs-green) !important; font-size: .66rem; letter-spacing: .18em;
}
.program-head .sjs-badge.sjs-badge-ret { color: #8a6d10 !important; }
.program-head .sjs-badge::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .45; }

@media (max-width: 700px) {
  .sjs-choose-card { padding: 18px 18px 16px 20px; }
  .sjs-choose-card strong { font-size: 1.18rem; }
}

/* ==== PART 11 - chooser plates ============================================
   Damond 2026-08-07: "the box split i like it but looking for a nicer design
   that looks orginal and nicer just seems so AI and has no character."

   PART 10 was tidier but still an anonymous rectangle. This rebuilds the
   chooser out of devices SJS already uses, so it reads as theirs:

     * a solid colour strip across the head, set in small caps - the same
       treatment as the green QUICK LINKS / MENU strips in the school site's
       phone drawer and the group headings in its mega menus
     * Alice serif for the question, with a short gold rule under it, which is
       the school's heading + rule pairing
     * the concentric ring motif from the admissions hero
       (.content-hero.admissions-subhero::after) ghosted into the corner
     * the circled arrow from the header's Contact Us control as the action

   Green plate = new parent, gold plate = returning. Nothing here is a generic
   card pattern; every element is borrowed from the school's own chrome.
   ========================================================================= */

.sjs-choose { gap: 22px; }

.sjs-choose-card {
  position: relative;
  overflow: hidden;
  gap: 0;
  padding: 0 26px 24px;
  background: #fdfdfb;
  border: 1px solid #e2e8e3;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(16, 48, 12, .04);
  transition: border-color .16s, box-shadow .16s, background .16s;
}

/* PART 10's left rule and label hairline are replaced by the head strip */
.sjs-choose-card::before { display: none; }
.sjs-choose-card .sjs-badge::after { display: none; }

/* the ring motif, lifted from the admissions hero */
.sjs-choose-card::after {
  content: "";
  position: absolute; right: -78px; bottom: -96px;
  width: 240px; height: 240px; border-radius: 50%;
  border: 1px solid rgba(15, 48, 12, .08);
  box-shadow: inset 0 0 0 28px rgba(15, 48, 12, .032);
  pointer-events: none;
  transition: transform .35s ease;
}
.sjs-choose-card.is-returning::after {
  border-color: rgba(201, 162, 39, .22);
  box-shadow: inset 0 0 0 28px rgba(201, 162, 39, .07);
}
.sjs-choose-card:hover::after { transform: scale(1.06); }

.sjs-choose-card:hover {
  background: #fff;
  border-color: #cdd9cf;
  box-shadow: 0 10px 26px rgba(16, 48, 12, .10);
  transform: none;
}

/* head strip */
.sjs-choose-card .sjs-badge {
  display: block;
  margin: 0 -26px 20px;
  padding: 11px 26px;
  border-radius: 0;
  background: #0f300c !important;
  color: #fff !important;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .67rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.sjs-choose-card.is-returning .sjs-badge {
  background: #c9a227 !important;
  color: #3a2c04 !important;
}

/* the question, with the school's short gold rule beneath */
.sjs-choose-card strong {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 14px;
  font-family: 'Alice', Georgia, serif;
  font-size: 1.42rem; font-weight: 400; line-height: 1.24; color: #14231a;
}
.sjs-choose-card strong::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 2px; background: #c9a227;
}

.sjs-choose-desc { position: relative; font-size: .92rem; line-height: 1.6; color: #5b6a60; }

/* steps: small caps numerals, no bullets, no border */
.sjs-choose-points {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 5px 16px;
  margin: 16px 0 0; padding: 0; border-top: 0;
  counter-reset: cstep;
}
.sjs-choose-points li {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .78rem; letter-spacing: .01em; color: #5b6a60;
}
.sjs-choose-points li::before {
  counter-increment: cstep; content: counter(cstep, decimal-leading-zero);
  color: #b08d1c; font-family: 'Alice', Georgia, serif; font-size: .84rem; font-weight: 400;
}
.sjs-choose-points li::after { display: none; }

/* the circled arrow, as used by Contact Us in the header */
.sjs-choose-go {
  position: relative;
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 20px; padding: 0; border-bottom: 0 !important;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #0f300c;
}
.sjs-choose-go::after {
  content: ""; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: #0f300c center/13px 13px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: transform .16s;
}
.sjs-choose-card.is-returning .sjs-choose-go { color: #7a5f0e; }
.sjs-choose-card.is-returning .sjs-choose-go::after { background-color: #c9a227; }
.sjs-choose-card:hover .sjs-choose-go::after { transform: translateX(4px); }

@media (max-width: 700px) {
  .sjs-choose { gap: 16px; }
  .sjs-choose-card { padding: 0 20px 20px; }
  .sjs-choose-card .sjs-badge { margin: 0 -20px 16px; padding: 10px 20px; }
  .sjs-choose-card strong { font-size: 1.24rem; }
  .sjs-choose-card::after { right: -90px; bottom: -110px; }
}

/* ==== PART 12 - charcoal returning plate + GoGuardian video ===============
   Damond 2026-08-07: "swap the returning strip to charcoal."
   The gold read warm against the green banner; charcoal #373c39 is the site's
   own secondary (it is the flyout panel colour), so the pair now reads as
   green / charcoal with gold kept only as the shared heading rule.
   ========================================================================= */

.sjs-choose-card.is-returning .sjs-badge {
  background: #373c39 !important;
  color: #fff !important;
}
.sjs-choose-card.is-returning::after {
  border-color: rgba(55, 60, 57, .16);
  box-shadow: inset 0 0 0 28px rgba(55, 60, 57, .045);
}
.sjs-choose-card.is-returning .sjs-choose-points li::before { color: #6b736d; }
.sjs-choose-card.is-returning .sjs-choose-go { color: #373c39; }
.sjs-choose-card.is-returning .sjs-choose-go::after { background-color: #373c39; }

/* the header badge on the returning sub-pages follows the same swap */
.program-head .sjs-badge.sjs-badge-ret { color: #373c39 !important; }

/* --- responsive video, replacing the bespoke .video-panel markup --- */
.sjs-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid #e2e8e3;
  border-radius: 3px;
  overflow: hidden;
  background: #0f300c;
}
.sjs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* older engines without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .sjs-video { height: 0; padding-bottom: 56.25%; }
}

/* A full 1120px embed dominated the page; a 720px cap sits better against
   the cards above it. */
.sjs-video { max-width: 720px; }

/* ==== PART 13 - the Single Sign-On plate ==================================
   Damond 2026-08-07: a badge at the top of the home page for SSO, naming the
   SJS Bookmark Bar and saying why syncing matters, in language a parent who
   has never heard "SSO" can follow.

   Same plate language as the PowerSchool / Schoology choosers - colour strip
   head, Alice heading, gold rule, ring motif - but full width and in three
   numbered columns so it stays wide rather than tall.
   ========================================================================= */

.sjs-plate {
  position: relative;
  overflow: hidden;
  margin: 0 0 26px;
  background: #fdfdfb;
  border: 1px solid #e2e8e3;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(16, 48, 12, .04);
  scroll-margin-top: 70px;
}

.sjs-plate::after {
  content: "";
  position: absolute; right: -96px; bottom: -120px;
  width: 280px; height: 280px; border-radius: 50%;
  border: 1px solid rgba(15, 48, 12, .07);
  box-shadow: inset 0 0 0 32px rgba(15, 48, 12, .028);
  pointer-events: none;
}

.sjs-plate-strip {
  display: block;
  padding: 11px 26px;
  background: #0f300c;
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .67rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}

.sjs-plate-body { position: relative; padding: 22px 26px 24px; }

.sjs-plate h2 {
  position: relative;
  margin: 0 0 14px !important;
  padding-bottom: 14px;
  font-family: 'Alice', Georgia, serif !important;
  font-size: 1.46rem !important; font-weight: 400 !important; line-height: 1.24 !important;
  color: #14231a;
}
.sjs-plate h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 2px; background: #c9a227;
}

.sjs-plate-lead {
  max-width: 86ch; margin: 0 0 22px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .96rem; line-height: 1.62; color: #4c5b52;
}

.sjs-plate-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 30px; align-items: start;
  padding-top: 22px; border-top: 1px solid #e9eee9;
}

.sjs-plate-col { position: relative; }

.sjs-plate-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; margin-bottom: 10px;
  border-radius: 50%; background: #0f300c; color: #fff;
  font-family: 'Alice', Georgia, serif; font-size: .92rem;
}

.sjs-plate-col h3 {
  margin: 0 0 7px !important;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .98rem !important; font-weight: 700 !important; line-height: 1.3 !important;
  color: #16241b;
}

.sjs-plate-col p {
  margin: 0 0 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .89rem; line-height: 1.58; color: #56655c;
}

.sjs-plate-hint {
  padding-left: 11px; border-left: 2px solid #dbe4dd;
  font-size: .85rem !important; color: #6d7d70 !important;
}

.sjs-plate-list {
  margin: 6px 0 10px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sjs-plate-list li {
  padding: 4px 11px; border-radius: 999px;
  background: #eef3ef; border: 1px solid #dde6df;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .8rem; font-weight: 600; color: #2c4033;
}

.sjs-plate-check {
  position: relative;
  margin: 24px 0 0; padding: 16px 18px;
  border-left: 4px solid #c9a227; border-radius: 0 6px 6px 0;
  background: #f7f4e9;
}
.sjs-plate-check strong {
  display: block; margin-bottom: 5px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b5411;
}
.sjs-plate-check p {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .92rem; line-height: 1.62; color: #4a4331;
}

.sjs-plate-foot {
  position: relative;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #e9eee9;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .88rem; line-height: 1.6; color: #5c6c62;
}

@media (max-width: 700px) {
  .sjs-plate-strip { padding: 10px 18px; }
  .sjs-plate-body { padding: 18px 18px 20px; }
  .sjs-plate h2 { font-size: 1.26rem !important; }
  .sjs-plate-cols { gap: 20px; }
  .sjs-plate::after { right: -120px; bottom: -150px; }
}

/* PART 13b - the plate ran 867px and pushed the quick actions to y=1402.
   Tighter rhythm; the copy was cut back at the same time. */
.sjs-plate { margin-bottom: 22px; }
.sjs-plate-body { padding: 18px 26px 20px; }
.sjs-plate h2 { margin-bottom: 12px !important; padding-bottom: 12px; font-size: 1.34rem !important; }
.sjs-plate-lead { margin-bottom: 16px; font-size: .93rem; }
.sjs-plate-cols { gap: 18px 30px; padding-top: 18px; }
.sjs-plate-num { width: 24px; height: 24px; margin-bottom: 8px; font-size: .86rem; }
.sjs-plate-col h3 { font-size: .94rem !important; margin-bottom: 5px !important; }
.sjs-plate-col p { font-size: .87rem; line-height: 1.5; margin-bottom: 6px; }
.sjs-plate-list { margin: 6px 0 0; gap: 5px; }
.sjs-plate-list li { padding: 3px 10px; font-size: .78rem; }
.sjs-plate-check { margin-top: 18px; padding: 13px 16px; }
.sjs-plate-check p { font-size: .88rem; line-height: 1.55; }
.sjs-plate-foot { margin-top: 14px; padding-top: 13px; font-size: .85rem; line-height: 1.55; }

/* ==== PART 14 - app / tablet login picker ================================= */
.sjs-appset {
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid #dde6df; border-radius: 8px; background: #f6faf7;
}
.sjs-appset legend {
  padding: 0 6px; margin-left: -6px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0f300c;
}
.sjs-appcheck {
  display: flex !important; align-items: center; gap: 10px;
  margin: 0 0 4px !important; padding: 7px 4px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .93rem !important; font-weight: 500 !important; text-transform: none !important;
  letter-spacing: 0 !important; color: #2c4033; cursor: pointer;
}
.sjs-appcheck:last-child { margin-bottom: 0 !important; }
.sjs-appcheck input { width: 18px; height: 18px; accent-color: #0f300c; margin: 0; flex: 0 0 auto; }
.sjs-appcheck:hover { color: #0f300c; }

/* ======================================================================
   PART 15 - home hero without the photo, and the SSO plate's device row.

   The hero was built as a left-aligned flex row balancing a photo on the
   right. With Bernie gone there is nothing to balance, so it centres. The
   hours line was a grey footnote; it is what parents most need to see
   before they sit waiting on a reply, so it becomes a pill.

   Appended last on purpose - PART 13b's plate overrides sit above and would
   otherwise win on equal specificity.
   ====================================================================== */

.sjs-home-hero {
  display: block;
  margin: 0 0 26px;
  text-align: center;
}

.sjs-home-hero-copy { max-width: 760px; margin: 0 auto; }

.sjs-home .sjs-eyebrow { color: #8a9a8c; }

.sjs-home-hero h1 {
  margin: 0 0 12px !important;
  padding-bottom: 16px;
  position: relative;
}

/* the gold rule that marks a title everywhere else on the site */
.sjs-home-hero h1::after {
  content: "";
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 54px; height: 2px; background: #c9a227;
}

.sjs-home-hero .sjs-lead {
  max-width: 60ch;
  margin: 0 auto 14px;
  font-size: 1.03rem;
  line-height: 1.6;
  color: #3f4f45;
}

.sjs-home-blurb {
  max-width: 68ch;
  margin: 0 auto 18px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.68;
  color: #56655b;
}
.sjs-home-blurb strong { color: #2f4030; font-weight: 600; }

/* --- hours: footnote -> pill ------------------------------------------ */
.sjs-home-hours {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  padding: 10px 20px;
  background: #f4f7f2;
  border: 1px solid #dde6dc;
  border-radius: 999px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  color: #2f4030;
  text-align: left;
}
.sjs-home-hours svg { flex: 0 0 auto; margin-top: 0; color: #4d7a3f; }

/* --- sync reference, inside the SSO plate ----------------------------- */
.sjs-sync-ref {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 20px 0 0;
  padding: 16px 18px;
  background: #fbf7ec;
  border: 1px solid #ecdfba;
  border-left: 3px solid #c9a227;
  border-radius: 3px;
}
.sjs-sync-ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e6d7ab;
  color: #9a7c1c;
}
.sjs-sync-ic svg { width: 19px; height: 19px; }
.sjs-sync-txt { min-width: 0; }
.sjs-sync-txt strong {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .94rem; font-weight: 700; color: #4a3f1d;
  margin-bottom: 4px;
}
.sjs-sync-txt p {
  margin: 0 0 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .88rem; line-height: 1.55; color: #6a5f42;
}
.sjs-sync-go {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .87rem; font-weight: 700; color: #0f300c;
  text-decoration: none; border-bottom: 1px solid rgba(15,48,12,.28);
}
.sjs-sync-go:hover { border-bottom-color: #0f300c; }

/* --- which device --------------------------------------------------- */
.sjs-dev-title {
  margin: 24px 0 14px !important;
  padding-top: 20px;
  border-top: 1px solid #e9eee9;
  font-family: 'Alice', Georgia, serif !important;
  font-size: 1.08rem !important; font-weight: 400 !important;
  color: #14231a;
}

.sjs-dev {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 14px;
}

.sjs-dev-card {
  padding: 15px 16px 14px;
  background: #fff;
  border: 1px solid #e2e8e3;
  border-top: 3px solid #c3cec4;
  border-radius: 3px;
}
.sjs-dev-card.is-best  { border-top-color: #4d7a3f; background: #f7fbf5; }
.sjs-dev-card.is-avoid { border-top-color: #c07a2a; background: #fdf8f3; }

.sjs-dev-tag {
  display: inline-block;
  margin-bottom: 7px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #7c8a7e;
}
.sjs-dev-card.is-best  .sjs-dev-tag { color: #3d6b30; }
.sjs-dev-card.is-avoid .sjs-dev-tag { color: #a8621d; }

.sjs-dev-card h4 {
  margin: 0 0 7px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .95rem; font-weight: 700; line-height: 1.3; color: #1d2c22;
}
.sjs-dev-card p,
.sjs-dev-card ul {
  margin: 0 0 7px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .86rem; line-height: 1.55; color: #55645b;
}
.sjs-dev-card ul { padding-left: 17px; }
.sjs-dev-card li { margin-bottom: 3px; }
.sjs-dev-card p:last-child { margin-bottom: 0; }

.sjs-dev-note {
  margin-top: 9px !important;
  padding-top: 9px;
  border-top: 1px dashed #dfe6e0;
  font-size: .83rem !important;
  color: #6b7a70 !important;
}
.sjs-dev-card a { color: #0f300c; font-weight: 600; }

@media (max-width: 700px) {
  .sjs-home-hero { margin-bottom: 20px; }
  .sjs-home-blurb { font-size: .89rem; }
  .sjs-home-hours { font-size: .88rem; padding: 9px 16px; }
  .sjs-sync-ref { gap: 12px; padding: 14px; }
  .sjs-dev { gap: 12px; }
}

/* --- PART 15b: measured fixes -----------------------------------------
   1. h1 inherited max-width:734px from an earlier PART, so it sat flush
      left in the 760px column and the gold rule centred on the wrong box
      (13px off). 
   2. The hours pill wrapped a 196-char two-sentence note over four lines.
      The hours alone go in the pill; the after-hours caveat sits beneath.
   --------------------------------------------------------------------- */

.sjs-home-hero h1 { max-width: none !important; width: 100%; }

.sjs-home-hours { max-width: 100%; }
.sjs-home-hours b { font-weight: 700; color: #1d3318; }

.sjs-home-afterhours {
  max-width: 56ch;
  margin: 10px auto 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .82rem;
  line-height: 1.55;
  color: #7b8a7e;
}

@media (max-width: 700px) {
  .sjs-home-afterhours { font-size: .79rem; }
}

/* At 375px the pill wraps to three lines, where a 999px radius reads as a
   lozenge rather than a pill. Square it off once it stops being one line. */
@media (max-width: 700px) {
  .sjs-home-hours { border-radius: 14px; align-items: flex-start; }
  .sjs-home-hours svg { margin-top: 2px; }
}

/* ======================================================================
   PART 16 - the school footer, and the hero back to the page's own flow.

   Footer measured from sjschoolva.org at 1280px:
     band  #0f300c, padding 40px 0
     type  Alice 20px / 30px, #fff, centred
     seal  185 x 177
     ribbon line rgba(255,255,255,.5) bold
   It replaces a 966 KB PNG screenshot that could not reflow.

   Hero: PART 15 centred it once the photo came out. Damond: "not a fan of
   the center ... make look nicer to match the pages flow" - every other
   page on this site is left-aligned, so the hero goes back to left and the
   gold rule with it.
   ====================================================================== */

/* ---- hero: back to the page's left-aligned rhythm -------------------- */
.sjs-home-hero { text-align: left; }
.sjs-home-hero-copy { max-width: 100%; margin: 0; }

.sjs-home-hero h1::after { left: 0; transform: none; }

.sjs-home-hero .sjs-lead,
.sjs-home-blurb,
.sjs-home-afterhours { margin-left: 0; margin-right: 0; }

.sjs-home-hero .sjs-lead { max-width: 64ch; }
.sjs-home-blurb { max-width: 78ch; }
.sjs-home-afterhours { max-width: 62ch; }

.sjs-home-hours { margin-left: 0; }

/* ---- the school footer ---------------------------------------------- */
.sjs-school-footer {
  background: #0f300c;
  padding: 40px 24px;
  margin-top: 46px;
}

.sjs-sf-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  max-width: 800px;
  margin: 0 auto;
}

.sjs-sf-seal {
  flex: 0 0 auto;
  width: 185px; height: 177px;
  max-width: 100%;
}

.sjs-sf-text {
  min-width: 0;
  text-align: center;
  font-family: 'Alice', Georgia, serif;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
}

.sjs-sf-text p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }

.sjs-sf-text a { color: #fff; font-weight: 400; text-decoration: none; }
.sjs-sf-text a:hover { text-decoration: underline; }

.sjs-sf-ribbon {
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 700px) {
  .sjs-school-footer { padding: 30px 18px; margin-top: 34px; }
  .sjs-sf-inner { flex-direction: column; gap: 18px; }
  .sjs-sf-seal { width: 132px; height: 126px; }
  .sjs-sf-text { font-size: 16px; line-height: 25px; }
}

/* .sjs-sf-text p { color: inherit } is (0,2,0) and was outranking the
   (0,1,0) ribbon rule, so the Blue Ribbon line rendered solid white
   instead of the school's 50% white. */
.sjs-sf-text p.sjs-sf-ribbon { color: rgba(255, 255, 255, .5); }

/* PART 17 - the device row now carries its own guide links, and a closing
   line for the cases that do not need a card of their own. */
.sjs-dev-more {
  margin: 12px 0 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .84rem;
  line-height: 1.55;
  color: #6b7a70;
}
.sjs-dev-more a { color: #0f300c; font-weight: 600; }

/* the guide link is the action in each card - give it the underline the
   plate's other links have, so it does not read as plain bold text */
.sjs-dev-note a {
  border-bottom: 1px solid rgba(15, 48, 12, .28);
  text-decoration: none;
}
.sjs-dev-note a:hover { border-bottom-color: #0f300c; }

/* PART 17b - the device row is the tallest thing on the page; tighten it so
   the quick actions stay reachable. */
.sjs-dev { gap: 12px; }
.sjs-dev-card { padding: 13px 14px 12px; }
.sjs-dev-card p, .sjs-dev-card ul { font-size: .84rem; line-height: 1.5; margin-bottom: 6px; }
.sjs-dev-card h4 { font-size: .92rem; margin-bottom: 6px; }
.sjs-dev-note { margin-top: 8px !important; padding-top: 8px; font-size: .81rem !important; }
.sjs-dev-title { margin: 20px 0 12px !important; padding-top: 16px; }
.sjs-sync-ref { margin-top: 16px; padding: 14px 16px; }


/* ================= HOME DENSITY PASS (2026-08-23) =================
   The parent-account links sat roughly 1250px down the page. Causes, in order
   of cost: .sjs-quick had been overridden to a single column so the three
   "Most requested" cards stacked; "Everything else" was a column of
   full-width rows. Both are restored to grids here. Delete this block to
   revert -- everything above it is untouched. */

/* Most requested: a row again, so the Google password and PowerSchool cards
   are the first thing on screen instead of a vertical stack. */
.sjs-home .sjs-quick { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }

/* Everything else: aligned badges rather than tall full-width rows. The group
   headings span the whole row so the grouping still reads. */
.sjs-home .sjs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px; border-top: 0; align-items: stretch; }
.sjs-home .sjs-list .sjs-list-head { grid-column: 1 / -1; padding: 18px 0 0; }
.sjs-home .sjs-list > li:not(.sjs-list-head) { display: flex; }
.sjs-home .sjs-list > li > a { flex: 1 1 auto; border: 1px solid #e3e9e4; border-bottom: 1px solid #e3e9e4;
  border-radius: 10px; background: #fff;
  /* line 1128 sets padding-left:2px !important for the old full-width rows;
     inside a bordered badge that puts the icon on the border, so override it. */
  padding: 12px 14px !important; }
.sjs-home .sjs-list > li > a:hover { background: #f3f7f4; border-color: #c9d6c9; }

/* One column on a phone -- side-by-side badges are unreadable at that width. */
@media (max-width: 620px) {
  .sjs-home .sjs-quick, .sjs-home .sjs-list { grid-template-columns: 1fr; }
}