@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");


/* ============================================================
   KRYIA PRE-LAUNCH 2026
   FULLSCREEN MINIMAL — ANIMATED EDITION
============================================================ */


/* ============================================================
   ROOT
============================================================ */

:root {
  --background:
        radial-gradient(circle at 12% 18%, rgba(30, 215, 96, 0.12), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(244, 239, 229, 0.12), transparent 30%),
        radial-gradient(circle at 50% 105%, rgba(240, 138, 55, 0.08), transparent 36%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.78)),
        url("../gradinetgrey.jpg") center / cover fixed no-repeat;
  --background-soft: #0c0c0f;
  --background-light: #111115;

  --surface: rgba(255, 255, 255, 0.025);
  --surface-hover: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.07);

  --text: #f4f2ed;
  --text-soft: rgba(244, 242, 237, 0.72);
  --text-muted: rgba(244, 242, 237, 0.5);
  --text-faint: rgba(244, 242, 237, 0.32);

  --line: rgba(255, 255, 255, 0.095);
  --line-soft: rgba(255, 255, 255, 0.055);
  --line-strong: rgba(255, 255, 255, 0.19);

  --cream: #ede7dc;
  --cream-soft: #d8d0c2;
  --dark: #101012;

  --green: #5ae291;
  --yellow: #efc96a;
  --red: #ff8282;
  --blue: #8eb8ff;
  --purple: #ad99ff;

  --trainee: #8eb8ff;
  --idol: #efc96a;
  --studio: #ad99ff;

  --header-height: 68px;

  --page-width: 1580px;
  --content-width: 1380px;
  --form-width: 1200px;

  --radius-small: 5px;
  --radius-medium: 9px;
  --radius-large: 14px;

  --ease:
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );

  --ease-spring:
    cubic-bezier(
      0.18,
      0.89,
      0.32,
      1.28
    );

  --shadow-large:
    0 42px 130px
    rgba(0, 0, 0, 0.58);

  --shadow-medium:
    0 24px 80px
    rgba(0, 0, 0, 0.34);
}


/* ============================================================
   RESET
============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  width: 100%;
  min-height: 100%;

  scroll-behavior: smooth;
}


body {
  width: 100%;
  min-height: 100%;

  margin: 0;

  overflow: hidden;

  color: var(--text);

  background:
    radial-gradient(
      circle at 84% 4%,
      rgba(120, 78, 101, 0.1),
      transparent 27%
    ),
    radial-gradient(
      circle at 8% 92%,
      rgba(63, 74, 115, 0.08),
      transparent 32%
    ),
    var(--background);

  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 15px;
  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  margin: 0;

  border: 0;

  color: inherit;
}


button:not(:disabled) {
  cursor: pointer;
}


button:disabled {
  cursor: not-allowed;
}


img,
svg {
  display: block;

  max-width: 100%;
}


a {
  color: inherit;
}


h1,
h2,
h3,
h4,
p,
dl,
dd,
ul,
ol {
  margin: 0;
}


ul {
  padding: 0;

  list-style: none;
}


[hidden] {
  display: none !important;
}


::selection {
  color: #101012;

  background: var(--cream);
}


/* ============================================================
   SCROLLBAR
============================================================ */

* {
  scrollbar-width: thin;

  scrollbar-color:
    rgba(255, 255, 255, 0.2)
    transparent;
}


*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}


*::-webkit-scrollbar-track {
  background: transparent;
}


*::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.17
    );
}


*::-webkit-scrollbar-thumb:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.3
    );
}


/* ============================================================
   ACCESSIBILITY
============================================================ */

button:focus-visible,
input:focus-visible,
dialog:focus-visible {
  outline:
    2px solid
    var(--cream);

  outline-offset: 3px;
}


/* ============================================================
   BACKGROUND ANIMATION
============================================================ */

body::before,
body::after {
  content: "";

  position: fixed;

  z-index: -1;

  width: 45vw;
  height: 45vw;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(110px);

  opacity: 0.07;
}


body::before {
  top: -22vw;
  right: -12vw;

  background: var(--purple);

  animation:
    backgroundLightOne
    16s
    ease-in-out
    infinite alternate;
}


body::after {
  bottom: -26vw;
  left: -14vw;

  background: var(--blue);

  animation:
    backgroundLightTwo
    19s
    ease-in-out
    infinite alternate;
}


@keyframes backgroundLightOne {
  from {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        -5vw,
        4vw,
        0
      );
  }
}


@keyframes backgroundLightTwo {
  from {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        6vw,
        -4vw,
        0
      );
  }
}


/* ============================================================
   APP
============================================================ */

.app {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;

  display: grid;

  grid-template-rows:
    var(--header-height)
    minmax(0, 1fr);

  overflow: hidden;
}


/* ============================================================
   TOPBAR
============================================================ */

.topbar {
  position: relative;
  z-index: 100;

  min-width: 0;

  padding:
    0
    clamp(
      20px,
      3vw,
      48px
    );

  display: grid;

  grid-template-columns:
    minmax(170px, 1fr)
    auto
    minmax(170px, 1fr);

  align-items: center;

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(8, 8, 10, 0.168);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);

  animation:
    topbarEntrance
    0.7s
    var(--ease)
    both;
}


@keyframes topbarEntrance {
  from {
    opacity: 0;

    transform:
      translateY(-100%);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


.brand {
  width: max-content;

  display: inline-flex;

  align-items: center;

  gap: 11px;

  padding: 0;

  background: transparent;
}


.brand img {
  width: 36px;
  height: 36px;

  object-fit: contain;

  transition:
    transform
    0.5s
    var(--ease);
}


.brand:hover img {
  transform:
    rotate(-8deg)
    scale(1.08);
}


.brand span {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}


.topbar-step {
  color: var(--text-muted);

  font-size: 1rem;
  font-weight: 600;

  transition:
    opacity
    0.25s ease;
}


.topbar-status {
  justify-self: end;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  max-width: 420px;

  color: var(--text-muted);

  font-size: 0.74rem;
  font-weight: 500;

  text-align: right;
}


.topbar-status > i {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 0 5px
    rgba(90, 226, 145, 0.06),
    0 0 18px
    rgba(90, 226, 145, 0.58);

  animation:
    statusPulse
    2.3s
    ease-in-out
    infinite;
}


@keyframes statusPulse {
  0%,
  100% {
    opacity: 0.48;

    transform:
      scale(0.82);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.08);
  }
}


/* ============================================================
   STAGE
============================================================ */

.stage {
  position: relative;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}


/* ============================================================
   VIEWS
============================================================ */

.view {
  position: absolute;

  inset: 0;

  display: none;

  min-width: 0;
  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  opacity: 0;

  background:
    transparent;
}


.view.is-active {
  display: block;

  opacity: 1;

  animation:
    pageEntrance
    0.56s
    var(--ease)
    both;
}


@keyframes pageEntrance {
  from {
    opacity: 0;

    transform:
      translate3d(
        0,
        18px,
        0
      );
  }

  to {
    opacity: 1;

    transform:
      translate3d(
        0,
        0,
        0
      );
  }
}


/* ============================================================
   SHARED TEXT
============================================================ */

.eyebrow {
  color: var(--text-muted);

  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
}


.page-header h2,
.center-content h2,
.confirmation-copy h2 {
  text-wrap: balance;
}


/* ============================================================
   BUTTONS
============================================================ */

.primary-button,
.secondary-button,
.select-button,
.back-button,
.runtime-plan-details-button,
.runtime-terms-button {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 48px;

  overflow: hidden;

  border-radius: var(--radius-small);

  font-weight: 700;

  transition:
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s var(--ease),
    opacity 0.22s ease;
}


.primary-button {
  padding:
    0 22px;

  color: var(--dark);

  background: var(--cream);
}


.primary-button::before {
  content: "";

  position: absolute;

  top: -70%;
  bottom: -70%;
  left: -35%;

  width: 23%;

  transform:
    skewX(-20deg);

  background:
    rgba(
      255,
      255,
      255,
      0.65
    );

  filter:
    blur(5px);

  transition:
    left
    0.65s
    var(--ease);
}


.primary-button:hover:not(:disabled)::before {
  left: 120%;
}


.primary-button:hover:not(:disabled) {
  background: #fff;

  box-shadow:
    0 14px 38px
    rgba(237, 231, 220, 0.12);

  transform:
    translateY(-2px);
}


.primary-button:active:not(:disabled) {
  transform:
    translateY(0);
}


.primary-button:disabled {
  opacity: 0.5;
}


.secondary-button {
  padding:
    0 17px;

  color: var(--text-soft);

  border:
    1px solid
    var(--line-strong);

  background: transparent;
}


.secondary-button:hover:not(:disabled) {
  color: var(--text);

  border-color:
    rgba(
      255,
      255,
      255,
      0.34
    );

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  transform:
    translateY(-2px);
}


.secondary-button:disabled {
  opacity: 0.45;
}


/* ============================================================
   INTRO
============================================================ */

.intro-view.is-active {
  display: grid;

  grid-template-columns:
    minmax(0, 1.23fr)
    minmax(430px, 0.77fr);

  overflow: hidden;

  background: var(--background);
}


/* ============================================================
   INTRO MEDIA
============================================================ */

.intro-media {
  position: relative;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  background: #111115;
}


.intro-media > img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(0.85)
    contrast(1.04)
    brightness(0.91);

  transform:
    scale(1);

  animation:
    introImageEntrance
    1.3s
    var(--ease)
    both;
}


@keyframes introImageEntrance {
  from {
    opacity: 0;

    filter:
      saturate(0.4)
      contrast(1.02)
      brightness(0.65);
  }

  to {
    opacity: 1;

    filter:
      saturate(0.85)
      contrast(1.04)
      brightness(0.91);
  }
}


.intro-media-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 9, 0.02),
      rgba(7, 7, 9, 0.1) 55%,
      rgba(7, 7, 9, 0.48)
    ),
    linear-gradient(
      0deg,
      rgba(7, 7, 9, 0.72),
      transparent 52%
    );

  animation:
    shadeEntrance
    1.3s
    ease both;
}


@keyframes shadeEntrance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.intro-media-brand {
  position: absolute;

  top:
    clamp(
      24px,
      3vw,
      45px
    );

  left:
    clamp(
      24px,
      3vw,
      45px
    );

  display: flex;

  align-items: center;

  gap: 11px;

  color:
    rgba(
      255,
      255,
      255,
      0.8
    );

  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;

  animation:
    mediaInformationEntrance
    0.7s
    0.35s
    var(--ease)
    both;
}


.intro-media-brand img {
  width: 42px;
  height: 42px;

  object-fit: contain;
}


.intro-media-caption {
  position: absolute;

  right:
    clamp(
      24px,
      3vw,
      45px
    );

  bottom:
    clamp(
      24px,
      3vw,
      45px
    );

  left:
    clamp(
      24px,
      3vw,
      45px
    );

  max-width: 560px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size: 0.84rem;
  line-height: 1.65;

  animation:
    mediaInformationEntrance
    0.7s
    0.48s
    var(--ease)
    both;
}


@keyframes mediaInformationEntrance {
  from {
    opacity: 0;

    transform:
      translateY(14px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* ============================================================
   INTRO COPY
============================================================ */

.intro-copy {
  position: relative;

  min-width: 0;
  min-height: 0;

  padding:
    clamp(
      42px,
      5vw,
      80px
    );

  display: flex;

  align-items: center;

  background:
        url("fundo.jpg") center / cover fixed no-repeat;
}


.intro-copy::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 1px;

  background: var(--line);
}


.intro-copy-inner {
  width:
    min(
      100%,
      590px
    );

  margin:
    auto 0;
}


.intro-copy .eyebrow {
  animation:
    copyEntrance
    0.62s
    0.1s
    var(--ease)
    both;
}


.intro-copy h1 {
  margin-top: 18px;

  font-size:
    clamp(
      3.15rem,
      4.8vw,
      5.6rem
    );

  font-weight: 700;
  letter-spacing: -0.073em;
  line-height: 0.92;

  animation:
    copyEntrance
    0.72s
    0.18s
    var(--ease)
    both;
}


.intro-copy h1 span {
  color: var(--cream-soft);
}


.intro-text {
  max-width: 535px;

  margin-top: 24px;

  color: var(--text-soft);

  font-size:
    clamp(
      0.94rem,
      1.1vw,
      1.04rem
    );

  line-height: 1.72;

  animation:
    copyEntrance
    0.72s
    0.27s
    var(--ease)
    both;
}


.intro-button {
  min-width: 200px;

  margin-top: 29px;

  animation:
    copyEntrance
    0.72s
    0.42s
    var(--ease)
    both;
}


.intro-meta {
  margin-top: 23px;

  padding-top: 18px;

  display: flex;

  flex-wrap: wrap;

  gap:
    9px 22px;

  border-top:
    1px solid
    var(--line);

  color: var(--text-muted);

  font-size: 0.71rem;

  animation:
    copyEntrance
    0.72s
    0.52s
    var(--ease)
    both;
}


@keyframes copyEntrance {
  from {
    opacity: 0;

    transform:
      translateY(20px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* ============================================================
   COUNTDOWN
============================================================ */

body .runtime-countdown {
  margin:
    25px 0 0;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  animation:
    copyEntrance
    0.72s
    0.34s
    var(--ease)
    both;
}


body .runtime-countdown > div {
  min-width: 0;

  padding:
    14px 7px;

  text-align: center;

  border-right:
    1px solid
    var(--line);

  transition:
    background
    0.25s ease;
}


body .runtime-countdown > div:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.025
    );
}


body .runtime-countdown > div:last-child {
  border-right: 0;
}


body .runtime-countdown strong {
  display: block;

  color: var(--text);

  font-size:
    clamp(
      1.35rem,
      1.9vw,
      1.9rem
    );

  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
}


body .runtime-countdown span {
  display: block;

  margin-top: 6px;

  color: var(--text-muted);

  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


body .runtime-progress {
  height: 3px;

  margin:
    -1px 0 24px;

  overflow: hidden;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );
}


body .runtime-progress > span {
  position: relative;

  display: block;

  width: 0;
  height: 100%;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      var(--cream-soft),
      #fff
    );

  transition:
    width
    0.8s
    var(--ease);
}


body .runtime-progress > span::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: -70px;

  width: 70px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );

  animation:
    progressLight
    2.6s linear
    infinite;
}


@keyframes progressLight {
  to {
    left:
      calc(
        100% + 70px
      );
  }
}


/* ============================================================
   PAGE VIEW
============================================================ */

.page-view {
  background:
    radial-gradient(
      circle at 91% 2%,
      rgba(112, 78, 99, 0.08),
      transparent 27%
    ),
    var(--background);
}


.page-wrap {
  width:
    min(
      var(--page-width),
      calc(100% - 84px)
    );

  min-height: 100%;

  margin: 0 auto;

  padding:
    clamp(
      38px,
      4vw,
      62px
    )
    0
    78px;
}


/* ============================================================
   PAGE HEADER
============================================================ */

.page-header {
  display: grid;

  grid-template-columns:
    120px
    minmax(0, 1fr)
    minmax(280px, 400px);

  align-items: start;

  gap:
    clamp(
      25px,
      3.5vw,
      50px
    );

  padding-bottom: 33px;

  border-bottom:
    1px solid
    var(--line);
}


.page-header > * {
  animation:
    sectionEntrance
    0.58s
    var(--ease)
    both;
}


.page-header > *:nth-child(2) {
  animation-delay: 0.08s;
}


.page-header > *:nth-child(3) {
  animation-delay: 0.16s;
}


@keyframes sectionEntrance {
  from {
    opacity: 0;

    transform:
      translateY(17px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


.page-header h2 {
  max-width: 810px;

  margin-top: 8px;

  font-size:
    clamp(
      2.4rem,
      3.8vw,
      4.4rem
    );

  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 0.98;
}


.page-header-note {
  padding-top: 2px;

  color: var(--text-soft);

  font-size: 0.84rem;
  line-height: 1.68;
}


.back-button {
  width: max-content;
  min-height: 39px;

  padding:
    0 14px;

  justify-self: start;

  color: var(--text-soft);

  border:
    1px solid
    var(--line);

  background: transparent;

  font-size: 0.74rem;
}


.back-button:hover {
  color: var(--text);

  border-color: var(--line-strong);

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  transform:
    translateX(-2px);
}


.compact-header {
  grid-template-columns:
    120px
    minmax(0, 1fr);
}


/* ============================================================
   PLANS
============================================================ */

.plan-grid {
  margin-top: 34px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    var(--line);

  border-left:
    1px solid
    var(--line);
}


/* ============================================================
   PLAN CARD
============================================================ */

.plan {
  position: relative;

  min-width: 0;
  min-height: 615px;

  padding:
    clamp(
      24px,
      2.2vw,
      33px
    );

  display: flex;

  flex-direction: column;

  gap: 22px;

  overflow: hidden;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(
      255,
      255,
      255,
      0.012
    );

  transition:
    background
    0.3s ease,
    border-color
    0.3s ease,
    box-shadow
    0.3s ease,
    transform
    0.3s var(--ease);

  animation:
    planEntrance
    0.62s
    var(--ease)
    both;
}


.plan:nth-child(1) {
  animation-delay: 0.08s;
}


.plan:nth-child(2) {
  animation-delay: 0.17s;
}


.plan:nth-child(3) {
  animation-delay: 0.26s;
}


@keyframes planEntrance {
  from {
    opacity: 0;

    transform:
      translateY(28px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


.plan::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;
  left: 0;

  height: 2px;

  opacity: 0;

  background: var(--cream);

  transform:
    scaleX(0);

  transform-origin: left;

  transition:
    opacity
    0.3s ease,
    transform
    0.5s
    var(--ease);
}


.plan[data-plan-card="trainee"]::before {
  background: var(--trainee);
}


.plan[data-plan-card="idol"]::before {
  background: var(--idol);
}


.plan[data-plan-card="studio"]::before {
  background: var(--studio);
}


.plan:hover {
  z-index: 2;

  background:
    rgba(
      255,
      255,
      255,
      0.026
    );

  box-shadow:
    0 24px 75px
    rgba(0, 0, 0, 0.3);

  transform:
    translateY(-5px);
}


.plan:hover::before,
.plan.is-selected::before {
  opacity: 1;

  transform:
    scaleX(1);
}


.plan.is-selected {
  background:
    rgba(
      255,
      255,
      255,
      0.04
    );
}


/* ============================================================
   FEATURED PLAN
============================================================ */

.plan-featured {
  color: var(--dark);

  background: var(--cream);
}


.plan-featured:hover {
  background: #f4efe6;
}


.plan-featured.is-selected {
  background: #f5f0e7;
}


.recommended {
  position: absolute;

  top: 0;
  right: 0;

  padding:
    7px 11px;

  color: #121214;

  background: var(--yellow);

  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.12em;

  animation:
    recommendedEntrance
    0.55s
    0.5s
    var(--ease-spring)
    both;
}


@keyframes recommendedEntrance {
  from {
    opacity: 0;

    transform:
      translateY(-100%);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* ============================================================
   PLAN HEAD
============================================================ */

.plan-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;
}


.plan-icon {
  width: 43px;
  height: 43px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    currentColor;

  border-radius: 50%;

  font-size: 0.9rem;

  opacity: 0.82;

  transition:
    transform
    0.42s
    var(--ease-spring);
}


.plan:hover .plan-icon {
  transform:
    rotate(-8deg)
    scale(1.08);
}


.plan-spots {
  max-width: 175px;

  color: var(--text-muted);

  font-size: 0.68rem;
  line-height: 1.45;
  text-align: right;

  transition:
    color
    0.25s ease;
}


.plan:hover .plan-spots {
  color: var(--text-soft);
}


.plan-featured .plan-spots {
  color:
    rgba(
      16,
      16,
      18,
      0.53
    );
}


/* ============================================================
   PLAN IDENTITY
============================================================ */

.plan-label {
  color: var(--text-muted);

  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}


.plan-featured .plan-label {
  color:
    rgba(
      16,
      16,
      18,
      0.49
    );
}


.plan h3 {
  margin-top: 7px;

  font-size:
    clamp(
      2rem,
      2.6vw,
      2.75rem
    );

  font-weight: 650;
  letter-spacing: -0.06em;
  line-height: 1;
}


.plan-description {
  min-height: 65px;

  margin-top: 10px;

  color: var(--text-soft);

  font-size: 0.86rem;
  line-height: 1.6;
}


.plan-featured .plan-description {
  color:
    rgba(
      16,
      16,
      18,
      0.66
    );
}


/* ============================================================
   PLAN PRICE
============================================================ */

.plan-price {
  display: grid;

  gap: 4px;
}


.plan-price strong {
  font-size:
    clamp(
      1.9rem,
      2.5vw,
      2.55rem
    );

  font-weight: 650;
  letter-spacing: -0.055em;
}


.plan-price span {
  color: var(--text-muted);

  font-size: 0.7rem;
}


.plan-featured .plan-price span {
  color:
    rgba(
      16,
      16,
      18,
      0.5
    );
}


/* ============================================================
   OFFER INFORMATION
============================================================ */

.plan-offer {
  position: relative;

  padding:
    16px 0 16px 15px;

  display: grid;

  gap: 5px;

  overflow: hidden;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.plan-offer::before {
  content: "";

  position: absolute;

  top: 15px;
  bottom: 15px;
  left: 0;

  width: 2px;

  background: var(--cream);

  opacity: 0.7;

  animation:
    offerLinePulse
    2.6s ease-in-out
    infinite;
}


.plan[data-plan-card="trainee"] .plan-offer::before {
  background: var(--trainee);
}


.plan[data-plan-card="idol"] .plan-offer::before {
  background: var(--idol);
}


.plan[data-plan-card="studio"] .plan-offer::before {
  background: var(--studio);
}


.plan-featured .plan-offer {
  border-color:
    rgba(
      16,
      16,
      18,
      0.16
    );
}


@keyframes offerLinePulse {
  0%,
  100% {
    opacity: 0.38;
  }

  50% {
    opacity: 1;
  }
}


.plan-offer span,
.plan-offer small {
  color: var(--text-muted);

  font-size: 0.66rem;
  line-height: 1.45;
}


.plan-featured .plan-offer span,
.plan-featured .plan-offer small {
  color:
    rgba(
      16,
      16,
      18,
      0.52
    );
}


.plan-offer strong {
  display: block;

  color: var(--text);

  font-size: 0.9rem;
  line-height: 1.45;
}


.plan-featured .plan-offer strong {
  color: var(--dark);
}


/* ============================================================
   PLAN FEATURES
============================================================ */

.plan ul {
  flex: 1;

  display: grid;

  align-content: start;

  gap: 10px;

  color: var(--text-soft);

  font-size: 0.79rem;
  line-height: 1.48;
}


.plan-featured ul {
  color:
    rgba(
      16,
      16,
      18,
      0.69
    );
}


.plan li {
  position: relative;

  padding-left: 17px;
}


.plan li::before {
  content: "";

  position: absolute;

  top: 0.72em;
  left: 0;

  width: 7px;
  height: 1px;

  background: currentColor;

  opacity: 0.5;

  transition:
    width
    0.25s ease;
}


.plan li:hover::before {
  width: 11px;
}


/* ============================================================
   PLAN ACTIONS
============================================================ */

body .runtime-plan-details-button {
  width: 100%;
  min-height: 42px;

  margin-top: 1px;

  padding:
    0 15px;

  color: var(--text-soft);

  border:
    1px solid
    var(--line);

  background: transparent;

  font-size: 0.73rem;
}


body .runtime-plan-details-button:hover {
  color: var(--text);

  border-color: var(--line-strong);

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  transform:
    translateY(-2px);
}


body .plan-featured .runtime-plan-details-button {
  color:
    rgba(
      16,
      16,
      18,
      0.68
    );

  border-color:
    rgba(
      16,
      16,
      18,
      0.18
    );
}


body .plan-featured .runtime-plan-details-button:hover {
  color: #101012;

  border-color:
    rgba(
      16,
      16,
      18,
      0.36
    );

  background:
    rgba(
      16,
      16,
      18,
      0.05
    );
}


.select-button {
  width: 100%;
  min-height: 48px;

  margin-top: 0;

  padding:
    0 17px;

  justify-content: space-between;

  color: var(--text);

  border:
    1px solid
    var(--line-strong);

  background: transparent;

  font-size: 0.78rem;
}


.select-button:hover {
  border-color:
    rgba(
      255,
      255,
      255,
      0.36
    );

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  transform:
    translateY(-2px);
}


.select-button-light {
  color: var(--dark);

  border-color:
    rgba(
      16,
      16,
      18,
      0.24
    );
}


.select-button-light:hover {
  border-color:
    rgba(
      16,
      16,
      18,
      0.45
    );

  background:
    rgba(
      16,
      16,
      18,
      0.06
    );
}


/* ============================================================
   LAUNCH NOTE
============================================================ */

.launch-note {
  padding:
    23px 0;

  display: grid;

  grid-template-columns:
    230px
    minmax(0, 1fr);

  gap: 28px;

  border-bottom:
    1px solid
    var(--line);

  animation:
    sectionEntrance
    0.58s
    0.28s
    var(--ease)
    both;
}


.launch-note strong {
  font-size: 0.86rem;
}


.launch-note span {
  max-width: 850px;

  color: var(--text-soft);

  font-size: 0.81rem;
  line-height: 1.62;
}


/* ============================================================
   REGISTRATION
============================================================ */

.register-wrap {
  width:
    min(
      var(--form-width),
      calc(100% - 84px)
    );
}


.register-layout {
  margin-top: 36px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    360px;

  align-items: start;

  gap:
    clamp(
      42px,
      5vw,
      72px
    );
}


.registration-form {
  min-width: 0;

  animation:
    registrationEntrance
    0.62s
    0.1s
    var(--ease)
    both;
}


@keyframes registrationEntrance {
  from {
    opacity: 0;

    transform:
      translateX(-22px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}


.form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 21px;
}


.field {
  display: grid;

  gap: 8px;
}


.field:nth-child(1) {
  animation:
    fieldEntrance
    0.5s
    0.17s
    var(--ease)
    both;
}


.field:nth-child(2) {
  animation:
    fieldEntrance
    0.5s
    0.24s
    var(--ease)
    both;
}


.field:nth-child(3) {
  animation:
    fieldEntrance
    0.5s
    0.31s
    var(--ease)
    both;
}


.field:nth-child(4) {
  animation:
    fieldEntrance
    0.5s
    0.38s
    var(--ease)
    both;
}


@keyframes fieldEntrance {
  from {
    opacity: 0;

    transform:
      translateY(14px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


.field-full {
  grid-column:
    1 / -1;
}


.field > span {
  color: var(--text-soft);

  font-size: 0.76rem;
  font-weight: 600;
}


.field input {
  width: 100%;
  min-height: 52px;

  padding:
    0 15px;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-small);

  outline: 0;

  color: var(--text);

  background:
    rgba(
      255,
      255,
      255,
      0.023
    );

  font-size: 0.9rem;

  transition:
    border-color
    0.22s ease,
    background
    0.22s ease,
    box-shadow
    0.22s ease,
    transform
    0.22s ease;
}


.field input::placeholder {
  color: var(--text-faint);
}


.field input:hover {
  border-color:
    rgba(
      255,
      255,
      255,
      0.21
    );

  background:
    rgba(
      255,
      255,
      255,
      0.03
    );
}


.field input:focus {
  border-color:
    rgba(
      255,
      255,
      255,
      0.5
    );

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  box-shadow:
    0 0 0 3px
    rgba(
      255,
      255,
      255,
      0.045
    );

  transform:
    translateY(-1px);
}


.field input.is-invalid {
  border-color:
    rgba(
      255,
      130,
      130,
      0.82
    );

  box-shadow:
    0 0 0 3px
    rgba(
      255,
      130,
      130,
      0.06
    );

  animation:
    invalidShake
    0.35s ease;
}


@keyframes invalidShake {
  25% {
    transform:
      translateX(-4px);
  }

  50% {
    transform:
      translateX(4px);
  }

  75% {
    transform:
      translateX(-2px);
  }
}


.field input[type="date"] {
  color-scheme: dark;
}


.field small {
  color: var(--text-muted);

  font-size: 0.66rem;
  line-height: 1.5;
}


/* ============================================================
   AUTOFILL
============================================================ */

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);

  box-shadow:
    0 0 0 1000px
    #111115
    inset;

  transition:
    background-color
    9999s ease-in-out 0s;
}


/* ============================================================
   TERMS BUTTON
============================================================ */

body .runtime-terms-button {
  width: 100%;
  min-height: 46px;

  margin-top: 25px;

  padding:
    0 15px;

  justify-content: flex-start;

  color: var(--text-soft);

  border:
    1px solid
    var(--line);

  background:
    rgba(
      255,
      255,
      255,
      0.015
    );

  font-size: 0.75rem;
}


body .runtime-terms-button:hover {
  color: var(--text);

  border-color: var(--line-strong);

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  transform:
    translateY(-2px);
}


/* ============================================================
   TERMS CHECKBOX
============================================================ */

.terms {
  position: relative;

  margin-top: 21px;

  padding:
    3px 0;

  display: grid;

  grid-template-columns:
    23px
    minmax(0, 1fr);

  gap: 12px;

  color: var(--text-soft);

  font-size: 0.75rem;
  line-height: 1.62;

  cursor: pointer;
}


.terms input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}


.check {
  width: 23px;
  height: 23px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-small);

  color: transparent;

  background: transparent;

  transition:
    color
    0.22s ease,
    background
    0.22s ease,
    border-color
    0.22s ease,
    transform
    0.22s
    var(--ease-spring);
}


.terms:hover .check {
  border-color:
    rgba(
      255,
      255,
      255,
      0.34
    );
}


.terms input:checked + .check {
  color: #111113;

  border-color: var(--cream);

  background: var(--cream);

  transform:
    scale(1.06);
}


.terms input:focus-visible + .check {
  outline:
    2px solid
    var(--cream);

  outline-offset: 3px;
}


.terms.is-invalid {
  padding: 12px;

  border:
    1px solid
    rgba(
      255,
      130,
      130,
      0.48
    );

  background:
    rgba(
      255,
      130,
      130,
      0.035
    );
}


/* ============================================================
   FORM MESSAGE
============================================================ */

.form-message {
  display: none;

  margin-top: 18px;

  padding:
    13px 15px;

  border-left:
    3px solid
    var(--red);

  color: var(--text-soft);

  background:
    rgba(
      255,
      130,
      130,
      0.055
    );

  font-size: 0.77rem;
  line-height: 1.58;
}


.form-message.is-visible {
  display: block;

  animation:
    messageEntrance
    0.34s
    var(--ease)
    both;
}


@keyframes messageEntrance {
  from {
    opacity: 0;

    transform:
      translateY(-7px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


body .form-message.error {
  border-color: var(--red);
}


body .form-message.warning {
  border-color: var(--yellow);

  background:
    rgba(
      239,
      201,
      106,
      0.055
    );
}


body .form-message.success {
  border-color: var(--green);

  background:
    rgba(
      90,
      226,
      145,
      0.055
    );
}


/* ============================================================
   SUBMIT
============================================================ */

.submit-button {
  width: 100%;
  min-height: 56px;

  margin-top: 22px;

  padding:
    0 19px;

  justify-content: space-between;
}


.submit-button > span {
  position: relative;
  z-index: 2;

  font-size: 0.82rem;
}


.secure-caption {
  margin-top: 11px;

  color: var(--text-muted);

  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
}


/* ============================================================
   SUMMARY
============================================================ */

.selection-summary {
  position: sticky;

  top: 26px;

  align-self: start;

  min-width: 0;

  padding-left:
    clamp(
      26px,
      3.5vw,
      43px
    );

  border-left:
    1px solid
    var(--line);

  animation:
    summaryEntrance
    0.62s
    0.18s
    var(--ease)
    both;
}


@keyframes summaryEntrance {
  from {
    opacity: 0;

    transform:
      translateX(22px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}


.summary-plan-line {
  margin-top: 19px;

  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr);

  align-items: center;

  gap: 13px;
}


.summary-icon {
  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--line-strong);

  border-radius: 50%;

  font-size: 0.87rem;

  transition:
    transform
    0.35s
    var(--ease-spring);
}


.summary-plan-line:hover .summary-icon {
  transform:
    rotate(-7deg)
    scale(1.08);
}


.summary-plan-line > div {
  min-width: 0;

  display: grid;

  gap: 3px;
}


.summary-plan-line strong {
  font-size: 1rem;
}


.summary-plan-line span {
  color: var(--text-muted);

  font-size: 0.71rem;
}


.summary-list {
  margin-top: 24px;

  display: grid;
}


.summary-list > div {
  padding:
    14px 0;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  border-bottom:
    1px solid
    var(--line);

  font-size: 0.75rem;
}


.summary-list dt {
  color: var(--text-muted);
}


.summary-list dd {
  max-width: 60%;

  color: var(--text-soft);

  text-align: right;
  overflow-wrap: anywhere;
}


.summary-list .summary-total {
  margin-top: 10px;

  padding-top: 18px;

  border-bottom: 0;

  font-size: 0.92rem;
}


.summary-list .summary-total dt {
  color: var(--text-soft);
}


.summary-list .summary-total dd {
  color: var(--text);

  font-weight: 750;
}


.summary-policy {
  margin-top: 20px;

  color: var(--text-muted);

  font-size: 0.69rem;
  line-height: 1.6;
}


/* ============================================================
   CENTER VIEWS
============================================================ */

.center-view.is-active {
  display: grid;

  place-items: center;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.025),
      transparent 45%
    ),
    var(--background);
}


.center-content {
  width:
    min(
      670px,
      calc(100% - 42px)
    );

  padding:
    58px 0;

  text-align: center;
}


.center-content > * {
  animation:
    centerContentEntrance
    0.58s
    var(--ease)
    both;
}


.center-content > *:nth-child(2) {
  animation-delay: 0.08s;
}


.center-content > *:nth-child(3) {
  animation-delay: 0.15s;
}


.center-content > *:nth-child(4) {
  animation-delay: 0.22s;
}


@keyframes centerContentEntrance {
  from {
    opacity: 0;

    transform:
      translateY(18px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


.center-content h2 {
  margin-top: 12px;

  font-size:
    clamp(
      2.6rem,
      4.8vw,
      5rem
    );

  font-weight: 650;
  letter-spacing: -0.07em;
  line-height: 0.95;
}


.center-content > p:not(.eyebrow) {
  max-width: 550px;

  margin:
    17px auto 0;

  color: var(--text-soft);

  font-size: 0.88rem;
  line-height: 1.7;
}


/* ============================================================
   PROCESSING SPINNER
============================================================ */

.spinner {
  position: relative;

  width: 58px;
  height: 58px;

  margin:
    0 auto 25px;

  display: block;

  border:
    2px solid
    var(--line);

  border-top-color: var(--cream);

  border-radius: 50%;

  animation:
    spinnerRotation
    0.8s linear
    infinite;
}


.spinner::after {
  content: "";

  position: absolute;

  inset: 8px;

  border:
    1px solid
    var(--line);

  border-right-color: var(--purple);

  border-radius: 50%;

  animation:
    spinnerRotationReverse
    1.25s linear
    infinite;
}


@keyframes spinnerRotation {
  to {
    transform:
      rotate(360deg);
  }
}


@keyframes spinnerRotationReverse {
  to {
    transform:
      rotate(-360deg);
  }
}


/* ============================================================
   PROCESSING STEPS
============================================================ */

body .runtime-processing-steps {
  width:
    min(
      540px,
      100%
    );

  margin:
    27px auto 0;

  display: grid;

  gap: 8px;

  text-align: left;
}


body .runtime-processing-step {
  position: relative;

  min-height: 51px;

  padding:
    11px 14px;

  display: flex;

  align-items: center;

  gap: 12px;

  overflow: hidden;

  border:
    1px solid
    var(--line);

  color: var(--text-muted);

  background:
    rgba(
      255,
      255,
      255,
      0.012
    );

  font-size: 0.75rem;

  transition:
    color
    0.25s ease,
    border-color
    0.25s ease,
    background
    0.25s ease,
    transform
    0.25s
    var(--ease);
}


body .runtime-processing-step > i {
  width: 25px;

  flex: 0 0 auto;

  text-align: center;
}


body .runtime-processing-step.is-active {
  color: var(--text);

  border-color:
    rgba(
      255,
      255,
      255,
      0.28
    );

  background:
    rgba(
      255,
      255,
      255,
      0.034
    );

  transform:
    translateX(4px);
}


body .runtime-processing-step.is-active::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: -90px;

  width: 90px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent
    );

  animation:
    processingLight
    1.8s linear
    infinite;
}


@keyframes processingLight {
  to {
    left:
      calc(
        100% + 90px
      );
  }
}


body .runtime-processing-step.is-complete {
  color: var(--green);

  border-color:
    rgba(
      90,
      226,
      145,
      0.25
    );

  transform:
    translateX(0);
}


body .runtime-processing-step.is-error {
  color: var(--red);

  border-color:
    rgba(
      255,
      130,
      130,
      0.3
    );
}


/* ============================================================
   VERIFY / SUCCESS / STATUS ICONS
============================================================ */

.verify-icon,
.success-icon,
.status-icon {
  width: 62px;
  height: 62px;

  margin:
    0 auto 25px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--line-strong);

  border-radius: 50%;

  color: var(--cream);

  font-size: 1.05rem;

  animation:
    iconEntrance
    0.65s
    var(--ease-spring)
    both;
}


@keyframes iconEntrance {
  from {
    opacity: 0;

    transform:
      scale(0.68)
      rotate(-12deg);
  }

  to {
    opacity: 1;

    transform:
      scale(1)
      rotate(0);
  }
}


.verify-icon {
  animation:
    verificationPulse
    2.2s
    ease-in-out
    infinite;
}


@keyframes verificationPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0
      rgba(237, 231, 220, 0);
  }

  50% {
    box-shadow:
      0 0 0 10px
      rgba(237, 231, 220, 0.045);
  }
}


.success-icon {
  color: var(--green);

  border-color:
    rgba(
      90,
      226,
      145,
      0.3
    );

  background:
    rgba(
      90,
      226,
      145,
      0.045
    );
}


.status-icon.error {
  color: var(--red);

  border-color:
    rgba(
      255,
      130,
      130,
      0.32
    );
}


.status-icon.warning {
  color: var(--yellow);

  border-color:
    rgba(
      239,
      201,
      106,
      0.32
    );
}


.status-icon.success {
  color: var(--green);

  border-color:
    rgba(
      90,
      226,
      145,
      0.32
    );
}


/* ============================================================
   VERIFICATION PROGRESS
============================================================ */

.verification-progress {
  width:
    min(
      460px,
      100%
    );

  height: 4px;

  margin:
    30px auto 0;

  overflow: hidden;

  background:
    rgba(
      255,
      255,
      255,
      0.09
    );
}


.verification-progress span {
  position: relative;

  display: block;

  width: 12%;
  height: 100%;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      var(--cream-soft),
      #fff
    );

  transition:
    width
    0.45s
    var(--ease);
}


.verification-progress span::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: -60px;

  width: 60px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.85),
      transparent
    );

  animation:
    progressLight
    1.7s linear
    infinite;
}


#verifyButton {
  margin-top: 25px;
}


/* ============================================================
   STATUS
============================================================ */

.status-detail {
  display: block;

  max-width: 550px;

  margin:
    16px auto 0;

  color: var(--text-muted);

  font-size: 0.72rem;
  line-height: 1.62;
}


.status-button {
  margin-top: 23px;
}


#statusSecondaryButton {
  margin-right: 8px;
}


/* ============================================================
   CONFIRMATION
============================================================ */

.confirmation-wrap {
  width:
    min(
      1220px,
      calc(100% - 84px)
    );

  min-height: 100%;

  margin: 0 auto;

  padding:
    clamp(
      43px,
      5vw,
      75px
    )
    0;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(400px, 465px);

  align-items: center;

  gap:
    clamp(
      48px,
      6vw,
      82px
    );
}


.confirmation-copy {
  min-width: 0;

  animation:
    confirmationCopyEntrance
    0.65s
    var(--ease)
    both;
}


@keyframes confirmationCopyEntrance {
  from {
    opacity: 0;

    transform:
      translateX(-28px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}


.confirmation-copy .success-icon {
  margin-left: 0;
}


.confirmation-copy h2 {
  max-width: 690px;

  margin-top: 14px;

  font-size:
    clamp(
      3rem,
      5vw,
      5.6rem
    );

  font-weight: 650;
  letter-spacing: -0.075em;
  line-height: 0.92;
}


.confirmation-copy > p:not(.eyebrow) {
  max-width: 590px;

  margin-top: 21px;

  color: var(--text-soft);

  font-size: 0.9rem;
  line-height: 1.72;
}


.confirmation-actions {
  margin-top: 25px;

  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}


.confirmation-actions .secondary-button {
  margin-top: 0;
}


/* ============================================================
   RECEIPT
============================================================ */

.receipt {
  min-width: 0;

  padding:
    clamp(
      23px,
      2.7vw,
      32px
    );

  border:
    1px solid
    var(--line-strong);

  background:
    rgba(
      255,
      255,
      255,
      0.024
    );

  box-shadow:
    var(--shadow-medium);

  animation:
    receiptEntrance
    0.7s
    0.15s
    var(--ease)
    both;
}


@keyframes receiptEntrance {
  from {
    opacity: 0;

    transform:
      translateX(30px)
      rotateY(-4deg);
  }

  to {
    opacity: 1;

    transform:
      translateX(0)
      rotateY(0);
  }
}


.receipt-head {
  padding-bottom: 20px;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  border-bottom:
    1px solid
    var(--line);
}


.receipt-head > div {
  display: grid;

  gap: 4px;
}


.receipt-head p {
  color: var(--text-muted);

  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}


.receipt-head strong {
  font-size: 0.96rem;
}


.receipt-head > span {
  color: var(--green);

  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.11em;

  animation:
    paidPulse
    2.2s
    ease-in-out
    infinite;
}


@keyframes paidPulse {
  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}


.receipt dl {
  display: grid;
}


.receipt dl > div {
  padding:
    12px 0;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 21px;

  border-bottom:
    1px solid
    var(--line);

  font-size: 0.72rem;
  line-height: 1.48;

  transition:
    background
    0.2s ease,
    padding
    0.2s ease;
}


.receipt dl > div:hover {
  padding-right: 6px;
  padding-left: 6px;

  background:
    rgba(
      255,
      255,
      255,
      0.018
    );
}


.receipt dt {
  flex: 0 0 auto;

  color: var(--text-muted);
}


.receipt dd {
  max-width: 65%;

  color: var(--text-soft);

  text-align: right;
  overflow-wrap: anywhere;
}


.receipt .receipt-id {
  padding-top: 17px;

  border-bottom: 0;
}


.receipt .receipt-id dd {
  color: var(--text);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 0.68rem;
}


/* ============================================================
   TOAST
============================================================ */

body .runtime-toast {
  position: fixed;

  left: 50%;
  bottom: 22px;

  z-index: 10000;

  width:
    min(
      600px,
      calc(100% - 32px)
    );

  padding:
    14px 16px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    20px
    var(--radius-medium);

  color: var(--text);

  background:
    rgba(12, 12, 15, 0.442);

  box-shadow:
    var(--shadow-large);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  font-size: 0.8rem;
  line-height: 1.52;

  transform:
    translate(
      -50%,
      24px
    );

  opacity: 0;
  visibility: hidden;

  transition:
    opacity
    0.28s ease,
    transform
    0.28s
    var(--ease),
    visibility
    0.28s ease;
}


body .runtime-toast.is-visible {
  opacity: 1;
  visibility: visible;

  transform:
    translate(
      -50%,
      0
    );
}


body .runtime-toast.success {
  border-color:
    rgba(24, 32, 27, 0.108);
}


body .runtime-toast.warning {
  border-color:
    rgba(23, 21, 17, 0.103);
}


body .runtime-toast.error {
  border-color:
    rgba(
      255,
      130,
      130,
      0.42
    );
}


/* ============================================================
   MODAL
============================================================ */

body dialog.runtime-modal {
  width:
    min(
      800px,
      calc(100% - 32px)
    );

  max-height:
    min(
      86dvh,
      870px
    );

  margin: auto;

  padding: 0;

  overflow: hidden;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-large);

  color: var(--text);

  background: #0e0e1138;
  backdrop-filter: blur(24px) saturate(1.12);

  box-shadow:
    0 45px 150px
    rgba(
      0,
      0,
      0,
      0.72
    );

  animation:
    modalEntrance
    0.38s
    var(--ease)
    both;
}


@keyframes modalEntrance {
  from {
    opacity: 0;

    transform:
      translateY(22px)
      scale(0.97);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


body dialog.runtime-modal::backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.74
    );

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);

  animation:
    backdropEntrance
    0.3s ease both;
}


@keyframes backdropEntrance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


body .runtime-modal-head {
  min-height: 66px;

  padding:
    0 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(
      255,
      255,
      255,
      0.014
    );
}


body .runtime-modal-head strong {
  font-size: 0.92rem;
}


body .runtime-modal-close {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-small);

  color: var(--text-soft);

  background: transparent;

  transition:
    color
    0.2s ease,
    border-color
    0.2s ease,
    background
    0.2s ease,
    transform
    0.3s
    var(--ease-spring);
}


body .runtime-modal-close:hover {
  color: var(--text);

  border-color: var(--line-strong);

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  transform:
    rotate(90deg);
}


body .runtime-modal-body {
  max-height:
    calc(
      86dvh - 67px
    );

  padding:
    clamp(
      23px,
      3.5vw,
      38px
    );

  overflow-y: auto;
}


body .runtime-modal-body h3 {
  margin:
    9px 0 13px;

  font-size:
    clamp(
      2.15rem,
      4.2vw,
      4rem
    );

  font-weight: 650;
  letter-spacing: -0.067em;
  line-height: 0.98;
}


body .runtime-modal-body h4 {
  margin:
    27px 0 10px;

  color: var(--text);

  font-size: 0.88rem;
}


body .runtime-modal-body p,
body .runtime-modal-body li {
  color: var(--text-soft);

  font-size: 0.81rem;
  line-height: 1.67;
}


body .runtime-modal-body ul,
body .runtime-modal-body ol {
  margin-top: 13px;

  display: grid;

  gap: 10px;

  padding-left: 20px;
}


body .runtime-modal-body ul {
  padding-left: 0;

  list-style: none;
}


body .runtime-modal-body ul li {
  position: relative;

  padding-left: 21px;
}


body .runtime-modal-body ul li > i {
  position: absolute;

  top: 0.45em;
  left: 0;

  color: var(--green);

  font-size: 0.64rem;
}


body .runtime-modal-body ol {
  list-style: decimal;
}


body .runtime-modal-body ol li {
  padding-left: 4px;
}


body .runtime-modal-body li strong {
  color: var(--text);
}


/* ============================================================
   MODAL OFFER INFORMATION
============================================================ */

body .runtime-offer-summary {
  position: relative;

  margin:
    23px 0;

  padding:
    17px 17px 17px 20px;

  display: grid;

  gap: 6px;

  overflow: hidden;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(
      255,
      255,
      255,
      0.015
    );
}


body .runtime-offer-summary::before {
  content: "";

  position: absolute;

  top: 16px;
  bottom: 16px;
  left: 0;

  width: 2px;

  background: var(--yellow);

  animation:
    offerLinePulse
    2.5s
    ease-in-out
    infinite;
}


body .runtime-offer-summary strong {
  font-size: 0.98rem;
}


body .runtime-offer-summary p {
  margin: 0;

  font-size: 0.74rem;
}


/* ============================================================
   LOADER
============================================================ */

#loader-overlay,
#appLoader {
  position: fixed;

  inset: 0;

  z-index: 30000;

  display: grid;

  place-items: center;

  color: var(--text);

  background: var(--background);

  transition:
    opacity
    0.45s ease,
    visibility
    0.45s ease;
}


#loader-overlay.is-hidden,
#appLoader.is-hidden {
  opacity: 0;
  visibility: hidden;
}


.loader-logo {
  animation:
    loaderLogo
    1.4s
    ease-in-out
    infinite;
}


@keyframes loaderLogo {
  0%,
  100% {
    opacity: 0.55;

    transform:
      scale(0.96);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.04);
  }
}


/* ============================================================
   CONFETTI
============================================================ */

body .runtime-confetti-layer {
  position: fixed;

  inset: 0;

  z-index: 9000;

  overflow: hidden;

  pointer-events: none;
}


body .runtime-confetti {
  position: absolute;

  top: -24px;

  width: 7px;
  height: 14px;

  animation:
    runtimeConfettiFall
    var(--duration)
    linear
    var(--delay)
    forwards;
}


@keyframes runtimeConfettiFall {
  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        -20px,
        0
      )
      rotate(0deg);
  }

  12% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--drift),
        105vh,
        0
      )
      rotate(720deg);
  }
}


/* ============================================================
   NOSCRIPT
============================================================ */

noscript {
  position: fixed;

  inset: 0;

  z-index: 40000;

  padding: 30px;

  display: grid;

  place-items: center;

  color: var(--text);

  background: var(--background);

  font-size: 0.95rem;
  text-align: center;
}


/* ============================================================
   LARGE SCREENS
============================================================ */

@media (
  min-width: 1750px
) {

  :root {
    --page-width: 1650px;
    --form-width: 1270px;
  }


  .intro-view.is-active {
    grid-template-columns:
      minmax(0, 1.28fr)
      minmax(470px, 0.72fr);
  }


  .intro-copy h1 {
    font-size: 5.65rem;
  }


  .plan {
    min-height: 625px;
  }

}


/* ============================================================
   NOTEBOOK
============================================================ */

@media (
  max-width: 1250px
) {

  .intro-view.is-active {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(420px, 0.82fr);
  }


  .intro-copy {
    padding:
      45px 40px;
  }


  .page-header {
    grid-template-columns:
      105px
      minmax(0, 1fr);
  }


  .page-header-note {
    grid-column: 2;
  }


  .compact-header {
    grid-template-columns:
      105px
      minmax(0, 1fr);
  }


  .register-layout {
    grid-template-columns:
      minmax(0, 1fr)
      330px;

    gap: 44px;
  }


  .confirmation-wrap {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(370px, 430px);

    gap: 48px;
  }

}


/* ============================================================
   STACK PLANS
============================================================ */

@media (
  max-width: 1030px
) {

  .plan-grid {
    grid-template-columns: 1fr;

    border-left: 0;
  }


  .plan {
    min-height: 0;

    border-left:
      1px solid
      var(--line);
  }


  .plan-description {
    min-height: 0;
  }


  .plan ul {
    flex: initial;
  }


  .register-layout {
    grid-template-columns: 1fr;

    gap: 42px;
  }


  .selection-summary {
    position: static;

    padding:
      30px 0 0;

    border-top:
      1px solid
      var(--line);

    border-left: 0;
  }


  .confirmation-wrap {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 45px;
  }


  .receipt {
    width:
      min(
        100%,
        630px
      );
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (
  max-width: 900px
) {

  :root {
    --header-height: 66px;
  }


  body {
    overflow-y: auto;
  }


  .app {
    height: auto;
    min-height: 100dvh;

    grid-template-rows:
      var(--header-height)
      minmax(
        calc(
          100dvh - var(--header-height)
        ),
        auto
      );
  }


  .stage {
    overflow: visible;
  }


  .view {
    position: relative;

    min-height:
      calc(
        100dvh - var(--header-height)
      );

    overflow: visible;
  }


  .intro-view.is-active {
    grid-template-columns: 1fr;

    grid-template-rows:
      minmax(
        390px,
        51vh
      )
      auto;

    overflow: visible;
  }


  .intro-media {
    min-height: 390px;
  }


  .intro-copy {
    min-height:
      calc(
        100dvh - var(--header-height)
      );

    padding:
      58px
      clamp(
        26px,
        7vw,
        64px
      );
  }


  .intro-copy::before {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;

    width: auto;
    height: 1px;
  }


  .intro-copy-inner {
    margin: auto;
  }


  .page-wrap,
  .register-wrap,
  .confirmation-wrap {
    width:
      calc(
        100% - 46px
      );
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (
  max-width: 700px
) {

  :root {
    --header-height: 62px;
  }


  body {
    font-size: 15px;
  }


  .topbar {
    padding:
      0 16px;

    grid-template-columns:
      1fr
      auto;
  }


  .topbar-step {
    display: none;
  }


  .brand {
    gap: 8px;
  }


  .brand img {
    width: 31px;
    height: 31px;
  }


  .brand span {
    font-size: 0.8rem;
  }


  .topbar-status {
    max-width: 180px;

    font-size: 0.64rem;
  }


  .intro-view.is-active {
    grid-template-rows:
      minmax(
        300px,
        43vh
      )
      auto;
  }


  .intro-media {
    min-height: 300px;
  }


  .intro-media-brand {
    top: 19px;
    left: 19px;

    font-size: 0.59rem;
  }


  .intro-media-brand img {
    width: 35px;
    height: 35px;
  }


  .intro-media-caption {
    right: 19px;
    bottom: 19px;
    left: 19px;

    font-size: 0.74rem;
  }


  .intro-copy {
    min-height: auto;

    padding:
      43px
      21px
      54px;
  }


  .intro-copy h1 {
    font-size:
      clamp(
        3rem,
        14vw,
        4.6rem
      );
  }


  .intro-text {
    margin-top: 20px;

    font-size: 0.9rem;
  }


  .intro-button {
    width: 100%;
  }


  body .runtime-countdown {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  body .runtime-countdown > div:nth-child(2) {
    border-right: 0;
  }


  body .runtime-countdown > div:nth-child(-n + 2) {
    border-bottom:
      1px solid
      var(--line);
  }


  .page-wrap,
  .register-wrap,
  .confirmation-wrap {
    width:
      calc(
        100% - 30px
      );

    padding:
      34px 0 52px;
  }


  .page-header,
  .compact-header {
    grid-template-columns: 1fr;

    gap: 18px;

    padding-bottom: 27px;
  }


  .page-header-note {
    grid-column: auto;
  }


  .page-header h2 {
    font-size:
      clamp(
        2.3rem,
        10vw,
        3.5rem
      );
  }


  .plan-grid {
    margin-top: 26px;
  }


  .plan {
    padding:
      24px 20px;

    gap: 20px;
  }


  .plan h3 {
    font-size: 2.25rem;
  }


  .plan-description {
    font-size: 0.84rem;
  }


  .launch-note {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .form-grid {
    grid-template-columns: 1fr;
  }


  .field-full {
    grid-column: auto;
  }


  .field input {
    min-height: 54px;

    font-size: 1rem;
  }


  .center-content {
    padding:
      48px 0;
  }


  .center-content h2 {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4.25rem
      );
  }


  .confirmation-copy h2 {
    font-size:
      clamp(
        2.9rem,
        13vw,
        4.5rem
      );
  }


  .confirmation-actions {
    display: grid;

    grid-template-columns: 1fr;
  }


  .confirmation-actions .secondary-button {
    width: 100%;
  }


  .receipt {
    padding:
      22px 18px;
  }


  .receipt dl > div {
    display: grid;

    grid-template-columns:
      minmax(105px, 0.75fr)
      minmax(0, 1fr);

    gap: 14px;
  }


  .receipt dd {
    max-width: none;
  }


  #statusSecondaryButton {
    margin-right: 0;
  }


  body dialog.runtime-modal {
    width:
      calc(
        100% - 18px
      );

    max-height:
      calc(
        100dvh - 18px
      );
  }


  body .runtime-modal-body {
    max-height:
      calc(
        100dvh - 85px
      );

    padding:
      24px 19px 34px;
  }


  body .runtime-modal-body h3 {
    font-size:
      clamp(
        2.25rem,
        11vw,
        3.7rem
      );
  }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (
  max-width: 450px
) {

  .topbar-status {
    max-width: 145px;
  }


  .topbar-status > i {
    display: none;
  }


  .intro-meta {
    display: grid;

    gap: 7px;
  }


  .plan-head {
    align-items: flex-start;
  }


  .plan-spots {
    max-width: 135px;
  }


  .summary-list > div {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
  }


  .summary-list dd {
    max-width: none;
  }


  .receipt-head {
    display: grid;
  }


  .receipt-head > span {
    justify-self: start;
  }


  .receipt dl > div {
    grid-template-columns: 1fr;

    gap: 4px;
  }


  .receipt dd {
    text-align: left;
  }


  body .runtime-toast {
    bottom: 11px;

    width:
      calc(
        100% - 18px
      );
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}


/* ============================================================
   PRINT
============================================================ */

@media print {

  @page {
    margin: 18mm;
  }


  html,
  body {
    width: auto;
    min-height: auto;

    overflow: visible;

    color: #111;

    background: #fff;
  }


  body::before,
  body::after {
    display: none;
  }


  .app {
    display: block;

    height: auto;
    min-height: auto;

    overflow: visible;

    background: #fff;
  }


  .topbar,
  .confirmation-copy,
  .confirmation-actions,
  .runtime-toast,
  .runtime-confetti-layer,
  dialog.runtime-modal {
    display: none !important;
  }


  .stage,
  .view {
    position: static;

    min-height: auto;

    overflow: visible;

    background: #fff;
  }


  .view {
    display: none !important;
  }


  .view[data-view="confirmed"] {
    display: block !important;

    opacity: 1 !important;

    transform: none !important;

    animation: none !important;
  }


  .confirmation-wrap {
    display: block;

    width: 100%;
    min-height: auto;

    padding: 0;
  }


  .receipt {
    width: 100%;

    padding: 0;

    border: 0;

    color: #111;

    background: #fff;

    box-shadow: none;

    animation: none;
  }


  .receipt-head {
    border-color: #bbb;
  }


  .receipt-head p,
  .receipt dt,
  .receipt dd {
    color: #222;
  }


  .receipt-head > span {
    color: #111;
  }


  .receipt dl > div {
    padding:
      10px 0;

    border-color: #ddd;

    background: transparent;
  }


  .receipt .receipt-id dd {
    color: #111;
  }

}