@import url('assets/css/fonts.css');

:root {
  --ink: #063882;
  --teal: #0d6efd;
  --lime: #e8f2ff;
  --cream: #fff;
  --muted: #687588
}

* {
  box-sizing: border-box
}

body {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  color: #063882
}

h1, h2, h3, .section h2, .page h1, .student-mood h2 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  letter-spacing: -1px
}

button, input, textarea, select {
  font-family: inherit
}

p {
  line-height: 1.8
}

.wrap {
  width: min(1200px, 90%);
  margin: auto
}

.section {
  max-width: 1320px;
  padding: 88px 60px
}

.section h2, h2 {
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -1.7px
}

.section h2 span {
  font-weight: 400;
  color: #3484d9
}

.eyebrow {
  color: #2573c9;
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: 1.9px
}

.center {
  text-align: center;
  margin-bottom: 40px
}

.button, button.primary {
  background: #0d6efd;
  border-radius: 5px;
  padding: 17px 24px;
  font-size: 13px;
  box-shadow: none
}

.button:hover {
  background: #063882;
  color: white;
  transform: translateY(-2px)
}

.button.small {
  padding: 13px 18px;
  font-size: 15px
}

.button.white {
  background: white;
  color: #063882
}

.button.lime {
  background: #0d6efd;
  color: white
}

.text-link {
  color: #0968cd;
  font-weight: 700;
  font-size: 13px;
  align-self: center
}

.lead {
  font-size: 15px;
  color: #687588
}

.ry-top {
  background: #063882;
  color: white;
  font-size: 14px;
  padding: 10px 0
}

.ry-top .wrap {
  display: flex;
  justify-content: space-between
}

header {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: white
}

.ry-nav {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px
}

.ry-brand {
  display: flex;
  gap: 15px;
  align-items: center
}

.ry-brand img {
  width: 160px
}

.ry-brand>span {
  font-size: 9px;
  letter-spacing: 1px;
  border-left: 1px solid #dbe4ed;
  padding-left: 14px;
  line-height: 1.9;
  color: #64748b
}

.ry-nav nav {
  display: flex;
  gap: 24px;
  font-size: 12px;
  order: initial;
  width: auto;
  padding: 0
}

.mobile-menu {
  display: none
}

.ry-hero {
  min-height: 640px;
  background: url('assets/img/bg/hero_bg.jpg') center/cover;
  position: relative;
  padding: 58px 0
}

.hero-copy {
  max-width: 550px
}

.hero-copy h1 {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -3px;
  margin: 23px 0
}

.hero-copy h1 span {
  color: #0d6efd;
  font-weight: 400
}

.hero-copy .intro {
  font-size: 14px;
  color: #52647d;
  max-width: 470px;
  margin: 24px 0
}

.hero-checks {
  list-style: none;
  padding: 0;
  font-size: 14px;
  color: #405673;
  line-height: 2.2
}

.hero-checks li:before {
  content: '✓';
  color: #0875e9;
  margin-right: 12px;
  font-weight: 800
}

.film-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  font-size: 15px;
  color: #063882;
  font-weight: 700;
  cursor: pointer
}

.little-play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #bfcede;
  border-radius: 50%;
  font-size: 10px
}

.hero-caption {
  position: absolute;
  right: 8%;
  bottom: 34px;
  font-size: 9px;
  letter-spacing: 1px;
  line-height: 2
}

.hero-caption strong {
  font-size: 20px;
  letter-spacing: -.5px
}

.welcome-strip {
  border-bottom: 1px solid #e6eef6;
  background: #fff
}

.welcome-strip .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  gap: 24px
}

.welcome-strip span {
  font-size: 9px;
  color: #71839b;
  line-height: 2
}

.welcome-strip strong {
  font-size: 14px;
  color: #063882
}

.welcome-strip b {
  font-size: 15px;
  letter-spacing: 1px
}

.welcome-strip small {
  display: block;
  font-size: 15px;
  color: #7e8a9a;
  margin-top: 8px
}

.welcome-strip a {
  font-size: 14px;
  font-weight: 700;
  color: #0d6efd
}

.two-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px
}

.path {
  display: flex;
  gap: 24px;
  border: 1px solid #e1eaf4;
  padding: 30px;
  border-radius: 8px;
  transition: .2s
}

.path:hover {
  border-color: #0d6efd;
  background: #f7fbff;
  transform: translateY(-3px)
}

.path-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  background: #eaf3ff;
  color: #0d6efd;
  font-size: 28px;
  border-radius: 50%
}

.path small {
  font-size: 9px;
  color: #6482a5;
  letter-spacing: 1.5px
}

.path h3 {
  font-size: 22px;
  letter-spacing: -.7px;
  margin: 12px 0
}

.path p {
  font-size: 12px;
  color: #718093
}

.path b {
  font-size: 12px;
  color: #0d6efd
}

.discover {
  padding-top: 35px
}

.titleline .lead {
  max-width: 370px;
  font-size: 13px
}

.destination-layout {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 50px;
  margin-top: 30px
}

.destination-photo {
  position: relative;
  min-height: 480px;
  border-radius: 8px;
  overflow: hidden
}

.destination-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.destination-photo span {
  position: absolute;
  bottom: 20px;
  left: 22px;
  color: white;
  background: #063882b8;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 12px
}

.state-list a {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid #e1e9f2
}

.state-list a:first-child {
  padding-top: 0
}

.state-list small {
  font-size: 9px;
  color: #7990ac;
  letter-spacing: 1.5px
}

.state-list h3 {
  font-size: 28px;
  margin: 10px 0 5px
}

.state-list h3 span {
  float: right;
  color: #1680e9;
  font-size: 24px
}

.state-list p {
  font-size: 12px;
  margin: 0 0 7px;
  color: #536c88
}

.state-list .state-detail {
  letter-spacing: 0;
  font-size: 14px;
  color: #718093
}

.destination-note {
  font-size: 10px;
  color: #7a8797;
  margin-top: 20px
}

.ry-film {
  height: 420px;
  position: relative;
  background: #063882;
  overflow: hidden;
  color: white
}

.ry-film>img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6
}

.ry-film:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #03295edb, transparent)
}

.ry-film .wrap {
  position: relative;
  z-index: 1;
  padding-top: 60px
}

.ry-film h2 {
  font-size: 45px;
  margin: 15px 0
}

.ry-film p {
  font-size: 13px
}

.ry-film .eyebrow {
  color: #c7e5ff
}

.everyday {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px
}

.everyday .button {
  margin-top: 20px
}

.moments>div {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #e4edf5;
  padding: 15px 0
}

.moments>div>span {
  font-size: 12px;
  color: #1781ed;
  padding-top: 8px
}

.moments h3 {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -.4px;
  margin: 0
}

.moments p {
  font-size: 12px;
  color: #748195;
  margin-top: 8px
}

.journey {
  background: #f3f8fe
}

.number {
  background: white;
  border: 1px solid #d9e9f8;
  color: #0d6efd;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 12px
}

.steps h3 {
  font-size: 17px
}

.steps p {
  font-size: 12px
}

.partner-callout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center
}

.partnership-flow {
  padding: 30px;
  background: #f4f8fc;
  border-radius: 8px
}

.partnership-flow span {
  display: flex;
  gap: 22px;
  padding: 20px 0;
  color: #3b83d4;
  font-size: 12px;
  border-bottom: 1px solid #dbe6f2
}

.partnership-flow span:last-child {
  border: 0
}

.partnership-flow b {
  color: #063882;
  font-size: 14px
}

.care-band {
  background: #063882;
  color: white;
  padding: 48px 0
}

.care-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px
}

.care-band h2 {
  font-size: 28px;
  letter-spacing: -1px;
  margin: 10px 0
}

.care-band p {
  font-size: 12px;
  color: #c4d9f2
}

.care-band .eyebrow {
  color: #8cc8ff
}

.ry-faq {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px
}

details {
  border-bottom: 1px solid #dde7f0;
  padding: 20px 0
}

summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7
}

details p {
  font-size: 12px;
  color: #6b7f95
}

footer {
  background: #f5f8fc;
  border-top: 1px solid #e6edf5;
  padding: 50px 0 0
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr;
  gap: 35px
}

.footer-grid p {
  font-size: 13px;
  color: #708095
}

.footer-grid small {
  font-size: 9px;
  color: #79899c
}

.footer-grid h3 {
  font-size: 13px;
  letter-spacing: 0
}

.footer-grid a {
  display: block;
  font-size: 14px;
  color: #6b7c92;
  margin: 16px 0
}

.footer-bottom {
  border-top: 1px solid #e1e8f0;
  margin-top: 35px;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #8190a2
}

.page {
  color: #063882
}

.card, .stat {
  border-color: #dce7f2
}

.card p {
  color: #687588
}

.sidebar, .callout {
  background: #eff6fe
}

.view-switch {
  background: #edf5ff;
  color: #0d6efd
}

.film {
  background: #063882
}

.tag {
  background: #e8f2ff;
  color: #1666b8
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #ffbc00;
  outline-offset: 5px
}

#video {
  max-width: min(1000px, 92vw)
}

#video video {
  width: 100%;
  max-height: 75vh
}

.destination:nth-child(1) {
  background: #eaf4ff
}

.destination:nth-child(2) {
  background: #f1f6fc
}

@media(max-width:1100px) {
  .ry-brand>span {
    display: none
  }

  .ry-nav nav {
    gap: 16px
  }

  .ry-hero {
    background-position: 57% center
  }

  .hero-copy {
    max-width: 480px
  }

  .hero-copy h1 {
    font-size: 57px
  }

  .section {
    padding: 65px 5%
  }

  .hero-caption {
    right: 4%
  }

  .welcome-strip .wrap {
    gap: 15px
  }

  .welcome-strip a {
    display: none
  }

  .partner-callout {
    gap: 40px
  }
}

@media(max-width:760px) {
  .ry-top .wrap span:last-child {
    display: none
  }

  .ry-nav {
    height: auto;
    min-height: 82px;
    flex-wrap: wrap;
    padding: 14px 0;
    gap: 12px
  }

  .ry-brand img {
    width: 125px
  }

  .mobile-menu {
    display: block;
    border: 0;
    background: #edf5ff;
    color: #063882;
    padding: 8px 12px;
    margin-left: auto
  }

  .ry-nav nav {
    display: none;
    order: 4;
    width: 100%;
    flex-wrap: wrap;
    padding: 12px 0;
    gap: 18px
  }

  .ry-nav.expanded nav {
    display: flex
  }

  .ry-nav .button {
    padding: 11px;
    font-size: 10px
  }

  .ry-hero {
    background-position: 62% center;
    padding: 40px 0;
    min-height: 570px
  }

  .ry-hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f0f4fbea 45%, #f0f4fb88)
  }

  .hero-copy {
    position: relative;
    max-width: 460px
  }

  .hero-copy h1 {
    font-size: 49px
  }

  .hero-copy .intro {
    font-size: 13px;
    max-width: 340px
  }

  .hero-copy .eyebrow {
    font-size: 9px !important
  }

  .hero-checks {
    font-size: 10px
  }

  .hero-caption {
    display: none
  }

  .welcome-strip .wrap {
    flex-wrap: wrap;
    padding: 20px 0
  }

  .welcome-strip .wrap>span {
    width: 100%
  }

  .welcome-strip b {
    font-size: 10px
  }

  .welcome-strip small {
    font-size: 9px
  }

  .two-paths, .destination-layout, .everyday, .partner-callout, .ry-faq {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .path {
    padding: 24px;
    gap: 15px
  }

  .section h2 {
    font-size: 31px
  }

  .path h3 {
    font-size: 20px
  }

  .titleline {
    gap: 0
  }

  .destination-photo {
    height: 320px;
    min-height: 0
  }

  .state-list a {
    padding: 20px 0
  }

  .ry-film {
    height: 380px
  }

  .ry-film h2 {
    font-size: 36px
  }

  .ry-film .wrap {
    padding-top: 50px
  }

  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 25px
  }

  .care-band .wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px
  }

  .actions .button {
    width: auto
  }

  .film-link {
    padding: 0
  }

  .hero-copy .actions {
    gap: 14px
  }

  .ry-faq h2 br {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important
  }
}

/* Complete public pages, chair workspace and integrated forms. */
.page-navigation {
  border-top: 1px solid #edf2f8;
  border-bottom: 1px solid #e6eef7;
  background: #f6f9fd
}

.page-navigation .wrap {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 52px;
  color: #70839a;
  font-size: 14px
}

.page-navigation a {
  color: #0d6efd
}

.page-navigation .all-pages {
  margin-left: auto
}

.skip-link {
  position: absolute;
  left: 20px;
  top: -80px;
  z-index: 999;
  background: #063882;
  color: white;
  padding: 12px 20px
}

.skip-link:focus {
  top: 10px
}

nav a[aria-current=page] {
  color: #0d6efd
}

.page {
  max-width: 1320px;
  padding: 60px
}

.pagehead {
  max-width: 860px;
  padding-bottom: 26px;
  border-bottom: 1px solid #e7eef6;
  margin-bottom: 35px
}

.page h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -1.7px;
  margin: 16px 0
}

.pagehead .lead {
  max-width: 730px;
  font-size: 14px
}

.page h3 {
  letter-spacing: -.5px;
  font-weight: 650
}

.page .grid .card {
  padding: 28px;
  border-radius: 7px
}

.page .card h3 {
  font-size: 21px;
  line-height: 1.4
}

.page .card p {
  font-size: 13px
}

.page .card.accent {
  background: #063882;
  color: white
}

.page .card.accent p, .page .card.accent .lead {
  color: #dceafb
}

.page .card.accent .eyebrow {
  color: #9ad0ff
}

.page .card.accent h2 {
  color: white
}

.page .card.accent .button {
  background: white;
  color: #063882
}

.page .notice {
  background: #f1f6fd;
  border: 1px solid #dce9f8;
  color: #46617f;
  font-size: 12px;
  line-height: 1.8
}

.page .sidebar {
  border-radius: 6px;
  padding: 20px 16px;
  background: #f1f6fc
}

.sidebar a {
  font-size: 12px;
  padding: 12px
}

.sidebar-label {
  border-top: 1px solid #dce7f3;
  padding: 20px 8px 5px;
  margin-top: 12px;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #7186a1;
  font-weight: 800
}

.workspace {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 32px
}

.workspace section {
  min-width: 0
}

.workspace .pagehead h1 {
  font-size: 36px
}

.workspace .pagehead {
  padding-top: 0
}

.workspace .stats .stat {
  font-size: 12px;
  line-height: 1.6;
  border-radius: 7px
}

.workspace .stats .stat small {
  font-size: 14px
}

.workspace .fields {
  gap: 20px
}

.workspace label, .page form label {
  font-size: 12px;
  line-height: 1.7;
  color: #355879
}

.page input, .page select, .page textarea {
  border-radius: 5px;
  font-size: 14px;
  border-color: #cfdeed;
  color: #163f73
}

.page input:focus, .page textarea:focus, .page select:focus {
  outline: 3px solid #c8e1ff
}

.page .fields label.check {
  font-size: 12px
}

.previewbar {
  background: #063882;
  color: white;
  padding: 13px 5%;
  font-size: 14px
}

.previewbar button {
  color: white;
  border: 1px solid #ffffff50;
  background: transparent;
  border-radius: 4px;
  padding: 6px 12px
}

.view-switch {
  font-size: 14px;
  padding: 12px 5%
}

.form-frame {
  height: 1200px;
  border-radius: 8px;
  border-color: #dde7f2;
  background: #f4f8fd;
  scroll-margin-top: 20px
}

.form-tools {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  background: #f4f8fd;
  padding: 15px 20px;
  border-radius: 6px;
  font-size: 14px;
  margin: 20px 0 14px;
  color: #667e99
}

.form-tools a {
  color: #0d6efd;
  font-weight: 700
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px
}

.directory-grid .card {
  padding: 26px
}

.directory-grid h2 {
  font-size: 20px;
  letter-spacing: -.5px;
  margin: 0 0 20px
}

.directory-grid a {
  display: block;
  border-top: 1px solid #e5edf6;
  padding: 13px 0;
  font-size: 12px;
  color: #44617f
}

.directory-grid a span {
  float: right;
  color: #0d6efd
}

.directory-grid a:hover {
  color: #0d6efd
}

.full-invitation {
  border: 0;
  padding-top: 0
}

.country-chips span {
  border-radius: 5px;
  border-color: #dae5f1;
  font-size: 12px;
  padding: 10px 14px
}

.invitation-mark {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0
}

.invitation-mark b {
  font-size: 60px;
  letter-spacing: -4px;
  color: #0d6efd
}

.invitation-mark span {
  font-size: 10px;
  line-height: 2;
  color: #7189a3
}

.next-step-panel {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 35px;
  background: #f0f6fd;
  border-radius: 8px
}

.next-step-panel h2 {
  font-size: 28px;
  letter-spacing: -1px;
  margin: 12px 0
}

.next-step-panel p {
  font-size: 13px;
  color: #6b7f97
}

.public-page>.page+.page {
  padding-top: 0
}

.student-mood {
  background: #f0f6fd;
  border-radius: 8px
}

.student-mood h2 {
  font-size: 36px
}

.student-mood .grid h3 {
  font-size: 19px;
  line-height: 1.5
}

.student-mood .number {
  background: white;
  color: #0d6efd
}

.district-map {
  border-radius: 8px;
  background: #edf5ff;
  border: 1px solid #e1ecf8
}

.review-checklist {
  margin-top: 30px;
  border-top: 1px solid #e2ebf5;
  padding-top: 20px
}

.review-checklist p {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  border-bottom: 1px solid #e8eff6;
  padding: 10px 0
}

.review-checklist small {
  width: 100%;
  margin-left: 22px;
  color: #7c90a5;
  font-size: 14px;
  overflow-wrap: anywhere
}

.film .eyebrow {
  color: #9dceff
}

.film .play {
  background: white;
  color: #0d6efd;
  cursor: pointer
}

.film .button.lime {
  background: white;
  color: #063882
}

.page .destination h3 {
  font-size: 27px
}

.page .destination {
  border: 0
}

.page .destination p {
  color: inherit
}

.page .badge {
  display: inline-block;
  background: #e9f3ff;
  color: #1767bd;
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 14px
}

.page .privacy {
  max-width: 850px;
  font-size: 14px;
  line-height: 1.9
}

.form-demo-bar {
  font-size: 14px
}

@media(max-width:1000px) {
  .page {
    padding: 45px 5%
  }

  .workspace {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px
  }

  .workspace .stats {
    grid-template-columns: 1fr
  }

  .workspace .stats .stat {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap
  }

  .workspace .stats .stat b {
    font-size: 28px;
    margin: 0
  }

  .workspace .pagehead h1 {
    font-size: 30px
  }

  .directory-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:700px) {
  .workspace {
    grid-template-columns: 1fr
  }

  .workspace .sidebar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
  }

  .sidebar a {
    padding: 9px;
    font-size: 14px
  }

  .sidebar-label {
    width: 100%;
    padding: 10px 8px 0;
    margin: 0
  }

  .page-navigation .wrap {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10px;
    padding: 12px 0
  }

  .page-navigation .all-pages {
    width: 100%;
    margin: 0
  }

  .page .grid, .directory-grid {
    grid-template-columns: 1fr
  }

  .page .stats {
    grid-template-columns: 1fr
  }

  .page .split {
    grid-template-columns: 1fr;
    gap: 25px
  }

  .next-step-panel {
    grid-template-columns: 1fr;
    padding: 25px;
    gap: 15px
  }

  .form-tools {
    align-items: flex-start;
    flex-direction: column
  }

  .full-invitation .titleline {
    gap: 20px
  }

  .page .film {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 25px
  }

  .page .filmvisual {
    min-height: 210px
  }

  .page .fields {
    grid-template-columns: 1fr
  }

  .page .fields .full {
    grid-column: auto
  }

  .page .actions .button {
    width: 100%
  }

  .pagehead {
    margin-bottom: 25px
  }

  .pagehead .lead {
    font-size: 13px
  }

  .student-mood h2 {
    font-size: 29px
  }

  .country-chips {
    gap: 8px
  }

  .country-chips span {
    font-size: 10px
  }

  .workspace .card {
    padding: 22px
  }

  .previewbar {
    flex-wrap: wrap;
    gap: 12px
  }

  .directory-grid .card {
    padding: 22px
  }
}