@font-face {
  font-family:Vela;
  src:url('/assets/fonts/VelaSans-GX.ttf') format('truetype');
  font-weight:200 800;
  font-display:swap
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:#fffaf3;
  color:#151d3b;
  font:18px/1.5 Vela,Arial,sans-serif
}
a {
  color:inherit
}
img {
  display:block;
  max-width:100%
}
.skip {
  position:fixed;
  z-index:20;
  left:16px;
  top:12px;
  padding:10px 14px;
  background:#dfff71;
  transform:translateY(-180%)
}
.skip:focus {
  transform:none
}
.site-header {
  height:74px;
  max-width:1440px;
  margin:auto;
  padding:13px clamp(20px,5vw,70px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fffaf3
}
.brand img {
  width:124px;
  height:auto
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,30px);
  font-size:15px;
  font-weight:650
}
.site-header nav a {
  text-decoration:none
}
.nav-cta,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 18px;
  text-decoration:none;
  font-weight:760;
  box-shadow:4px 4px 0 #45c4e6;
  transition:transform .18s ease,box-shadow .18s ease
}
.nav-cta {
  background:#151d3b;
  color:#fffaf3
}
.nav-cta:hover,.button:hover {
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #45c4e6
}
.menu-toggle {
  display:none
}
.hero {
  min-height:calc(100dvh - 74px);
  overflow:hidden;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,43%);
  align-items:center;
  gap:4vw;
  padding:clamp(32px,6vw,78px) max(5vw,24px) 0;
  background:#071719;
  color:#fffaf3
}
.hero-copy {
  max-width:660px;
  justify-self:end;
  padding-bottom:clamp(32px,8vh,90px)
}
.hero-kicker,.kicker {
  margin:0 0 18px;
  font-size:12px;
  font-weight:760;
  letter-spacing:.1em;
  text-transform:uppercase
}
.hero-kicker {
  color:#dfff71
}
.hero h1,h2 {
  margin:0;
  letter-spacing:-.055em;
  line-height:.96;
  text-wrap:balance
}
.hero h1 {
  font-size:clamp(3.4rem,6.9vw,6.6rem);
  font-weight:780
}
.hero-copy>p:not(.hero-kicker) {
  max-width:530px;
  margin:27px 0 31px;
  font-size:clamp(18px,1.55vw,22px);
  line-height:1.42
}
.lime {
  background:#dfff71;
  color:#151d3b
}
.hero-portrait {
  height:min(82dvh,780px);
  align-self:end;
  display:flex;
  justify-content:center;
  position:relative
}
.hero-portrait:after {
  content:'';
  position:absolute;
  inset:20% 0 0;
  background:radial-gradient(ellipse at 55% 45%,#1a5a5c 0,transparent 60%);
  z-index:0
}
.hero-portrait img {
  height:100%;
  max-height:780px;
  width:100%;
  object-fit:contain;
  object-position:center bottom;
  position:relative;
  z-index:1
}
.perspective,.teacher,.approach,.beyond,.faq,.closing {
  padding:clamp(75px,11vw,150px) max(5vw,24px)
}
.section-head {
  max-width:820px;
  margin:0 auto 54px
}
.section-head h2,.teacher h2,.approach h2,.beyond h2,.faq h2,.closing h2 {
  font-size:clamp(2.5rem,5.1vw,5.2rem);
  font-weight:760
}
.section-head p:last-child {
  max-width:610px;
  margin:24px 0 0;
  font-size:20px;
  color:#536078
}
.kicker {
  color:#c4265d
}
.notebook {
  max-width:1280px;
  margin:auto;
  overflow:hidden;
  position:relative;
  padding:clamp(25px,4.5vw,58px);
  background-color:#fffdf8;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 38px,rgba(75,132,193,.16) 39px);
  box-shadow:10px 12px 0 #dfe6d7
}
.notebook:before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:clamp(20px,4vw,48px);
  width:1px;
  background:rgba(196,38,93,.5)
}
.paper-title,.life-control {
  position:relative
}
.paper-title {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  padding-left:clamp(12px,2vw,32px)
}
.paper-title strong {
  font-size:clamp(1.4rem,2.8vw,2.75rem);
  line-height:1.02;
  letter-spacing:-.045em
}
.paper-title span {
  font-size:15px;
  color:#596177
}
.life-scene {
  height:clamp(185px,23vw,290px);
  position:relative;
  margin:22px 0 8px
}
.life-scene svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible
}
.life-line,.life-shadow {
  fill:none;
  stroke:#151d3b;
  stroke-width:3.4;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  transition:d .65s ease
}
.life-shadow {
  stroke:#c4265d;
  stroke-width:1;
  transform:translateY(5px);
  opacity:.5
}
.life-dot,.life-exam {
  position:absolute;
  left:var(--x);
  top:var(--y);
  transition:left .65s ease,top .65s ease
}
.life-dot {
  width:20px;
  height:20px;
  border:5px solid #fffdf8;
  border-radius:50%;
  background:#ef5b2a;
  transform:translate(-50%,-50%);
  box-shadow:0 1px 0 #151d3b
}
.life-exam {
  transform:translate(-50%,-175%);
  font-weight:780
}
.life-label {
  position:absolute;
  font-size:clamp(15px,1.7vw,20px);
  font-weight:660;
  opacity:1
}
.label-interest {
  left:43%;
  top:11%
}
.label-discovery {
  left:67%;
  top:62%
}
.label-path {
  right:3%;
  top:4%
}
.is-ready:not(.wide) .life-label {
  opacity:0;
  transform:translateY(8px);
  pointer-events:none
}
.life-label {
  transition:opacity .3s .22s,transform .3s .22s
}
.life-control {
  padding-left:clamp(12px,2vw,32px)
}
.text-button {
  min-height:44px;
  border:0;
  border-bottom:2px solid #151d3b;
  background:transparent;
  color:#151d3b;
  font:720 17px Vela,Arial,sans-serif;
  cursor:pointer
}
.life-status {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0)
}
.teacher {
  background:#f4ecdf
}
.teacher-layout {
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(38px,9vw,150px);
  align-items:center
}
.teacher-copy p {
  max-width:640px;
  margin:23px 0 0
}
.sample {
  margin:0;
  background:#151d3b;
  color:#fffaf3;
  box-shadow:12px 12px 0 #c4265d
}
.sample img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}
.sample figcaption {
  padding:26px
}
.sample figcaption span,.sample figcaption small {
  display:block;
  color:#b9c6c6;
  font-size:14px
}
.sample figcaption strong {
  display:block;
  margin:7px 0 2px;
  font-size:24px;
  line-height:1.15
}
.sample figcaption a,.format-note a {
  display:inline-block;
  margin-top:22px;
  font-weight:760
}
.approach {
  max-width:1440px;
  margin:auto
}
.approach-intro {
  max-width:940px;
  margin-bottom:54px
}
.approach-intro p {
  max-width:650px;
  margin:25px 0 0;
  color:#536078
}
.steps {
  counter-reset:step;
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgba(21,29,59,.4);
  display:grid;
  grid-template-columns:repeat(5,1fr)
}
.steps li {
  min-height:190px;
  padding:23px 18px 18px;
  border-right:1px solid rgba(21,29,59,.3);
  display:flex;
  flex-direction:column;
  gap:35px
}
.steps li:first-child {
  padding-left:0
}
.steps li:last-child {
  border-right:0
}
.steps b {
  color:#c4265d;
  font-size:13px;
  letter-spacing:.08em
}
.steps span {
  font-size:18px;
  line-height:1.25;
  font-weight:650
}
.format-note {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:30px;
  align-items:end;
  margin-top:42px;
  padding-top:25px;
  border-top:1px solid rgba(21,29,59,.3)
}
.format-note p {
  margin:0;
  font-size:16px
}
.format-note a {
  margin:0;
  white-space:nowrap
}
.beyond {
  background:#071719;
  color:#fffaf3;
  display:grid;
  grid-template-columns:.84fr 1.16fr;
  gap:8vw;
  align-items:center
}
.beyond>div {
  max-width:680px
}
.beyond h2 {
  color:#dfff71
}
.beyond>div:not(.questions)>p {
  font-size:20px;
  line-height:1.4
}
.questions p {
  margin:0;
  padding:27px 0;
  border-top:1px solid rgba(223,255,113,.42);
  font-size:clamp(1.4rem,2.6vw,2.6rem);
  line-height:1.08;
  letter-spacing:-.04em
}
.questions p:last-child {
  border-bottom:1px solid rgba(223,255,113,.42)
}
.faq {
  max-width:1120px;
  margin:auto
}
.faq h2 {
  margin-bottom:48px
}
.faq-list {
  border-top:1px solid rgba(21,29,59,.35)
}
details {
  border-bottom:1px solid rgba(21,29,59,.35)
}
summary {
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  cursor:pointer;
  font-size:clamp(18px,2vw,23px);
  font-weight:680;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
summary span {
  font-size:28px;
  font-weight:350
}
details[open] summary span {
  transform:rotate(45deg)
}
details p {
  max-width:700px;
  margin:0 0 28px;
  color:#536078
}
.closing {
  background:#dfff71;
  text-align:center
}
.closing h2 {
  max-width:850px;
  margin:0 auto
}
.closing>p:not(.kicker) {
  max-width:610px;
  margin:28px auto
}
.pink {
  background:#c4265d;
  color:#fffaf3;
  box-shadow:4px 4px 0 #151d3b
}
.closing small {
  display:block;
  max-width:470px;
  margin:27px auto 0;
  color:#35415a
}
footer {
  max-width:1440px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:35px max(5vw,24px);
  font-size:15px;
  font-weight:700
}
footer a:last-child {
  text-decoration:none;
  border-bottom:1px solid
}
@media(max-width:940px) {
  body {
    font-size:18px
  }
  .site-header {
    height:64px;
    padding:10px 20px
  }
  .brand img {
    width:112px
  }
  .menu-toggle {
    display:grid;
    grid-template-columns:auto 16px;
    gap:4px 9px;
    align-items:center;
    border:0;
    background:transparent;
    font:700 14px Vela;
    color:#151d3b
  }
  .menu-toggle i {
    display:block;
    width:16px;
    height:1.5px;
    background:#151d3b
  }
  .menu-toggle i:last-child {
    grid-column:2
  }
  .site-header nav {
    display:none;
    position:absolute;
    z-index:5;
    top:64px;
    left:0;
    right:0;
    padding:18px 20px 24px;
    background:#fffaf3;
    box-shadow:0 12px 16px rgba(21,29,59,.12);
    align-items:stretch;
    gap:0
  }
  .site-header nav.open {
    display:flex;
    flex-direction:column
  }
  .site-header nav a {
    padding:12px 0
  }
  .site-header .nav-cta {
    margin-top:10px;
    padding:11px 16px;
    text-align:center
  }
  .hero {
    min-height:auto;
    grid-template-columns:1fr;
    gap:12px;
    padding:48px 24px 0
  }
  .hero-copy {
    justify-self:start;
    padding:0
  }
  .hero h1 {
    font-size:clamp(3.2rem,15vw,4.7rem)
  }
  .hero-copy>p:not(.hero-kicker) {
    font-size:18px;
    margin:22px 0 27px
  }
  .hero-portrait {
    height:490px;
    max-height:66dvh
  }
  .perspective,.teacher,.approach,.beyond,.faq,.closing {
    padding:78px 24px
  }
  .section-head {
    margin-bottom:37px
  }
  .section-head h2,.teacher h2,.approach h2,.beyond h2,.faq h2,.closing h2 {
    font-size:clamp(2.45rem,11.7vw,4.5rem)
  }
  .section-head p:last-child {
    font-size:18px
  }
  .notebook {
    padding:25px 20px 23px;
    box-shadow:6px 7px 0 #dfe6d7
  }
  .notebook:before {
    left:18px
  }
  .paper-title {
    padding-left:13px;
    align-items:start;
    flex-direction:column
  }
  .paper-title strong {
    font-size:25px
  }
  .paper-title span {
    font-size:14px
  }
  .life-scene {
    height:192px;
    margin-top:25px
  }
  .life-exam {
    font-size:15px
  }
  .life-label {
    font-size:14px
  }
  .label-interest {
    left:39%;
    top:5%
  }
  .label-discovery {
    left:57%;
    top:68%
  }
  .label-path {
    right:0;
    top:12%
  }
  .life-control {
    padding-left:13px
  }
  .teacher-layout,.beyond {
    grid-template-columns:1fr
  }
  .teacher-layout {
    gap:45px
  }
  .sample {
    box-shadow:7px 7px 0 #c4265d
  }
  .steps {
    grid-template-columns:1fr
  }
  .steps li {
    min-height:auto;
    padding:18px 0;
    border-right:0;
    border-bottom:1px solid rgba(21,29,59,.3);
    display:grid;
    grid-template-columns:48px 1fr;
    gap:12px
  }
  .steps li:last-child {
    border-bottom:0
  }
  .format-note {
    grid-template-columns:1fr;
    gap:18px
  }
  .format-note a {
    margin-top:6px
  }
  .beyond {
    gap:45px
  }
  .beyond>div:not(.questions)>p {
    font-size:18px
  }
  .questions p {
    font-size:25px;
    padding:22px 0
  }
  .faq h2 {
    margin-bottom:32px
  }
  summary {
    min-height:76px;
    font-size:18px
  }
  .closing {
    text-align:left
  }
  .closing h2 {
    margin:0
  }
  .closing>p:not(.kicker) {
    margin-left:0
  }
  .closing small {
    margin-left:0
  }
  footer {
    padding:27px 24px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition-duration:.01ms!important
  }
}
@media(min-width:941px) {
  .hero h1 {
    font-size:clamp(3.4rem,5.2vw,5.6rem)
  }
}
/* Parent page acceptance fixes */
.site-header {
  min-height: 74px;
  height: auto;
}
.site-header .brand img {
  width: auto;
  max-height: 52px;
}
.hero {
  min-height: min(100dvh - 74px, 826px);
  max-height: none;
  background: #031014;
}
.hero-portrait {
  height: auto;
  min-height: 0;
  width: 100%;
  max-width: 460px;
}
.hero-portrait::after {
  display: none;
}
.hero-portrait img {
  height: auto;
  max-height: none;
  width: 100%;
  object-fit: contain;
}
.paper-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: end;
}
.paper-title span {
  min-height: 3.2em;
}
.notebook {
  --x: 19%;
  --y: 43%;
}
.beyond > * {
  min-width: 0;
}
.text-button {
  display: none;
}
.is-ready .text-button {
  display: inline-block;
}
.beyond > div:not(.questions) > p {
  font-size: 20px;
  line-height: 1.4;
}
.questions p {
  font-size: clamp(1.4rem, 2.6vw, 2.6rem);
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #dfff71;
  outline-offset: 4px;
}
@media (max-width: 940px) {
  .site-header {
    min-height: 64px;
    height: 64px;
  }
  .site-header .brand img {
    width: auto;
    max-height: 44px;
  }
  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .hero {
    min-height: auto;
    max-height: none;
  }
  .hero-portrait {
    max-width: 440px;
    margin: 0 auto;
  }
  .paper-title {
    grid-template-columns: 1fr;
  }
  .paper-title span {
    min-height: 0;
  }
  .label-path {
    top: 0;
  }
  .site-header nav {
    display: flex;
    flex-direction: column;
  }
  .has-js .site-header nav {
    display: none;
  }
  .has-js .site-header nav.open {
    display: flex;
  }
}

/* Conversion path additions: use the existing type scale, palette and square surfaces. */
.hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px 24px
}
.text-link {
  display:inline-block;
  font-weight:760;
  text-decoration-thickness:1.5px;
  text-underline-offset:4px
}
.support,.moodle-path {
  padding:clamp(75px,11vw,150px) max(5vw,24px)
}
.support {
  max-width:1440px;
  margin:auto;
  background:#cfefff
}
.support-copy {
  max-width:830px;
  margin:0 auto 52px
}
.support-copy h2,.moodle-path h2 {
  margin:0;
  font-size:clamp(2.5rem,5.1vw,5.2rem);
  font-weight:760;
  letter-spacing:-.028em;
  line-height:1.02;
  word-spacing:.04em
}
.support-copy>p:last-child,.moodle-path h2+p {
  max-width:720px;
  margin:24px 0 0;
  font-size:20px;
  line-height:1.45
}
.support-grid {
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(21,29,59,.35);
  border-left:1px solid rgba(21,29,59,.35)
}
.support-grid article {
  min-width:0;
  padding:25px;
  border-right:1px solid rgba(21,29,59,.35);
  border-bottom:1px solid rgba(21,29,59,.35)
}
.support-grid h3 {
  margin:0 0 14px;
  font-size:clamp(1.35rem,2vw,1.9rem);
  letter-spacing:-.03em
}
.support-grid p {
  margin:0;
  font-size:16px;
  line-height:1.42
}
.support-link { margin-top:26px }
.moodle-path {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:48px;
  align-items:end;
  background:#ffdce5
}
.moodle-path>div:first-child { max-width:760px }
.moodle-path h2+p { color:#536078 }
.moodle-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  min-width:220px
}
@media (max-width:940px) {
  .support,.moodle-path { padding:78px 24px }
  .support-copy { margin-bottom:37px }
  .support-copy h2,.moodle-path h2 { font-size:clamp(2.45rem,11.7vw,4.5rem) }
  .support-copy>p:last-child,.moodle-path h2+p { font-size:18px }
  .support-grid { grid-template-columns:1fr }
  .support-grid article { padding:21px 0 21px 20px }
  .moodle-path { grid-template-columns:1fr; gap:32px }
  .moodle-actions { gap:18px }
}
/* Final responsive and progressive-enhancement polish. */
.hero-portrait {
  max-height: none;
}
.hero-portrait img {
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.paper-title span {
  min-height: 3.2em;
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline-color: #c4265d;
}
.hero a:focus-visible, .closing a:focus-visible {
  outline-color: #151d3b;
}
.hero a:focus-visible {
  outline-color: #dfff71;
}
.sample figcaption a span {
  display: inline;
  color: inherit;
}
@media (max-width: 940px) {
  .hero h1 {
    font-size: clamp(2.05rem, 11.2vw, 3.3rem);
  }
  .paper-title span {
    min-height: 3em;
  }
  .questions p {
    font-size: 25px;
  }
  .hero-portrait {
    max-height: none;
  }
  .menu-toggle {
    display: none;
  }
  .has-js .menu-toggle {
    display: grid;
  }
  html:not(.has-js) .site-header {
    height: auto;
    flex-wrap: wrap;
  }
  html:not(.has-js) .site-header nav {
    position: static;
    width: 100%;
    padding-inline: 0;
    box-shadow: none;
  }
}

.sample img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 940px) {
  .menu-toggle { grid-template-rows: 4px 4px; row-gap: 5px; align-content: center; }
  .menu-toggle span { grid-row: 1 / 3; }
}

/* Cyrillic display type needs a little more air than the original global h2 rule. */
.hero h1 {
  letter-spacing: -.035em;
  line-height: .98;
  word-spacing: .015em;
}
h2 {
  letter-spacing: -.028em;
  line-height: 1.02;
  word-spacing: .04em;
}
.teacher-copy h2 + p,
.approach-intro h2 + p,
.beyond > div:not(.questions) > h2 + p {
  margin-top: 24px;
}
@media (max-width: 940px) {
  .teacher-copy h2 + p,
  .approach-intro h2 + p,
  .beyond > div:not(.questions) > h2 + p {
    margin-top: 20px;
  }
}