/* 

Shule Breeze — brand & product layer
Built on top of TemplateMo 569 Edu Meeting base styles (assets/css/templatemo-edu-meeting.css).
The template look is kept on purpose: same Poppins type stack, same maroon #a12c2f /
amber #f5a425 / charcoal #1f272b palette, same rounded-card and carousel components.

------------------------------------------------
Table of contents
------------------------------------------------
01. utilities
02. header / navigation
03. connectivity pill
04. module cards
05. offline-first section
06. sync demo widget
07. pricing plans
08. stats & notes
09. footer
10. contact form + module detail
11. PWA / offline
12. responsive

------------------------------------------------
01. utilities
------------------------------------------------
*/

.sf-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sf-lead {
  font-size: 15px;
  color: #1f272b;
}

.sf-muted {
  color: #7a7a7a;
}

.sf-mt-0 { margin-top: 0 !important; }
.sf-mb-0 { margin-bottom: 0 !important; }

.sf-btn {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background-color: #a12c2f;
  border: none;
  border-radius: 22px;
  padding: 12px 26px;
  cursor: pointer;
  transition: all .3s;
  font-family: 'Poppins', sans-serif;
}

.sf-btn:hover {
  opacity: .9;
  color: #fff;
}

.sf-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sf-btn-amber {
  background-color: #f5a425;
  color: #1f272b;
}

.sf-btn-amber:hover {
  color: #1f272b;
}

.sf-btn-ghost {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1f272b;
  background-color: #f7f7f7;
  border: 1px solid #e4e4e4;
  border-radius: 22px;
  padding: 11px 22px;
  cursor: pointer;
  transition: all .3s;
  font-family: 'Poppins', sans-serif;
}

.sf-btn-ghost:hover {
  border-color: #f5a425;
  color: #a12c2f;
}

.sf-btn-ghost:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sf-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Text link with the template's maroon accent */
.sf-link {
  color: #a12c2f;
  font-weight: 500;
}

.sf-link:hover {
  color: #f5a425;
}

/* 
------------------------------------------------
02. header / navigation
------------------------------------------------
*/

/*
  assets/images/shuleflow-logo.png is the supplied artwork, unmodified: a
  1024x1536 file in which the lockup [mark] / SHULE BREEZE / - FLOW - occupies
  only the box x 101..962, y 407..1079 (862x673). The rest is empty canvas.

  Rather than re-cut the bitmap, .sf-logo-crop crops that dead space in CSS, so
  the file is served exactly as it was supplied:
      box aspect  673 / 862   ->  padding-bottom 78.074%
      img scale  1024 / 862   ->  width  118.794%
      left inset  101 / 862   ->  left   -11.717%
      top  inset  407 / 673   ->  top    -60.475%
  If the file is ever replaced, re-measure those three numbers.

  This is a PNG with a real alpha channel, so the artwork sits on the white
  plate rather than in an opaque white rectangle. The plate is what keeps the
  dark artwork readable over the dark hero video and the dark footer photo, in
  the header and the footer alike - one consistent treatment, and the logo is
  never recoloured.
*/
.sf-logo-plate {
  display: block;
  width: 100%;
  padding: 6px;
  background: #fff;
  border-radius: 12px;
  line-height: 0;
}

.sf-logo-crop {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 78.074%;
  overflow: hidden;
}

.sf-logo-crop img {
  position: absolute;
  top: -60.475%;
  left: -11.717%;
  width: 118.794%;
  max-width: none;
  height: auto;
  display: block;
  border: 0;
}

.header-area .main-nav .logo {
  line-height: 1;
  display: block;
  float: left;
  width: 92px;
  letter-spacing: 0;
}

@media (max-width: 1199px) {
  .header-area .main-nav .logo {
    width: 84px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    margin-left: 0;
    float: none;
    width: 76px;
  }
}

.header-area .main-nav .nav li.sf-nav-cta a {
  height: 40px;
  line-height: 38px;
  padding: 0px 20px;
  margin-top: 1px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  font-size: 12px;
}

.header-area .main-nav .nav li.sf-nav-cta a:hover {
  background-color: #f5a425;
  border-color: #f5a425;
  color: #1f272b !important;
}

.background-header .main-nav .nav li.sf-nav-cta a {
  border-color: #a12c2f;
  color: #a12c2f !important;
}

.background-header .main-nav .nav li.sf-nav-cta a:hover {
  background-color: #a12c2f;
  border-color: #a12c2f;
  color: #fff !important;
}

.header-area .main-nav .logo .sf-logo-mark {
  vertical-align: middle;
  margin-right: 8px;
  width: 30px;
  height: 30px;
}

@media (max-width: 767px) {
  .header-area .main-nav .nav li.sf-nav-cta a {
    border: none;
    border-radius: 0;
    padding: 0px !important;
    height: 50px !important;
    line-height: 50px !important;
  }
}

/* 
------------------------------------------------
03. connectivity pill
------------------------------------------------
*/

.sf-conn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 5px 14px 5px 11px;
  cursor: pointer;
  transition: all .3s;
}

.sf-conn:hover {
  background-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/*
  The pill is a button that toggles the simulated network, but on the dark
  sub-header a rounded chip does not read as interactive on its own. The ring
  on focus and the pressed state give it away; without them the only clue is
  the cursor, which is invisible on touch.
*/
.sf-conn:focus-visible {
  outline: 2px solid #f5a425;
  outline-offset: 2px;
}

.sf-conn[aria-pressed="true"] {
  background-color: rgba(245, 164, 37, 0.2);
  box-shadow: inset 0 0 0 1px rgba(245, 164, 37, 0.55);
}

.sf-conn[aria-pressed="true"] .sf-conn-label::after {
  content: " \00b7 tap to restore";
}

.sf-conn .sf-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #4cd07d;
  box-shadow: 0 0 0 3px rgba(76, 208, 125, 0.25);
  flex: 0 0 auto;
}

.sf-conn[data-state="offline"] .sf-dot {
  background-color: #f5a425;
  box-shadow: 0 0 0 3px rgba(245, 164, 37, 0.25);
}

.sf-conn[data-state="syncing"] .sf-dot {
  background-color: #7fb2ff;
  box-shadow: 0 0 0 3px rgba(127, 178, 255, 0.25);
  animation: sf-pulse 1.1s ease-in-out infinite;
}

.sf-conn[data-state="pending"] .sf-dot {
  background-color: #f5a425;
  box-shadow: 0 0 0 3px rgba(245, 164, 37, 0.25);
}

/* The interface is up but nothing answered - a different problem from having
   no network at all, so it gets the template's red rather than the amber used
   for "offline". Amber still means "carry on, this is expected"; red means
   "the thing you are syncing to is not there". */
.sf-conn[data-state="unreachable"] .sf-dot {
  background-color: #a12c2f;
  box-shadow: 0 0 0 3px rgba(161, 44, 47, 0.28);
}

/* A probe is in flight. Deliberately neutral: this is a transient state and
   colouring it like a failure would make every page load flash red. */
.sf-conn[data-state="checking"] .sf-dot {
  background-color: #9aa5ab;
  box-shadow: 0 0 0 3px rgba(154, 165, 171, 0.25);
  animation: sf-pulse 1.1s ease-in-out infinite;
}

.sf-conn .sf-conn-label {
  color: #fff;
}

@keyframes sf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* 
------------------------------------------------
04. module cards
------------------------------------------------
*/

.sf-module-item .meeting-item {
  height: 100%;
  margin-bottom: 0;
}

.sf-module-item .meeting-item .thumb .price span {
  background-color: #1f272b;
  color: #fff;
  font-size: 13px;
  letter-spacing: 1px;
}

.sf-module-item .meeting-item .down-content h4 {
  margin-bottom: 12px;
}

.sf-module-item .meeting-item .down-content .sf-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a12c2f;
  background-color: rgba(161, 44, 47, 0.08);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

.sf-module-item .meeting-item .down-content p {
  margin-left: 0;
  margin-bottom: 0;
  min-height: 44px;
}

.sf-module-item .meeting-item .down-content .sf-card-action {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a12c2f;
}

.sf-module-item .meeting-item .down-content .sf-card-action:hover {
  color: #f5a425;
}

.sf-module-item .meeting-item .down-content .sf-card-action i {
  margin-right: 6px;
  font-size: 11px;
}

/* Module list filter hint */
section.meetings-page .filters .sf-filter-note {
  display: block;
  font-size: 13px;
  color: #fff;
  opacity: .75;
  margin-top: 18px;
  text-transform: none;
  letter-spacing: 0;
}

section.meetings-page .sf-module-count {
  display: block;
  text-align: center;
  color: #fff;
  opacity: .8;
  font-size: 14px;
  margin-top: 30px;
}

/* Sidebar category list on the home page */
section.upcoming-meetings .categories ul li.sf-side-group {
  margin-bottom: 22px;
}

section.upcoming-meetings .categories ul li.sf-side-group > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1f272b;
  margin-bottom: 8px;
}

section.upcoming-meetings .categories ul li.sf-side-group ul li a {
  font-size: 14px;
  color: #7a7a7a;
}

section.upcoming-meetings .categories ul li.sf-side-group ul li a:hover {
  color: #a12c2f;
}

/* 
------------------------------------------------
05. offline-first section
------------------------------------------------
*/

section.sf-offline {
  background-color: #f7f7f7;
  padding: 110px 0px 100px 0px;
  position: relative;
}

section.sf-offline .section-heading {
  text-align: center;
}

section.sf-offline .section-heading h2 {
  color: #1f272b;
  border-bottom: 1px solid #e4e4e4;
  display: inline-block;
  margin-bottom: 45px;
}

.sf-flow {
  counter-reset: sf-step;
  margin: 30px 0px 28px 0px;
}

.sf-flow li {
  position: relative;
  counter-increment: sf-step;
  padding: 0px 0px 22px 46px;
  font-size: 14px;
  color: #5c5c5c;
  line-height: 24px;
}

.sf-flow li:before {
  content: counter(sf-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #1f272b;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 28px;
}

.sf-flow li:not(:last-child):after {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 4px;
  width: 2px;
  background-color: #e4e4e4;
}

.sf-flow li strong {
  color: #1f272b;
  font-weight: 600;
}

.sf-checklist {
  margin: 24px 0px 0px 0px;
}

.sf-checklist li {
  position: relative;
  font-size: 14px;
  color: #5c5c5c;
  line-height: 24px;
  padding-left: 30px;
  margin-bottom: 10px;
}

.sf-checklist li i {
  color: #1f7a4d;
  font-size: 14px;
  position: absolute;
  left: 0;
  top: 1px;
}

/* Offline capability chips */
.sf-chips {
  margin-top: 28px;
}

.sf-chips li {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #1f272b;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  padding: 7px 16px;
  margin: 0px 6px 8px 0px;
}

.sf-chips li i {
  color: #f5a425;
  margin-right: 6px;
}

/* 
------------------------------------------------
06. sync demo widget
------------------------------------------------
*/

.sf-demo {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(31, 39, 43, 0.09);
  overflow: hidden;
}

.sf-demo-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 26px;
  border-bottom: 1px solid #eee;
  background-color: #1f272b;
}

.sf-demo-head .sf-demo-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-right: auto;
}

.sf-demo-head .sf-demo-sub {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 3px;
}

.sf-demo-body {
  padding: 24px 26px 28px 26px;
}

/* Status pill */
.sf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background-color: #1f7a4d;
  border-radius: 20px;
  padding: 6px 14px;
}

.sf-pill .sf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  flex: 0 0 auto;
}

.sf-pill[data-state="pending"] { background-color: #f5a425; color: #1f272b; }
.sf-pill[data-state="offline"] { background-color: #a12c2f; }
.sf-pill[data-state="syncing"] { background-color: #2b6cb0; }

/* The server did not answer, as opposed to there being no network. Amber rather
   than the offline red: the device is fine and the work is safe, but something
   needs looking at. */
.sf-pill[data-state="unreachable"] { background-color: #f5a425; color: #1f272b; }

/* A reachability probe is in flight. */
.sf-pill[data-state="checking"] { background-color: #6b767c; color: #fff; }

.sf-pill[data-state="syncing"] .sf-dot {
  animation: sf-pulse 1s ease-in-out infinite;
}

.sf-pill[data-state="checking"] .sf-dot {
  animation: sf-pulse 1s ease-in-out infinite;
}

/* Simulated connectivity switch */
.sf-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.sf-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sf-switch .sf-track {
  position: relative;
  width: 42px;
  height: 22px;
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.25);
  transition: background .25s;
  flex: 0 0 auto;
}

.sf-switch .sf-track:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform .25s;
}

.sf-switch input:checked + .sf-track {
  background-color: #f5a425;
}

.sf-switch input:checked + .sf-track:after {
  transform: translateX(20px);
}

.sf-switch input:focus-visible + .sf-track {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Stat boxes */
.sf-demo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.sf-stat {
  background-color: #f7f7f7;
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}

.sf-stat .sf-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #1f272b;
  line-height: 1.3;
}

.sf-stat .sf-stat-value.is-pending { color: #a12c2f; }
.sf-stat .sf-stat-value.is-ok { color: #1f7a4d; }

.sf-stat .sf-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #7a7a7a;
  margin-top: 4px;
}

/* Progress bar */
.sf-progress {
  height: 6px;
  background-color: #eee;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 18px;
}

.sf-progress .sf-progress-bar {
  height: 100%;
  width: 0;
  background-color: #1f7a4d;
  border-radius: 6px;
  transition: width .3s ease;
}

.sf-progress .sf-progress-bar.is-active {
  background-color: #f5a425;
}

/* Action buttons */
.sf-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
}

.sf-demo-actions .sf-btn,
.sf-demo-actions .sf-btn-ghost {
  padding: 9px 16px;
  font-size: 11px;
  letter-spacing: .5px;
}

/* Activity log */
.sf-log {
  margin-top: 18px;
  max-height: 132px;
  overflow-y: auto;
  background-color: #1f272b;
  border-radius: 12px;
  padding: 12px 14px;
}

.sf-log p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 4px;
  font-family: 'Courier New', monospace;
}

.sf-log p:last-child {
  margin-bottom: 0;
}

.sf-log p .sf-log-time {
  color: rgba(255, 255, 255, 0.4);
  margin-right: 8px;
}

.sf-log p.is-ok .sf-log-text { color: #6fe0a0; }
.sf-log p.is-warn .sf-log-text { color: #f5c76a; }
.sf-log p.is-error .sf-log-text { color: #f08b8b; }

/* Outbox table */
.sf-table-wrap {
  margin-top: 20px;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 12px;
}

.sf-table {
  width: 100%;
  border-collapse: collapse;
}

.sf-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #7a7a7a;
  text-align: left;
  padding: 10px 12px;
  background-color: #f7f7f7;
  position: sticky;
  top: 0;
}

.sf-table td {
  font-size: 12px;
  color: #2a2a2a;
  padding: 10px 12px;
  border-top: 1px solid #f0f0f0;
  line-height: 18px;
  vertical-align: top;
}

.sf-table td.sf-when {
  color: #7a7a7a;
  white-space: nowrap;
  font-size: 11px;
}

.sf-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.sf-badge.is-queued {
  color: #8a5a00;
  background-color: rgba(245, 164, 37, 0.18);
}

.sf-badge.is-conflict {
  color: #a12c2f;
  background-color: rgba(161, 44, 47, 0.1);
}

.sf-badge.is-resolved {
  color: #1f7a4d;
  background-color: rgba(31, 122, 77, 0.12);
}

.sf-table .sf-resolve {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #a12c2f;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

.sf-table .sf-resolve:hover {
  color: #f5a425;
}

.sf-table-empty {
  padding: 22px 12px;
  text-align: center;
  color: #7a7a7a;
  font-size: 13px;
  line-height: 21px;
}

.sf-demo-foot {
  margin-top: 16px;
  font-size: 12px;
  color: #7a7a7a;
  line-height: 20px;
}

.sf-demo-foot code {
  background-color: #f7f7f7;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: #a12c2f;
}

/* Live conflict tally, placed between the stats grid and the log. */
.sf-demo-conflicts {
  margin: 0 0 16px 0;
  padding: 9px 14px;
  border-radius: 10px;
  background-color: #eef7ee;
  border: 1px solid #cfe3cf;
  color: #2f6b3a;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.sf-demo-conflicts.is-open {
  background-color: #fdf3e3;
  border-color: #f0d9ae;
  color: #8a5a10;
}

/* 
------------------------------------------------
07. pricing plans
------------------------------------------------
*/

section.our-courses .item.sf-plan .down-content {
  border-radius: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

section.our-courses .item.sf-plan .down-content h4 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 25px 25px 0px 25px;
}

section.our-courses .item.sf-plan.is-featured .down-content h4 {
  color: #a12c2f;
}

section.our-courses .item.sf-plan .down-content .sf-plan-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1f272b;
  background-color: #f5a425;
  border-radius: 20px;
  padding: 4px 12px;
  margin: 12px 0px 0px 25px;
}

section.our-courses .item.sf-plan .down-content .info {
  padding: 20px 25px 25px 25px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

section.our-courses .item.sf-plan .down-content .info .sf-plan-price {
  display: block;
  color: #1f272b;
  font-size: 24px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 2px;
}

section.our-courses .item.sf-plan .down-content .info .sf-plan-cycle {
  display: block;
  font-size: 12px;
  color: #7a7a7a;
  margin-bottom: 16px;
}

section.our-courses .item.sf-plan .down-content .info ul.sf-plan-features {
  margin-bottom: 20px;
  flex: 1 1 auto;
}

section.our-courses .item.sf-plan .down-content .info ul.sf-plan-features li {
  font-size: 13px;
  color: #2a2a2a;
  line-height: 22px;
  padding-left: 24px;
  position: relative;
  margin-bottom: 7px;
}

section.our-courses .item.sf-plan .down-content .info ul.sf-plan-features li i {
  position: absolute;
  left: 0;
  top: 1px;
  color: #1f7a4d;
  font-size: 12px;
}

section.our-courses .item.sf-plan .down-content .info ul.sf-plan-features li.is-off {
  color: #9a9a9a;
}

section.our-courses .item.sf-plan .down-content .info ul.sf-plan-features li.is-off i {
  color: #c9c9c9;
}

section.our-courses .item.sf-plan .down-content .info .sf-btn {
  width: 100%;
  text-align: center;
}

section.our-courses .sf-pricing-note {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 24px;
  margin-top: 34px;
}

section.our-courses .sf-pricing-note strong {
  color: #f5a425;
}

/* 
------------------------------------------------
08. stats & notes
------------------------------------------------
*/

section.our-facts .sf-facts-note {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  margin-top: 22px;
  margin-bottom: 0;
}

.sf-note-strip {
  background-color: rgba(250, 250, 250, 0.15);
  border-radius: 20px;
  padding: 22px 26px;
  margin-top: 20px;
  color: #fff;
  font-size: 13px;
  line-height: 22px;
}

.sf-note-strip strong {
  color: #f5a425;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  margin-bottom: 6px;
}

/* 
------------------------------------------------
09. footer
------------------------------------------------
*/

.footer {
  margin-top: 0;
}

.footer .sf-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
}

.footer .sf-footer-brand {
  text-align: left;
  max-width: 420px;
}

.footer .sf-footer-brand .sf-logo-plate {
  width: 140px;
  padding: 10px;
  border-radius: 14px;
}

.footer .sf-footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  text-transform: none;
  font-size: 13px;
  line-height: 22px;
  margin-top: 10px;
}

.footer .sf-footer-links {
  text-align: left;
}

.footer .sf-footer-links h6 {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.footer .sf-footer-links ul li {
  margin-bottom: 7px;
}

.footer .sf-footer-links ul li a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  transition: all .3s;
}

.footer .sf-footer-links ul li a:hover {
  color: #f5a425;
}

/* Inline footer used on the inner pages */
.sf-footer-inline {
  background-color: #1f272b;
  padding: 26px 0px;
}

.sf-footer-inline p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 0;
}

.sf-footer-inline p a {
  color: #f5a425;
}

/* 
------------------------------------------------
10. contact form + module detail
------------------------------------------------

The base template reaches its contact form with `section.contact-us #contact`.
That only matched because the original markup put id="contact" on the section
*and* on the form. The section keeps id="contact" for the nav anchors and the
form now carries its own id, so the template's rules are re-pointed here
rather than left dangling.
*/
section.contact-us #contact-form {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us #contact-form input {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
}

section.contact-us #contact-form input:focus {
  box-shadow: 0 0 0 2px #f5a425;
  color: #1f272b;
}

section.contact-us #contact-form textarea {
  width: 100%;
  min-height: 140px;
  max-height: 180px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 15px;
  margin-bottom: 30px;
}

section.contact-us #contact-form textarea:focus {
  box-shadow: 0 0 0 2px #f5a425;
  color: #1f272b;
}

section.contact-us #contact-form button {
  font-size: 13px;
  color: #fff;
  background-color: #a12c2f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
  cursor: pointer;
}

section.contact-us #contact-form button:hover {
  opacity: 0.9;
}

/* The number spinner overlaps the placeholder in a 40px pill field. */
section.contact-us #contact-form input[type="number"] {
  -moz-appearance: textfield;
}

section.contact-us #contact-form input[type="number"]::-webkit-outer-spin-button,
section.contact-us #contact-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* The template styles .meeting-single-item's headings and copy, but leaves the
   hours / location / book blocks as unstyled stacked text. */
.meeting-single-item .hours,
.meeting-single-item .location,
.meeting-single-item .book {
  background-color: #f7f7f7;
  border-radius: 14px;
  padding: 24px 22px;
  height: 100%;
}

.meeting-single-item .hours h5,
.meeting-single-item .location h5,
.meeting-single-item .book h5 {
  color: #a12c2f;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}

.meeting-single-item .hours p,
.meeting-single-item .location p,
.meeting-single-item .book p {
  color: #4a4a4a;
  font-size: 13px;
  line-height: 26px;
  margin: 0;
}

.meeting-single-item .share {
  margin-top: 10px;
}

@media (max-width: 991px) {
  section.contact-us #contact-form {
    padding: 30px 22px;
  }

  .meeting-single-item .hours,
  .meeting-single-item .location,
  .meeting-single-item .book {
    margin-bottom: 20px;
  }
}

/* 
------------------------------------------------
11. PWA / offline
------------------------------------------------
*/

.sf-offline-page {
  background-color: #1f272b;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 40px 0px;
}

.sf-offline-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 50px 45px;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.sf-offline-card .sf-logo-plate {
  width: 170px;
  margin-bottom: 26px;
}

.sf-offline-card h1 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1f272b;
  margin-bottom: 18px;
}

.sf-offline-card p {
  font-size: 14px;
  margin-bottom: 14px;
}

.sf-offline-card .sf-btn {
  margin-top: 16px;
}

.sf-offline-card .sf-offline-steps {
  text-align: left;
  margin: 26px 0px 0px 0px;
  padding: 22px 24px;
  background-color: #f7f7f7;
  border-radius: 14px;
}

.sf-offline-card .sf-offline-steps h6 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1f272b;
  margin-bottom: 12px;
}

.sf-offline-card .sf-offline-steps ul li {
  font-size: 13px;
  color: #5c5c5c;
  line-height: 22px;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.sf-offline-card .sf-offline-steps ul li:before {
  content: "\f111";
  font-family: FontAwesome;
  font-size: 8px;
  color: #f5a425;
  position: absolute;
  left: 2px;
  top: 5px;
}

/* Storage / environment notice inside the demo */
.sf-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: rgba(245, 164, 37, 0.12);
  border-left: 3px solid #f5a425;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

.sf-notice i {
  color: #8a5a00;
  font-size: 14px;
  margin-top: 3px;
}

.sf-notice p {
  font-size: 12px;
  line-height: 19px;
  color: #6b4d00;
  margin-bottom: 0;
}

.sf-notice p strong {
  color: #1f272b;
  font-weight: 600;
}

/* The supporting half of a notice: the values you have to compare, or the
   reason behind the headline. Muted and monospaced so it reads as reference
   material rather than as more of the same message. */
.sf-notice-detail {
  margin-top: 8px !important;
  color: #5a4a2e !important;
}

.sf-notice-detail code {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  background-color: rgba(31, 39, 43, 0.07);
  color: #1f272b;
  word-break: break-all;
}

/* Notice severity. The base .sf-notice is the amber "pending" look, so these
   only need to override colour - the layout is shared. */
.sf-notice.is-ok {
  background-color: rgba(76, 208, 125, 0.12);
  border-left-color: #2f9e5e;
}

.sf-notice.is-ok i,
.sf-notice.is-ok p {
  color: #1f6b40;
}

.sf-notice.is-ok p strong {
  color: #14532d;
}

.sf-notice.is-warn {
  background-color: rgba(161, 44, 47, 0.08);
  border-left-color: #a12c2f;
}

.sf-notice.is-warn i,
.sf-notice.is-warn p {
  color: #7d2225;
}

.sf-notice.is-warn p strong {
  color: #5c191b;
}

.sf-notice a.sf-link {
  color: inherit;
  text-decoration: underline;
}

/* 
------------------------------------------------
free-trial panel
------------------------------------------------
*/

.sf-trial-lead {
  font-size: 14px;
  line-height: 23px;
  color: #5b6469;
  margin-bottom: 22px;
  max-width: 640px;
}

.sf-trial-host {
  margin: 0 0 20px;
}

.sf-trial-host a {
  font-size: 20px;
  font-weight: 600;
  color: #a12c2f;
  word-break: break-all;
  text-decoration: none;
  border-bottom: 2px solid rgba(161, 44, 47, 0.25);
  padding-bottom: 2px;
  transition: border-color .3s;
}

.sf-trial-host a:hover {
  color: #a12c2f;
  border-bottom-color: #a12c2f;
}

.sf-trial-alt {
  font-size: 12px;
  color: #7d868b;
  margin: 4px 0 0;
}

.sf-trial-alt a {
  color: #a12c2f;
  text-decoration: underline;
}

.sf-trial-alt a:hover {
  color: #7d2225;
}

.sf-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8b9499;
  margin-bottom: 7px;
}

/* The address field: a slug input with the domain appended, so it is obvious
   that the school is getting a real address and not just a name. */
.sf-slug-field {
  display: flex;
  align-items: stretch;
  border: 1px solid #e3e6e8;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
}

.sf-slug-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 15px 15px;
  font-size: 13px;
  color: #1f272b;
  text-transform: lowercase;
}

.sf-slug-field input:focus {
  outline: 0;
}

.sf-slug-field:focus-within {
  border-color: #a12c2f;
}

.sf-slug-suffix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 13px;
  background-color: #f4f5f6;
  border-left: 1px solid #e3e6e8;
  font-size: 12px;
  color: #7d868b;
  white-space: nowrap;
}

.sf-slug-status {
  margin-top: 9px;
  font-size: 12px;
  line-height: 18px;
}

.sf-slug-status.sf-notice {
  display: flex;
  padding: 8px 11px;
  margin-bottom: 0;
  border-radius: 6px;
}

.sf-slug-status.sf-notice i {
  font-size: 12px;
  margin-top: 2px;
}

/* Alternative subdomains offered when the derived one is taken. */
.sf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.sf-chip {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid #d9dcde;
  border-radius: 14px;
  background-color: #fff;
  color: #3d4549;
  cursor: pointer;
  transition: all .2s;
}

.sf-chip:hover {
  border-color: #a12c2f;
  color: #a12c2f;
  background-color: rgba(161, 44, 47, 0.04);
}

.sf-chip:focus-visible {
  outline: 2px solid #a12c2f;
  outline-offset: 2px;
}

/* A clickable chip offers an alternative address. A non-clickable one is
   showing which schools an email already belongs to, and a button there would
   promise an action it does not have - so it is a span, styled the same. */
.sf-chip.is-static {
  display: inline-block;
  cursor: default;
  background-color: #f0f1f2;
  color: #4a5257;
  word-break: break-all;
}

.sf-chip.is-static:hover {
  border-color: #d9dcde;
  color: #4a5257;
  background-color: #f0f1f2;
}

@media (max-width: 767px) {
  .sf-slug-field {
    flex-direction: column;
  }

  .sf-slug-suffix {
    border-left: 0;
    border-top: 1px solid #e3e6e8;
    padding: 7px 13px;
  }
}

/* Toast used by the demo */
.sf-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background-color: #1f272b;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 22px;
  padding: 12px 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  z-index: 1200;
  max-width: 90%;
  text-align: center;
}

.sf-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sf-toast.is-warn {
  background-color: #8a5a00;
}

.sf-toast.is-error {
  background-color: #a12c2f;
}

/* 
------------------------------------------------
11. responsive
------------------------------------------------
*/

@media (max-width: 991px) {
  section.sf-offline {
    padding: 80px 0px;
  }

  .sf-demo {
    margin-top: 36px;
  }

  .sf-demo-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .sf-demo-body {
    padding: 20px 18px 24px 18px;
  }

  .sf-demo-head {
    padding: 16px 18px;
  }

  .sf-demo-head .sf-demo-title {
    font-size: 12px;
  }

  .sf-demo-actions .sf-btn,
  .sf-demo-actions .sf-btn-ghost {
    flex: 1 1 100%;
  }

  .sf-offline-card {
    padding: 36px 24px;
  }

  .sf-offline-card h1 {
    font-size: 22px;
  }

  .footer .sf-footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer .sf-footer-brand,
  .footer .sf-footer-links {
    text-align: center;
  }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {

  .sf-conn .sf-dot,
  .sf-pill .sf-dot {
    animation: none !important;
  }

  .sf-progress .sf-progress-bar,
  .sf-toast {
    transition: none !important;
  }

  .sf-pw-seg {
    transition: none !important;
  }
}

/* ==========================================================================
   Sign in and register pages
   --------------------------------------------------------------------------
   A calmer layout than the marketing pages: a quiet bar instead of the sticky
   header, one card of form beside one panel of reasons. The full navigation is
   a distraction at the point somebody decides whether to trust you with their
   school's data.

   The form card is white on the page's warm grey, so it reads as a distinct
   surface. The panel beside it is charcoal, matching the footer, and carries
   the live address preview - the argument the page is making.
   ========================================================================== */

body.sf-auth {
  background-color: #f5f6f7;
}

/* --- the quiet header --- */

.sf-authbar {
  background-color: #fff;
  border-bottom: 1px solid #e6e8ea;
  padding: 18px 0;
}

.sf-authbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sf-authbar .logo {
  margin: 0;
  flex: 0 0 auto;
}

.sf-authbar-note {
  font-size: 12px;
  color: #7d868b;
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
}

.sf-authbar-note i {
  color: #2f9e5e;
  margin-right: 4px;
}

.sf-authbar .sf-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- the shell --- */

.sf-auth-main {
  padding: 56px 0 72px;
}

.sf-auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* The form sits left, the panel right on desktop; the DOM order above already
   matches reading order, so nothing flips for a screen reader. */
.sf-auth-row > .col-lg-7,
.sf-auth-row > .col-lg-6 {
  display: flex;
}

.sf-card {
  background-color: #fff;
  border: 1px solid #e6e8ea;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(31, 39, 43, 0.03), 0 12px 32px rgba(31, 39, 43, 0.06);
  padding: 40px;
  width: 100%;
}

.sf-card-narrow {
  max-width: 520px;
}

.sf-card-head {
  margin-bottom: 28px;
}

.sf-card-head h1 {
  font-size: 28px;
  font-weight: 600;
  color: #1f272b;
  line-height: 1.25;
  margin: 0 0 10px;
}

.sf-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #a12c2f;
  margin: 0 0 8px;
}

.sf-lede {
  font-size: 14px;
  line-height: 23px;
  color: #6b7479;
  margin: 0;
  max-width: 46ch;
}

/* --- numbered field groups --- */

.sf-fs {
  border: 0;
  padding: 0;
  margin: 0 0 30px;
}

.sf-fs-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8b9499;
  margin-bottom: 18px;
  padding: 0;
  width: 100%;
}

.sf-fs-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(161, 44, 47, 0.1);
  color: #a12c2f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  flex: 0 0 auto;
}

/* --- fields --- */

.sf-field {
  margin-bottom: 20px;
}

.sf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.sf-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #3d4549;
  margin-bottom: 7px;
}

.sf-req {
  color: #a12c2f;
}

/* .sf-hint is inline within a label; .sf-hint-text is a block beneath a
   control. Both existed before this block for the home page panel, so they are
   only tuned here rather than redefined. */
.sf-hint {
  font-weight: 400;
  color: #98a1a6;
  font-size: 11px;
}

.sf-hint-text {
  font-size: 11px;
  line-height: 17px;
  color: #98a1a6;
  margin: 6px 0 0;
}

.sf-card input[type="text"],
.sf-card input[type="email"],
.sf-card input[type="tel"],
.sf-card input[type="password"] {
  width: 100%;
  border: 1px solid #dfe2e4;
  border-radius: 6px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 14px;
  color: #1f272b;
  background-color: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.sf-card input::placeholder {
  color: #b4bbbf;
}

.sf-card input:focus {
  outline: 0;
  border-color: #a12c2f;
  box-shadow: 0 0 0 3px rgba(161, 44, 47, 0.1);
}

/* The base stylesheet forces a global a { color: #3CF } and its own input rules;
   the specificity here is what makes these fields look right without touching
   templatemo-edu-meeting.css. */
.sf-card .sf-slug-field input,
.sf-card .sf-pw input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.sf-card .sf-slug-field input:focus,
.sf-card .sf-pw input:focus {
  box-shadow: none;
}

/* Field-level errors. Announced through aria-describedby rather than by colour
   alone, and the border thickens as well as reddens so it is not the only cue. */
.sf-field-error {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: #a12c2f;
  margin: 7px 0 0;
  font-weight: 500;
}

.sf-field.has-error input,
.sf-field.has-error .sf-slug-field,
.sf-field.has-error .sf-pw {
  border-color: #a12c2f;
  box-shadow: 0 0 0 3px rgba(161, 44, 47, 0.09);
}

.sf-field.has-error input:focus {
  border-color: #a12c2f;
}

/* --- password with reveal toggle and strength meter --- */

.sf-pw {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid #dfe2e4;
  border-radius: 6px;
  background-color: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.sf-pw:focus-within {
  border-color: #a12c2f;
  box-shadow: 0 0 0 3px rgba(161, 44, 47, 0.1);
}

.sf-pw-toggle {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #98a1a6;
  padding: 0 14px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.sf-pw-toggle:hover {
  color: #a12c2f;
}

.sf-pw-toggle:focus-visible {
  outline: 2px solid #a12c2f;
  outline-offset: -2px;
  color: #a12c2f;
}

.sf-pw-meter {
  display: flex;
  gap: 4px;
  margin-top: 9px;
}

.sf-pw-seg {
  height: 3px;
  flex: 1 1 0;
  border-radius: 2px;
  background-color: #e3e6e8;
  transition: background-color .25s;
}

.sf-pw-meter[data-score="1"] .sf-pw-seg.is-on { background-color: #c0392b; }
.sf-pw-meter[data-score="2"] .sf-pw-seg.is-on { background-color: #f5a425; }
.sf-pw-meter[data-score="3"] .sf-pw-seg.is-on { background-color: #7aa53c; }
.sf-pw-meter[data-score="4"] .sf-pw-seg.is-on { background-color: #2f9e5e; }

/* --- checkbox --- */

.sf-field-check {
  margin-top: 26px;
}

.sf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 19px;
  color: #6b7479;
  cursor: pointer;
  margin: 0;
}

.sf-check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: #a12c2f;
  cursor: pointer;
}

.sf-check input:focus-visible {
  outline: 2px solid #a12c2f;
  outline-offset: 2px;
}

/* --- submit and status --- */

.sf-btn-block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 6px;
}

.sf-status {
  margin: 0 0 18px;
}

.sf-alt {
  font-size: 12px;
  color: #7d868b;
  text-align: center;
  margin: 16px 0 0;
}

.sf-alt a {
  color: #a12c2f;
  font-weight: 500;
  text-decoration: underline;
}

.sf-alt a:hover {
  color: #7d2225;
}

.sf-help {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 26px;
  padding: 13px 15px;
  background-color: #f4f5f6;
  border-radius: 8px;
  font-size: 12px;
  line-height: 19px;
  color: #6b7479;
}

.sf-help i {
  color: #a12c2f;
  margin-top: 2px;
}

.sf-help a {
  color: #a12c2f;
  font-weight: 500;
}

/* --- success state --- */

.sf-success {
  text-align: center;
}

.sf-success:focus {
  outline: 0;
}

.sf-success-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: rgba(47, 158, 94, 0.12);
  color: #2f9e5e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.sf-success h2 {
  font-size: 23px;
  font-weight: 600;
  color: #1f272b;
  margin: 0 0 10px;
}

.sf-success-lead {
  font-size: 14px;
  line-height: 23px;
  color: #6b7479;
  margin: 0 auto 22px;
  max-width: 44ch;
}

.sf-addr {
  font-size: 17px;
  font-weight: 600;
  color: #a12c2f;
  background-color: rgba(161, 44, 47, 0.06);
  border: 1px dashed rgba(161, 44, 47, 0.35);
  border-radius: 8px;
  padding: 15px;
  margin: 0 0 20px;
  word-break: break-all;
  line-height: 1.4;
}

.sf-success-state {
  font-size: 13px;
  color: #6b7479;
  margin: 0 0 20px;
}

.sf-success-state i {
  color: #2f9e5e;
  margin-right: 4px;
}

/* --- the value panel --- */

.sf-aside {
  background-color: #1f272b;
  background-image: linear-gradient(160deg, #262f34 0%, #1f272b 55%, #2a1f21 100%);
  color: #fff;
  border-radius: 12px;
  padding: 40px 36px;
  width: 100%;
  position: sticky;
  top: 30px;
}

.sf-aside-title {
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  margin: 0 0 12px;
}

.sf-aside-lead {
  font-size: 13px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 26px;
}

.sf-aside-foot {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sf-aside-foot a {
  color: #f5a425;
  font-weight: 500;
  text-decoration: underline;
}

.sf-aside-foot a:hover {
  color: #ffc163;
}

/* The live address. This is the whole argument of the page, so it is the one
   element that changes as the visitor types. */
.sf-addr-preview {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 20px;
  margin: 0 0 28px;
}

.sf-addr-preview-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 9px;
}

.sf-addr-preview-value {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-all;
}

.sf-addr-slug {
  color: #f5a425;
}

.sf-addr-domain {
  color: rgba(255, 255, 255, 0.62);
}

/* Long school names must not blow the panel out. */
.sf-addr-slug,
.sf-addr-domain {
  overflow-wrap: anywhere;
  word-break: normal;
}

.sf-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
}

.sf-ticks li:last-child {
  margin-bottom: 0;
}

.sf-ticks i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(47, 158, 94, 0.2);
  color: #56c98a;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.sf-ticks strong {
  color: #fff;
  font-weight: 600;
}

.sf-authfoot {
  padding: 24px 0;
  border-top: 1px solid #e6e8ea;
}

.sf-authfoot p {
  font-size: 12px;
  color: #98a1a6;
  margin: 0;
  text-align: center;
  line-height: 20px;
}

.sf-authfoot a {
  color: #7d2225;
  text-decoration: underline;
}

.sf-authfoot a:hover {
  color: #a12c2f;
}

@media (max-width: 991px) {

  .sf-aside {
    position: static;
    margin-top: 30px;
  }

  .sf-card {
    padding: 30px 26px;
  }
}

@media (max-width: 767px) {

  .sf-auth-main {
    padding: 32px 0 48px;
  }

  .sf-grid-2 {
    grid-template-columns: 1fr;
  }

  .sf-card {
    padding: 26px 20px;
  }

  .sf-card-head h1 {
    font-size: 23px;
  }

  .sf-aside {
    padding: 30px 24px;
  }

  /* The reassurance is the first thing to go on a narrow screen: it is nice to
     have, not something anybody needs to act on. */
  .sf-authbar-note {
    display: none;
  }
}

/* ==========================================================================
   Pricing page
   --------------------------------------------------------------------------
   Cards rather than a carousel. A carousel hides two of the three plans behind
   a control, which is the worst possible behaviour on a page whose entire job
   is comparing three plans.
   ========================================================================== */

.sf-pricing {
  padding: 60px 0 30px;
}

.sf-pricing .sf-plan {
  background-color: #fff;
  border: 1px solid #e6e8ea;
  border-radius: 12px;
  padding: 32px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sf-pricing .sf-plan.is-featured {
  border-color: #a12c2f;
  box-shadow: 0 10px 30px rgba(161, 44, 47, 0.1);
}

.sf-plan-head {
  margin-bottom: 22px;
}

.sf-plan-head h4 {
  font-size: 20px;
  font-weight: 600;
  color: #1f272b;
  margin: 0 0 6px;
}

.sf-plan-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  background-color: #a12c2f;
  border-radius: 12px;
  padding: 4px 11px;
  margin-bottom: 16px;
}

.sf-plan-tag.is-quiet {
  background-color: #6b7479;
}

.sf-plan-tag.is-amber {
  background-color: #f5a425;
  color: #4a3000;
}

.sf-pricing .sf-plan-price {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #1f272b;
  line-height: 1.1;
  margin-bottom: 6px;
}

.sf-pricing .sf-plan-cycle {
  display: block;
  font-size: 12px;
  color: #7d868b;
  line-height: 19px;
}

.sf-pricing .sf-plan-features {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  flex: 1 1 auto;
}

.sf-pricing .sf-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 21px;
  color: #4a5257;
  margin-bottom: 11px;
}

.sf-pricing .sf-plan-features li:last-child {
  margin-bottom: 0;
}

.sf-pricing .sf-plan-features i {
  color: #2f9e5e;
  font-size: 12px;
  margin-top: 4px;
  flex: 0 0 auto;
}

.sf-pricing .sf-plan-features .is-off {
  color: #a8b0b4;
}

.sf-pricing .sf-plan-features .is-off i {
  color: #c3c9cc;
}

/* --- comparison table --- */

.sf-faq {
  padding: 60px 0;
}

.sf-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e6e8ea;
  border-radius: 10px;
  background-color: #fff;
}

.sf-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.sf-table caption {
  text-align: left;
}

.sf-table th,
.sf-table td {
  padding: 14px 18px;
  text-align: left;
  font-size: 13px;
  line-height: 20px;
  border-bottom: 1px solid #eef0f1;
}

.sf-table thead th {
  background-color: #f5f6f7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b7479;
  white-space: nowrap;
}

.sf-table tbody th {
  font-weight: 500;
  color: #1f272b;
}

.sf-table tbody td {
  color: #4a5257;
}

.sf-table tbody tr:last-child th,
.sf-table tbody tr:last-child td {
  border-bottom: 0;
}

.sf-table td i {
  color: #2f9e5e;
}

/* The checkmark alone is not an accessible signal, so each one is paired with
   visually hidden text. */
.sf-sr,
.sf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- questions --- */

.sf-accordion-item {
  background-color: #fff;
  border: 1px solid #e6e8ea;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

.sf-accordion-item h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.sf-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 20px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #1f272b;
  cursor: pointer;
  transition: background-color .2s;
}

.sf-accordion-trigger:hover {
  background-color: #f7f8f9;
}

.sf-accordion-trigger:focus-visible {
  outline: 2px solid #a12c2f;
  outline-offset: -2px;
}

.sf-accordion-trigger i {
  flex: 0 0 auto;
  color: #a12c2f;
  font-size: 13px;
  transition: transform .25s;
}

.sf-accordion-trigger[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.sf-accordion-panel {
  padding: 0 22px 22px;
}

.sf-accordion-panel p {
  font-size: 13px;
  line-height: 22px;
  color: #6b7479;
  margin: 0;
  max-width: 68ch;
}

/* --- closing call to action --- */

.sf-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background-color: #1f272b;
  border-radius: 12px;
  padding: 32px 36px;
  margin-top: 50px;
}

.sf-cta-band h3 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
}

.sf-cta-band p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

.sf-cta-band .sf-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 767px) {

  .sf-pricing,
  .sf-faq {
    padding: 40px 0;
  }

  .sf-cta-band {
    padding: 26px 22px;
    text-align: center;
  }
}

/*
------------------------------------------------
12. loader
------------------------------------------------

  The opening animation. It is markup + CSS + a small inline script rather than
  something bolted onto shuleflow.js, for one reason: it has to be on screen
  before anything else loads. An external script is a network request, and a
  stylesheet in this file arrives after the first paint, so the page would
  flash unshaded and then jump. The markup sits as the first child of <body>
  on every page and the stylesheet is already render-blocking, so the loader
  is the first thing painted.

  Two deliberate differences from the animation as first supplied:

  1. Every rule is namespaced under .sf-loader. Unscoped, .logo would restyle
     the site header's own <a class="logo">, and .progress / .dots / .wave are
     far too generic to trust in a global stylesheet.
  2. Scroll lock is applied to <html> via a class that is removed on hide, not
     set on body unconditionally. body { overflow: hidden } in a global
     stylesheet would break scrolling on every page forever.

  The progress bar is driven by the inline script and nothing else. A CSS
  animation on the same property outranks an inline style, so if both ran the
  script would look broken while silently doing nothing.
*/
.sf-loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility .5s ease;
}

.sf-loader.is-done {
  opacity: 0;
  visibility: hidden;
}

/* Lock scrolling while the loader is up, then release it. */
.sf-loader-lock {
  overflow: hidden;
}

.sf-loader__inner {
  width: min(430px, 88vw);
  text-align: center;
  position: relative;
  animation: sfLoaderFloat 3s ease-in-out infinite;
}

.sf-loader__logo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}

.sf-loader__glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(227, 6, 19, .12) 0%, transparent 35%),
    radial-gradient(circle at 30% 70%, rgba(21, 148, 71, .12) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(17, 17, 17, .12) 0%, transparent 40%);
  filter: blur(25px);
  z-index: -1;
  animation: sfLoaderGlow 3s ease-in-out infinite;
}

/* Reuse the header's crop so the loader shows the same mark, tightly framed. */
.sf-loader__logo {
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .15));
  animation: sfLoaderLogoIn 1.2s ease forwards, sfLoaderLogoPulse 2.8s ease-in-out infinite;
}

.sf-loader__line {
  width: 260px;
  height: 5px;
  margin: 5px auto 20px;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.sf-loader__line span {
  flex: 1;
}

.sf-loader__line .k { background: #111; }
.sf-loader__line .r { background: #e30613; }
.sf-loader__line .w { background: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.sf-loader__line .g { background: #159447; }

.sf-loader__waves {
  width: 240px;
  height: 35px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.sf-loader__waves span {
  width: 8px;
  height: 6px;
  border-radius: 20px;
  animation: sfLoaderWave 1.2s ease-in-out infinite;
}

.sf-loader__waves span:nth-child(1) { background: #111; animation-delay: 0s; }
.sf-loader__waves span:nth-child(2) { background: #111; animation-delay: .1s; }
.sf-loader__waves span:nth-child(3) { background: #e30613; animation-delay: .2s; }
.sf-loader__waves span:nth-child(4) { background: #e30613; animation-delay: .3s; }
.sf-loader__waves span:nth-child(5) { background: #d8d8d8; border: 1px solid #bbb; animation-delay: .4s; }
.sf-loader__waves span:nth-child(6) { background: #159447; animation-delay: .5s; }
.sf-loader__waves span:nth-child(7) { background: #159447; animation-delay: .6s; }

.sf-loader__text {
  color: #111;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.sf-loader__text .r { color: #e30613; }
.sf-loader__text .g { color: #159447; }

.sf-loader__dots span {
  display: inline-block;
  font-size: 18px;
  animation: sfLoaderDots 1.4s infinite;
}

.sf-loader__dots span:nth-child(1) { color: #111; animation-delay: 0s; }
.sf-loader__dots span:nth-child(2) { color: #e30613; animation-delay: .2s; }
.sf-loader__dots span:nth-child(3) { color: #159447; animation-delay: .4s; }

.sf-loader__track {
  width: 260px;
  height: 3px;
  margin: 18px auto 0;
  background: #eee;
  overflow: hidden;
  border-radius: 20px;
}

.sf-loader__bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #111, #e30613, #fff, #159447);
}

@keyframes sfLoaderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes sfLoaderGlow {
  0% { transform: scale(.8); opacity: .3; }
  50% { transform: scale(1.15); opacity: .8; }
  100% { transform: scale(.8); opacity: .3; }
}

@keyframes sfLoaderLogoIn {
  from { opacity: 0; transform: scale(.65) rotate(-3deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes sfLoaderLogoPulse {
  0% { transform: scale(.98); }
  50% { transform: scale(1.015); }
  100% { transform: scale(.98); }
}

@keyframes sfLoaderWave {
  0%, 100% { height: 6px; transform: translateY(0); }
  50% { height: 30px; transform: translateY(-10px); }
}

@keyframes sfLoaderDots {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* A reader who has asked for less motion gets a still loader that still
   reports progress and still goes away - only the movement is removed. */
@media (prefers-reduced-motion: reduce) {
  .sf-loader__inner,
  .sf-loader__glow,
  .sf-loader__logo,
  .sf-loader__waves span,
  .sf-loader__dots span {
    animation: none;
  }

  .sf-loader__logo {
    opacity: 1;
  }

  .sf-loader__waves span:nth-child(n) {
    height: 18px;
  }
}

@media (max-width: 600px) {
  .sf-loader__inner { width: 88vw; }
  .sf-loader__logo { max-width: 220px; }
  .sf-loader__glow { width: 220px; height: 220px; }
  .sf-loader__line,
  .sf-loader__track,
  .sf-loader__waves { width: 200px; }
}