/* Readability stays independent of animation and JavaScript. */
.how-it-works { --routine-muted: #1e3447; }
.opening-description { font-size: 17px; font-weight: 600; color: #253b4b; letter-spacing: 0; }
.how-intro p,
.arrival-copy > p:not(.routine-eyebrow),
.permissions-intro > p:last-child,
.permission-detail p,
.attendance-heading > p,
.announcements-copy > p:not(.routine-eyebrow) {
  font-size: 17px;
  line-height: 1.8;
  font-weight: 600;
  color: #1e3447;
}
.how-intro p strong { color: #102f50; font-weight: 800; }
.arrival-copy > p:not(.routine-eyebrow) { color: #fff; }
.how-intro h2,
.arrival-copy h3,
.permissions-intro h3,
.attendance-heading h3,
.announcements-copy h3 { font-weight: 800; letter-spacing: -.025em; }
.routine-eyebrow { font-size: 13px; letter-spacing: .07em; }
.notice-types dt { font-size: 15px; }
.notice-types dd { font-size: 14px; line-height: 1.75; color: #f2f6f8; }
.arrival-chat-header strong { font-size: 15px; }
.arrival-chat-header span { font-size: 12px; }
.arrival-chat-day { font-size: 12px; color: #365849; }
.arrival-message p { font-size: 15px; line-height: 1.75; font-weight: 500; color: #1c332b; }
.arrival-message-time { font-size: 11px; color: #456356; }
.arrival-demo figcaption { font-size: 12px; color: #eef4f7; }
.permissions-visual figcaption strong { font-size: 14px; }
.permissions-visual figcaption p { font-size: 13px; color: #203648; }
.permission-situation { font-size: 13px; line-height: 1.8; }
.report-overline { font-size: 12px; color: #324c5b; }
.report-toolbar h4 > span { font-size: 13px; color: #324c5b; }
.download-example { font-size: 13px; padding: 11px 14px; }
.report-table th { font-size: 13px; color: #284355; }
.report-table td { font-size: 14px; line-height: 1.65; color: #1e3447; font-weight: 500; }
.report-status { font-size: 13px; font-weight: 600; }
.report-note { font-size: 12px; color: #324c5b; }
.school-note-header > span { font-size: 12px; }
.school-note-date { font-size: 12px; color: #324c3e; }
.school-note > p { font-size: 16px; line-height: 1.8; color: #203c31; }
.school-note-signature { font-size: 12px; color: #324c3e; }
.announcement-demo figcaption { font-size: 12px; color: #29493b; }
.manifesto-reason { font-size: 18px; font-weight: 500; color: #1e3447; }
.manifesto-question span { color: #087456; }
.manifesto-message p { font-size: 12px; line-height: 1.55; }
.manifesto-message-time { font-size: 10px; line-height: 1.2; color: #435f5a; }

/* Content is visible before JavaScript and while outside the viewport. */
.motion-reveal.is-inview { animation: zeli-enter 560ms cubic-bezier(.2,.7,.25,1) both; }
.arrival-message.motion-reveal.is-inview { animation-name: zeli-message; }
.number-motion { display: inline-flex; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.arrival-message-time > .number-motion { margin-left: 0; color: inherit; letter-spacing: normal; }
.number-glyph { display: inline-block; }
.number-motion.is-inview .number-glyph {
  animation: zeli-digit 480ms cubic-bezier(.2,.7,.25,1) both;
  animation-delay: calc(var(--digit-index, 0) * 30ms);
}
.number-motion:hover { color: #0f644f; }
.report-table tbody tr { transition: background-color 180ms; }
.report-table tbody tr:hover { background: #eaf3ec; }
.download-example, .contact-link { transition: transform 180ms, background-color 180ms, box-shadow 180ms; }
.download-example:hover, .contact-link:hover { transform: translateY(-2px); }
.download-example:active, .contact-link:active { transform: translateY(0); }
.school-note { transition: transform 220ms, box-shadow 220ms; }
@media (hover: hover) and (pointer: fine) {
  .school-note:hover { transform: translateY(-3px); box-shadow: 0 9px 22px #15365d12; }
}
@keyframes zeli-enter {
  from { transform: translate3d(0, 12px, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes zeli-message {
  from { transform: translateY(8px) scale(.985); }
  to { transform: translateY(0) scale(1); }
}
@keyframes zeli-digit {
  from { transform: translateY(.45em); color: #13765e; }
  to { transform: translateY(0); }
}
@media (max-width: 850px) {
  .opening-description { font-size: 16px; }
  .manifesto-reason { font-size: 17px; }
}
@media (max-width: 480px) {
  .how-intro p,
  .arrival-copy > p:not(.routine-eyebrow),
  .permissions-intro > p:last-child,
  .permission-detail p,
  .attendance-heading > p,
  .announcements-copy > p:not(.routine-eyebrow) { font-size: 16px; }
  .routine-eyebrow { font-size: 12px; }
  .notice-types dt { font-size: 14px; }
  .notice-types dd { font-size: 13px; }
  .arrival-demo figcaption { font-size: 11px; }
  .permissions-visual figcaption strong { font-size: 13px; }
  .permissions-visual figcaption p { font-size: 12px; }
  .permission-situation { font-size: 12px; }
  .report-overline { font-size: 11px; }
  .report-toolbar h4 > span { font-size: 12px; }
  .download-example { font-size: 12px; padding: 10px 12px; }
  .report-table th { font-size: 12px; }
  .report-table td { font-size: 13px; }
  .report-table th:first-child { width: 30%; }
  .report-table th:nth-child(2) { width: 22%; }
  .report-table th:nth-child(3) { width: 18%; }
  .report-table th:last-child { width: 30%; }
  .report-status { font-size: 12px; }
  .report-note { font-size: 11px; }
  .school-note > p { font-size: 15px; }
  .announcement-demo figcaption { font-size: 11px; }
  .manifesto-reason { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .number-glyph,
  .school-note,
  .download-example,
  .contact-link {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .report-table tbody tr { transition: none; }
}