body {font-family: neue-haas-unica, sans-serif; letter-spacing: 0px;}
.left7-5vw {margin-left:7.5vw;}
.both7-5vw {margin:0 7.5vw 17px}
#home-hero {
  background: url(../images/hero-battler.jpg);
  height: calc(100dvh - 57px);
  background-size: cover;
  background-repeat: no-repeat;
  /* Horizontal position 57%, vertical offset controlled via JS parallax. */
  background-position: 57% 0;
}
#home-headline {padding: 32px 26px 25px}
#hero-sshot {padding: 0px 24px 0px; width: 100%;  max-width: 460px;}
#hero-screen {display: flex;
    justify-content: center;}
h1.home-hero {font-family: 'neue-haas-grotesk-display';
    font-size: 38px;
    position: absolute;
    bottom: 82px;
    font-weight: 500;
    color: #fffffff2;}
.btn.primary.green {
  background: #30efa1;
  color: #000;
  border: 0;
  border-radius: 3px;
  font-family: "transducer", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  padding: 13px 18px;
  display: inline-block;
  width: min(420px, 79%);
}
.btn.primary.green:hover {
  background: #5affbc;
  color: #000;
  transition: 0.3s;
}
.btn.primary.green.extended{
font-family: 'transducer-extended', sans-serif;
  text-align: center;
  font-size: 22px;
}

h2.home-header {
    font-family: 'neue-haas-grotesk-display';
    font-size: 31px;
    text-transform: none;
    color: #ffffffd4;
    font-weight: 100;
    padding-top: 60px;
    /* Reveal-on-scroll baseline: hidden and stationary. */
    opacity: 0;
    transform: translateY(0px);
    transition:
      opacity 0.75s ease-in-out,
      transform 0.75s ease-in-out;
}

/* Once revealed via JS, fade in and slide up a bit. */
h2.home-header.home-header-visible {
    opacity: 1;
    transform: translateY(-15px);
}
h3.home-header {font-family: 'neue-haas-grotesk-display';
    font-size: 31px;
    text-transform: none;
    color: #ffffffd4;
    font-weight: 100;
    padding-top: 60px;}
h3.home-header.bottom {    margin-bottom: 58px;}
h3.home-header.bottom.right {text-align: right;}
.delta-grid {display: grid; grid-template-columns: 1fr 347px; grid-template-rows: 1fr;}
/* Clip the wide phase cards so they don't expand the page width on mobile */
.delta-grid-animation {
  position: relative;
  overflow: hidden;
}
.delta-grid-form {padding: 54px 30px 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;    z-index: 2;
    background-color: black;}

#priorities {
  background: url(../images/save-priorities.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  /* Horizontal lock at 60%, vertical position is controlled by JS parallax. */
  background-position: 60% 100%;
  /* Ensure the section can always cover the viewport while in view. */
  min-height: 100vh;
}
.priorities-content {    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;     min-height: 100dvh;}
h4.rubric {font-family: 'transducer-extended';
    color: #59eeb0;
        font-size: 14.5px;
    margin: 0 0 11px 0; text-transform: uppercase;}
h3.delta-form {font-family: 'neue-haas-grotesk-display';
    text-transform: none;
    font-size: 23px;
    color: #fffffff5;
    line-height: 28px;     margin-bottom: 34px;}
    p.delta-form-label {    margin-bottom: 4px;
    margin-top: 14px;}
.delta-or-container {    border-bottom: 1px solid #686868;
    margin: 12px 0 24px 0;}
.delta-or {text-align: center;
    background-color: black;
    margin: 0px auto -13px;
    width: fit-content;
    padding: 3px;
    color: #868484;
    font-weight: 600;}
.card.invisible.wide {padding: 31px 0px 31px;}
.animation-subject {
  position: relative;
  height: 100%;
  background-color: #011006;
  perspective: 1200px;
  overflow: hidden;
}

.delta-cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: 540px;
  max-height: 720px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateY(0deg);
  transition: transform 0.5s ease-in-out;
}

.delta-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
}

.face-youngman {
  background-image: url(../images/before-youngman.jpg);
  transform: rotateY(0deg) translateZ(270px);
}

.face-youngwoman {
  background-image: url(../images/before-youngwoman.jpg);
  /* Swapped angle so youngwoman appears in the 2nd stage of the rotation */
  transform: rotateY(-270deg) translateZ(270px);
}

.face-oldman {
  background-image: url(../images/before-oldman.jpg);
  transform: rotateY(-180deg) translateZ(270px);
}

.face-oldwoman {
  background-image: url(../images/before-oldwoman.jpg);
  /* Swapped angle so oldwoman appears in the 4th stage of the rotation */
  transform: rotateY(-90deg) translateZ(270px);
}

.delta-wipe-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Sit on the same depth plane as the cube faces so BEFORE and AFTER
     match in perspective. The cube parent provides the rotateY; this
     translateZ just brings the overlay out to the face depth. */
  transform: translateZ(270px);
  /* Start fully hidden using a top-down clip. The image itself is always
     rendered at full size; we only reveal more of it over time. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2s ease-in-out;
}
.phasecard-stream {
  position: absolute;
  bottom: 58px;
  display: flex;
  flex-direction: row;
}

.phasecard {
  width: 312px;
  height: 161px;
  margin-right: 9px;
  /* Base: visible and slightly offset; JS can use .phasecard-visible as a hidden state. */
  opacity: 1;
  transform: translateX(-20px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.phasecard.phasecard-visible {
  /* Hidden variant used by JS: fade out / slide to rest. */
  opacity: 0;
  transform: translateX(0);
}
.phasecard1 {background: url(../images/phase1m.png); background-size: cover;}
.phasecard2 {background: url(../images/phase2m.png); background-size: cover;}
.phasecard3 {background: url(../images/phase3m.png); background-size: cover;}
.phasecard4 {background: url(../images/phase4m.png); background-size: cover;}
.phasecard5 {background: url(../images/phase5m.png); background-size: cover;}

.card.homeform {
    padding: 14px 0px 30px;
}

#workout-stream {}
    .workout-stream-top {max-width: 525px;}
    .workout-stream-row {
      background:url(../images/stream-narrow.jpg);
      background-size: cover;
      min-height: 33vw;
      display: flex;
      align-items: center;
      /* Mask the horizontally sliding image so it can't create page-wide overflow */
      overflow: hidden;
    }
.buttonstrip {background-color: #03da88; display: flex;
    justify-content: flex-end;}
  a.buttonstrip-button {color: black;
    font-family: 'neue-haas-grotesk-display';
    font-weight: 600;
    font-size: 18px;
    border-left: 2px black solid;
    border-right: 2px black solid;
    padding: 16px 44px 14px 18px;
    margin-right: 7.5vw;
    background: url(../images/arrow-right-inactive.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: 95%;
      cursor: pointer;
    text-decoration: none;}

       a.buttonstrip-button:hover {text-decoration: underline; transition: 0.3s;}

#exercise-selector {background: url(../images/angles.jpg); background-size: 100vw;
    background-position: center 5vh; 
    background-repeat: no-repeat;     background-color: black;}
.exercise-selector-grid {display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;}
.exercise-selector-content {max-width:525px;}
.exercise-selector-content-bottom {    max-width: 525px;
    margin-top: 40vw;}
.exercise-selector-form {    background: url(../images/exercise-column.png);
    background-size: 33vw;
    background-repeat: no-repeat;
    background-position: 50% top;
  background-size: clamp(284px, 33vw, 380px) auto;}


  #adjusts {    background: url(../images/in-your-face.jpg);
    display: flex;
    justify-content: flex-end;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    align-items: center;}
  .adjusts-content {width: 50%;}

  #teaching {background: url(../images/coachsession.jpg); background-size: 100vw;
    background-position: -8vw 5vh; 
    background-repeat: no-repeat;     background-color: black;}
.teaching-grid {display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;}
.teaching-content { max-width: 560px;}
.teaching-content-bottom {    max-width: 560px;
    margin-top: 31vw;}
.teaching-form {    background: url(../images/teaching.jpg);
    background-size: 33vw;
    background-repeat: no-repeat;
    background-position: 50% top;
  background-size: clamp(284px, 33vw, 380px) auto;}


  #team {    background-image: radial-gradient(circle at top right, #1c1c1c 0%, #1c1c1c00 100%), /* Bottom layer: deep green → black from bottom-center */ radial-gradient(ellipse farthest-corner at 50% 100%, #001f12 0%, #000000 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%;
    background-position: 0 0, 0 0;}
  .team-coach-container {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(0px);
    transition:
      opacity 0.75s ease-in-out,
      transform 0.75s ease-in-out;
  }

  /* Once revealed via JS, fade in and slide up a bit. */
  .team-coach-container.team-coach-visible {
    opacity: 1;
    transform: translateY(-15px);
  }
    .teamgrid {display: grid;
    grid-template-columns: 1fr 1fr; align-items: center;}
  .team-coach-avatar {width: 69px; height: 69px; margin-right: 7px;}
  .team-coach-title {font-family: 'transducer-extended';
    text-transform: uppercase;
    font-weight: 600;
    color: #26ffae;
    font-size: 14px;
    margin-bottom: 0px;}
    .teamgrid-table {padding: 7.5vw;}
    .team-coach-message {font-weight: 100;}
    .team-coach-avatar.liam {position: relative; background: url(../images/face-liam.png); background-size: cover; background-repeat: no-repeat;}
    .team-coach-avatar.dirk {background:url(../images/face-dirk.png); background-size: cover; background-repeat: no-repeat;}
    .team-coach-avatar.quinn {position: relative; background: url(../images/face-quinn.png); background-size: cover; background-repeat: no-repeat;}
    .team-coach-avatar.kass {background: url(../images/face-kass.png); background-size: cover; background-repeat: no-repeat;}
    .team-coach-avatar.apex {background: url(../images/face-apex.png); background-size: cover; background-repeat: no-repeat;}
#coachheader {background-color: transparent; display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; background:url(../images/bg-stripe.svg), #0c1412; background-size: 51px; background-repeat: repeat-x;}
  h2.home-header.coach {font-weight: 600;
    font-size: 38px;
    padding: 0;     margin-bottom: 17px;}
  h4.rubric.coach {    font-size: 17px;
    margin: 69px 0 19px;}


@media (max-width: 768px) {
  .delta-grid {display: block;}
  .delta-grid-animation {height: 100dvh;}
  .priorities-content {width: 100%;}
  .left7-5vw {margin-right: 20px;}
  .exercise-selector-grid {display:block;}
  .exercise-selector-form {background-size: 100vw; height: 100dvh;}
  .adjusts-content {width: 100%; background: #000000c7; padding-bottom: 11px;}
  #adjusts {background: url(../images/in-your-face-mobile.jpg); align-items: flex-end; background-position: center;
    background-size: cover;}
    .teaching-grid {display: block;}
    .teaching-form {background-size: 100vw; height: 54dvh;}
    .teamgrid {display: block;}
    .teamgrid-table {padding: 10vh 7.5vw 0;}
    .teamgrid-content {padding-bottom: 37px;}
    p {font-size: 18px; line-height: 24px;}
    .blackbackdrop {background: #000000b0; padding-bottom: 16px;}
    .workout-stream-top {padding-bottom: 27px;}
    .workout-stream-row {min-height: 90vw;}
    #exercise-selector {background: url(../images/angles-mobile.jpg); background-size: 100vw;
    background-repeat: no-repeat;}
    #teaching {background: url(../images/coachsession-mobilr.jpg);background-size: 100vw; background-repeat: no-repeat;}
    .teaching-content-bottom {margin-top: 57vw;}
}




#delta {position:relative;}
#delta-symbol { width: 34px;  margin: 0px 9px 0 0;;}
#delta-definition {display: flex; align-items: flex-start; justify-content: center; padding: 37px;}
#delta-title {font-family: neue-haas-unica, sans-serif; font-weight: 500; color:#61ffce; font-size:20px;}
#delta-def {font-weight: 100; color:#defff6; line-height: 1; font-size:15px; margin-top: 4px;}
#def-def {font-size: 14px; color: #62ffceab;}
#def-cont {border-left: .5px solid #62ffce9e; padding: 0 0 10px 11px;}
h2.home {font-family: "neue-haas-grotesk-display", sans-serif; color:white; text-transform: none; font-weight: 400; font-size: 27px;}
section#delta h2.home {position: absolute;     bottom: 84px; left: 10%; width: 263px;}
#before-after-animation {height: 100dvh; 
  background: url(../images/before-youngman.jpg); 
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center;}

.greenlinkcontainer {position:absolute; bottom:0px; background: black; width: 100%; display: flex; justify-content: flex-end;}
.greenlink {color: #00ffb0; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600;     background: url(../images/glyph-link.svg);
    background-repeat: no-repeat;
    background-position: 92% 54%;
    font-size: 20px;
    padding: 22px 15% 20px;
    background-size: 23px;    border-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, black, #368268, black) 1; text-decoration: none;}

  .greenlink:hover {text-decoration: underline; transition: 0.3s;}

  #optimal-routine {height: 100dvh;
    background: url(../images/control-unit.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #113633;
    position: relative;
    overflow: hidden;
    background-position: center top;}

    #priorities-sshot {background-image: url(../images/priorities-sshot.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    width: 86%;
    height: 1382px;
    margin: auto;
      max-width: 460px;}

    section#optimal-routine h2 {padding: 42px 31px 19px;}
    #optimal-routine-scroller {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200dvh;
      background: linear-gradient(0deg, #244a45, #162423);
      transform: translateY(100dvh);
      will-change: transform;
    }

    #coaching {    height: 100dvh;
    background: url(../images/thinking.jpg);
    background-size: cover;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 50% 62%;}
    section#coaching h2.home {padding: 31px;}
    #coaching-scroller {background: url(../images/sshot-inc-db.png); background-size:contain; background-repeat: no-repeat; height: 627px;
    margin: 0 32px; background-position: center;}

    #curriculum {height:100dvh; background: url(../images/coach-explain2.jpg); background-size: cover; position: relative; overflow: hidden;}
    section#coaching h2.home {padding: 31px;}
    #curriculum-scroller {background: url(../images/sshot-inc-db.png); background-size:contain; background-repeat: no-repeat; height: 627px;
    margin: 0 32px;}

    #choose-your-coach {height:100dvh; background: url(../images/mystery-coach.jpg); background-size: cover; background-position: center top; background-attachment: fixed; position:relative;}
    h3.home {text-align: center;
    font-weight: 600; font-size: 26px;     line-height: 29px; color: #14ffd7;}
    h4.home {text-align: center; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 400; font-size:18px; line-height: 25px;     margin: 19px 0 13px;     color: white;}
    #choosecoachcontainer {background: radial-gradient(circle at center bottom, #192925, #0f201c);     display: flex;
    flex-direction: column;
    align-items: center; padding: 56px 17px 0px; position: absolute; bottom: 0px;}
    #homechevron {    width: 93px;}

    #coachpicker {height: 100dvh; background: linear-gradient(0deg, #0b2823, #0b1412);; position: relative; overflow: hidden;}
    .coachcard {display: flex; justify-content: center;
    flex-direction: column;
       justify-content: space-between;       border-width: 1px;
    border-top-style: solid;
    border-image: linear-gradient(to right, #00000000, #368268, #00000000) 1;;
    margin: 26px 17px;
    padding: 25px; height: 92.5dvh; border-radius: 15px; max-width: 420px; box-shadow: 0px 20px 18px -15px #000000b3;}
    h2.homecoach {font-family: "neue-haas-grotesk-display", sans-serif; text-transform: none; color: white; font-size: 32px;}
    h3.homecoach {font-family: "transducer-extended";  font-weight: 600;
    color: #43d190;
    font-size: 15px;}
    p.homecoach {font-size: 16px; font-family: neue-haas-unica, sans-serif; letter-spacing: 0px;
    font-weight: 100;
    line-height: 1.35;     color: #ffffffe3;}
    p.homecoach.bold {font-weight: 600;}
    .homecoach-textblock {    max-width: 340px;
    margin: 0 auto;}
    .btn.primary.green.medium {text-align: center; width: 100%; }
    section#coachpicker .btn.primary.green.medium {    margin: 9px 0px 4px;}

    .homecoach-headerblock {    display: flex;
    flex-direction: column;
    align-items: center;}

    .coachcard.liam {
      background-image: url(../images/coach-carousel-mobile-liam.jpg);
      background-position: 50% 67%;
      background-repeat: no-repeat;
      background-size: clamp(522px, 151%, 64vh) auto;
      background-color: transparent;
    }

    .coachcard.kass {
      background-image: url(../images/coach-carousel-mobile-kass.jpg);
      background-position: 50% 67%;
      background-repeat: no-repeat;
      background-size: clamp(522px, 151%, 64vh) auto;
      background-color: transparent;
    }

    .coachcard.dirk {
      background-image: url(../images/coach-carousel-mobile-dirk.jpg);
      background-position: 50% 67%;
      background-repeat: no-repeat;
      background-size: clamp(522px, 151%, 64vh) auto;
      background-color: transparent;
    }

    .coachcard.quinn {
      background-image: url(../images/coach-carousel-mobile-quinn2.jpg);
      background-position: 50% 67%;
      background-repeat: no-repeat;
      background-size: clamp(522px, 151%, 64vh) auto;
      background-color: transparent;
    }

    .coachcard.apex {
      background-image: url(../images/coach-carousel-mobile-apex.jpg);
      background-position: 50% 63%;
      background-repeat: no-repeat;
      background-size: clamp(524px, 128%, 64vh) auto;
      background-color: transparent;
    }

    /* Horizontal carousel layout (coach) */
    .coachcarousel{
      height: 100dvh;
      display: grid;
      grid-template-rows: 1fr auto; /* track + dots */
    }
    .coachcarousel-track{
      display: flex;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 0;
      scroll-behavior: smooth;
      scrollbar-width: none; /* Firefox */
      /* keep a 17px gutter on both sides at rest and during snap */
      padding: 0 17px;
      scroll-padding: 0 17px;
    }
    .coachcarousel-track::-webkit-scrollbar{ display: none; } /* WebKit */

    /* Each slide snaps with a 17px gutter on either side */
    .coachcarousel-track > .coachcard{
      /* full width of the inner content box; gutters are created by track padding */
      flex: 0 0 100%;
      scroll-snap-align: start;
      box-sizing: border-box;
    }

    /* Dots indicator (coach) */
    .carousel-dots{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      pointer-events: none;
    }
    .carousel-dots .dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #168a65;
      opacity: .5;
    }
    .carousel-dots .dot.active{
      background: #36ffb6;
      opacity: 1;
      box-shadow: 0 0 0 2px rgba(54,255,182,0.18);
    }

    /* Hide coach carousel dots on wider viewports where multiple cards
       are visible at once; dots are mobile-only. */
    @media (min-width: 768px) {
      .carousel-dots {
        display: none;
      }
    }

    /* Pricing carousel layout (plan cards) */
    .plancarousel{
      position: relative;
      height: 85.3dvh;
      display: grid;
      grid-template-rows: 1fr auto; /* track + dots */
    }
    .plancarousel-track{
      display: flex;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 20px;
      scroll-behavior: smooth;
      scrollbar-width: none;
      padding: 0 17px;          /* 17px gutter on both sides */
      scroll-padding: 0 17px;   /* snap respects the gutter */
      justify-content: center;
    }
    .plancarousel-track::-webkit-scrollbar{ display: none; }

    .plancarousel-track > .plancard{
      flex: 0 0 100%;
      scroll-snap-align: start;
      box-sizing: border-box;
      /* No horizontal margin; gutter comes from track padding */
      margin: 0;
    }

    /* Pricing dots */
    .plan-dots{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      pointer-events: none;
      padding: 12px;
    }
    .plan-dots .dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #168a65;
      opacity: .5;
    }
    .plan-dots .dot.active{
      background: #36ffb6;
      opacity: 1;
      box-shadow: 0 0 0 2px rgba(54,255,182,0.18);
    }

    #pricing {height: 100dvh; position: relative;}
h2.home-pricing {font-family: 'neue-haas-grotesk-display';
    text-transform: none;
    color: white;
    font-size: 37px;     margin-bottom: 7px;}
h3.home-pricing {    font-weight: 600;
    font-size: 15px;
    color: #30efa1;}

p.home-pricing.centered {text-align: center;     margin: 0;}
#pricing-top {    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 61px 20px 38px;
    max-width: 609px;
    margin: auto;
    text-align: center;}

.plancard {background: #242424; border-radius: 15px; padding: 22px; margin: 0; height: calc(100dvh - var(--pricing-top-h, 0px) - var(--plan-dots-h, 0px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;}
.plancard-top {display: flex; align-items: center;}
.plancard-text {display: flex; flex-direction: column; margin-left: 11px;}
.plancard-title {font-family: 'transducer-extended', sans-serif; font-weight: 600; color: #4fffb0; text-transform: uppercase; font-size: 14px;}
.plancard-copy {font-family: neue-haas-unica, sans-serif; color: white; font-size: 16px;}
.plancard-icon {display: flex; align-items: center;}

#steeringwheel {width:36px;}
#icon-month {width:36px;}

.cost {font-family: 'neue-haas-grotesk-display'; text-transform: none; font-size: 38px;
    color: white;
    font-weight: 600;
    margin: 0 auto;
    width: 100%;
    text-align: center;}
.cost-detail {color: #ffffffc7;
    text-align: center;
    font-weight: 100;}
li.home-pricing {    margin: 0 0 12px 0;    padding-left: 5px; font-weight: 400;}
ul.home-pricing {padding-left: 21px;}

ul.home-pricing li::marker {
  content: "❯ ";
  color: #4dffaa;
  font-size: 16px;}
section#pricing .btn.primary.green.medium {margin: 9px 0 3px;}
/* Plan card stacked radial backgrounds */
.plancard{
    background-image: radial-gradient(circle at top right, #1c1c1c 0%, #1c1c1c00 100%), /* Bottom layer: deep green → black from bottom-center */ radial-gradient(ellipse farthest-corner at 50% 100%, #001f12 0%, #000000 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%;
    background-position: 0 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-position: 100% 0%, 50% 100%;
  max-width: 386px;
}

#pricing-delta {    width: 40px;}

ul.big {font-family: 'neue-haas-grotesk-display';
    font-size: 22px;
    color: #ffffffe3;}
li.big {margin-bottom: 6px;}

#curriculum {position:relative; background-position: 50% -28vw;}
#curriculum-content {position:absolute; bottom:80px; padding: 0 24px; max-width: 420px;}

footer {
    margin: 0 auto; /* avoid auto vertical margins expanding inside flex column */
    font-size: 13px;
    font-weight: 100;
    color: #949494;
    padding: 11px;
}
  .app {padding-bottom:0px;}