/* Local experiment. The approved page and its styles remain available unchanged. */
.experience {
  font-size: 16px;
  --small: 13px;
  --ease-experience: cubic-bezier(0.16, 1, 0.3, 1);
  --experience-surface: #23251f;
  --experience-quiet: #b6b7ab;
}
.experience
  :is(
    .item-number,
    .step-index-static,
    .service-condition,
    .race-plan-number,
    .tool-example,
    .presence-note,
    .trademark-note,
    .journey-index,
    .journey-node-detail,
    .method-play,
    .method-tabs button > span,
    .assessment-number > span,
    .team-photo figcaption,
    .coach-list p,
    .entry-steps article > span,
    .closing-top > span,
    .footer-top > a,
    .footer-bottom > span,
    .footer-bottom > a
  ) {
  font-size: 13px;
}
.experience .club-bottom > p {
  font-size: 16px;
}
.experience .onboarding-heading {
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.25;
  max-width: 16ch;
}
.experience .assessment-number {
  display: block;
}
.experience .assessment-number > p {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 24px;
  max-width: 40ch;
}
.experience .journey-node {
  border: 0;
  background: var(--surface);
}
.experience .site-header {
  border-bottom: 0;
}
.experience .hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 790px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 32px;
  padding: 64px max(48px, calc((100vw - 1280px) / 2)) 88px;
  overflow: hidden;
}
.experience .hero-copy,
.experience .hero-details {
  position: relative;
  z-index: 2;
  padding: 0;
}
.experience .hero h1 {
  font-size: clamp(36px, 4vw, 60px);
  max-width: 930px;
  line-height: 1.14;
  text-wrap: pretty;
}
.experience .hero-description {
  max-width: 65ch;
  color: var(--cream);
}
.experience .hero-details {
  max-width: 640px;
}
.experience .hero .button-main {
  margin-top: 24px;
}
.experience .hero .button-note {
  font-size: 13px;
  color: var(--cream);
}
.hero-film {
  position: absolute;
  inset: 0 0 0 30%;
  margin: 0;
  z-index: -2;
  background: var(--black);
}
.hero-film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.hero-film::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Neutral scrim keeps text legible over every frame of the real footage. */
  background: linear-gradient(
    90deg,
    #141414 0%,
    #141414ed 25%,
    #141414b8 48%,
    #14141429 100%
  );
  pointer-events: none;
}
.film-caption {
  position: absolute;
  right: 48px;
  bottom: 100px;
  z-index: 1;
  font: 18px/1.4 var(--title);
  background: var(--black);
  color: var(--cream);
  padding: 12px 16px;
}
.film-toggle {
  position: absolute;
  right: 48px;
  bottom: 32px;
  z-index: 3;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  background: var(--cream);
  color: var(--black);
  font: 13px/1.5 var(--body);
  cursor: pointer;
}
.film-toggle:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 5px;
}
.experience .main-nav,
.experience .section-nav,
.experience .text-link,
.experience .section-label,
.experience .eyebrow {
  font-size: 13px;
}
.experience .section-label {
  color: inherit;
}
.experience .club-section,
.experience .assessment-section,
.experience .tools-section {
  position: relative;
}
.experience .race-wide-photo {
  overflow: hidden;
}
.experience .race-wide-photo img {
  will-change: transform;
}
.experience .button {
  transition:
    transform 240ms var(--ease-experience),
    background 180ms ease;
}
.experience .button:hover {
  transform: translateY(-3px);
}
.experience .button:active {
  transform: translateY(0) scale(0.98);
}
.experience .text-link span {
  transition: transform 240ms var(--ease-experience);
}
.experience .text-link:hover span {
  transform: translate(3px, -3px);
}

/* Feedback is a single circuit: its sources, the coach and the week remain visible. */
.experience .feedback-orbit {
  border: 0;
  padding-top: 24px;
}
.experience .feedback-orbit .method-visual {
  height: 480px;
  margin-block: 40px 24px;
  background: var(--experience-surface);
  border-radius: 12px;
}
.feedback-orbit .method-lines {
  z-index: 0;
}
.feedback-orbit .method-wire {
  stroke: #606552;
  stroke-width: 1.5;
}
.feedback-orbit .method-sources {
  width: 27%;
  padding-block: 24px;
  left: 0;
}
.feedback-orbit .method-source {
  position: relative;
  min-height: 92px;
  padding: 18px 24px;
  background: var(--black);
  border: 0;
  border-radius: 0 12px 12px 0;
  transition: transform 600ms var(--ease-experience);
}
.feedback-orbit .method-source > span {
  color: var(--cream);
  font-size: 13px;
}
.feedback-orbit .method-source p {
  font-size: 16px;
}
.feedback-orbit .method-coach {
  left: 56%;
  top: 50%;
  padding: 16px;
  border-radius: 50%;
  background: var(--experience-surface);
}
.feedback-orbit .method-portrait {
  width: 100px;
  height: 100px;
  border-width: 3px;
}
.feedback-orbit .method-coach::before,
.feedback-orbit .method-coach::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 2px solid #606552;
  border-radius: 50%;
  z-index: -1;
}
.feedback-orbit .method-coach::after {
  inset: -32px;
  border-color: #424638;
}
.feedback-orbit .method-coach > p {
  font-size: 13px;
}
.feedback-orbit .method-output {
  width: 25%;
  right: 0;
  padding: 26px 24px;
  border: 0;
  border-radius: 12px 0 0 12px;
  background: var(--black);
  color: var(--cream);
}
.feedback-orbit .method-output > p {
  font-size: clamp(22px, 2.1vw, 30px);
}
.feedback-orbit .method-output > span {
  font-size: 13px;
}
.feedback-orbit[data-phase="3"] .method-output {
  background: var(--lime);
  color: var(--black);
}
.feedback-orbit[data-phase="0"] [data-source="0"],
.feedback-orbit[data-phase="1"] [data-source="1"],
.feedback-orbit[data-phase="2"] [data-source="2"],
.feedback-orbit[data-phase="3"] .method-source {
  background: var(--black);
  transform: translateX(8px);
}
.feedback-orbit .flow-signal {
  fill: none;
  stroke: var(--lime);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.feedback-orbit .method-tabs {
  border-bottom: 0;
  gap: 8px;
  padding-top: 8px;
}
.feedback-orbit .method-tabs button {
  background: var(--experience-surface);
  border: 0;
  border-radius: 4px;
  padding: 16px;
}
.feedback-orbit .method-tabs button[aria-selected="true"] {
  background: var(--lime);
  color: var(--black);
}
.feedback-orbit .method-tabs button::after {
  display: none;
}
.feedback-orbit.is-enhanced .weekly-layout {
  min-height: 310px;
}
.experience-review,
.private-review-note {
  padding: 12px 24px;
  font: 13px/1.6 var(--body);
  background: var(--lime);
  color: var(--black);
}
.experience-review {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  background: var(--cream);
}
.experience-review a {
  text-decoration: underline;
}
.experience-review a:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .feedback-orbit.is-enhanced[data-playing="true"] .flow-signal {
    opacity: 1;
    stroke-dasharray: 3 180;
    animation: feedback-travel 2600ms linear infinite;
  }
  .feedback-orbit.is-enhanced[data-playing="true"] .flow-signal[data-flow="1"] {
    animation-delay: -850ms;
  }
  .feedback-orbit.is-enhanced[data-playing="true"] .flow-signal[data-flow="2"] {
    animation-delay: -1700ms;
  }
  @keyframes feedback-travel {
    to {
      stroke-dashoffset: -366;
    }
  }
  .feedback-orbit.is-enhanced[data-playing="true"] .method-coach::after {
    animation: coach-receives 2600ms ease-out infinite;
  }
  @keyframes coach-receives {
    from {
      transform: scale(0.88);
      opacity: 0.9;
    }
    to {
      transform: scale(1.08);
      opacity: 0.2;
    }
  }
  .experience .hero-copy {
    animation: hero-settle 900ms var(--ease-experience) both;
  }
  @keyframes hero-settle {
    from {
      transform: translateY(18px);
    }
    to {
      transform: none;
    }
  }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .experience .hero {
    padding-inline: 40px;
    min-height: 800px;
  }
  .experience .hero h1 {
    max-width: 90%;
    font-size: 42px;
  }
  .experience .hero-details {
    max-width: 80%;
  }
  .hero-film {
    inset-inline-start: 20%;
  }
  .feedback-orbit .method-source {
    padding: 14px;
    gap: 12px;
  }
  .feedback-orbit .method-source p {
    font-size: 14px;
  }
  .feedback-orbit .method-output {
    padding: 20px 16px;
  }
  .feedback-orbit .method-portrait {
    width: 80px;
    height: 80px;
  }
}
@media (max-width: 760px) {
  .experience .hero {
    min-height: 0;
    padding: 0 20px 40px;
    gap: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "details";
  }
  .experience .hero-copy {
    grid-area: photo;
    align-self: end;
    padding: 24px 18px 32px;
  }
  .experience .hero h1 {
    font-size: clamp(28px, 7.5vw, 44px);
    line-height: 1.2;
  }
  .experience .hero-details {
    width: 100%;
    max-width: none;
  }
  .hero-film {
    grid-area: photo;
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(370px, calc(55svh - 76px), 420px);
    width: 100%;
    overflow: hidden;
  }
  .hero-film video {
    object-position: 50% 44%;
  }
  .hero-film::after {
    background: linear-gradient(0deg, #141414fa, #141414e6 38%, #14141426 85%);
  }
  .film-caption {
    bottom: auto;
    top: 16px;
    left: 16px;
    right: auto;
    font-size: 15px;
    padding: 8px 12px;
  }
  .film-toggle {
    bottom: auto;
    top: 16px;
    right: 12px;
    font-size: 13px;
    padding-inline: 12px;
  }
  .experience .hero-description {
    font-size: 16px;
  }
  .feedback-orbit .method-visual {
    height: 680px !important;
  }
  .feedback-orbit .method-sources {
    padding: 0;
    left: 0;
    width: 100%;
  }
  .feedback-orbit .method-source {
    min-height: 120px;
    padding: 14px 10px;
    border-radius: 0 0 8px 8px;
  }
  .feedback-orbit .method-source p {
    font-size: 13px;
  }
  .feedback-orbit .method-coach {
    left: 50%;
    top: 44%;
    padding: 12px;
  }
  .feedback-orbit .method-portrait {
    width: 96px;
    height: 96px;
  }
  .feedback-orbit .method-output {
    left: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    padding: 20px 24px;
    border-radius: 8px;
  }
  .feedback-orbit .method-output > p {
    margin-block: 8px;
    font-size: 24px;
  }
  .feedback-orbit[data-phase] .method-source {
    transform: none;
  }
  .feedback-orbit .method-tabs button {
    font-size: 13px;
  }
  .feedback-orbit.is-enhanced .weekly-layout {
    min-height: 560px;
  }
}
.experience .entry-journey .method-tabs button,
.experience .footer-top > p {
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .experience *,
  .experience *::before,
  .experience *::after {
    animation: none !important;
    transition: none !important;
  }
}